javascript - Angular JS and Symfony2 -

i working on project using symfony2 , seeking advice on that.

i thinking of hybrid application in two(2) different ways a) login page shall use traditional form crf token , let symfonty2 handle it. b) inner pages ( potentially modules ) want them non ajax, other activities inside shall behave single page.

for example have employee module. when user clicks on entirely loaded server ( templates , forms etc ) each activity under employee module add/update delete/view etc shall loaded through ajax , response returned in json i.e angularjs.

i thinking of using fosuserbundle return html on initial request , based on request type accept: application/json return json ( remember add/updat delete/view part? ).

my question better idea use angular partials (html) files or symfony2 twig? or better use angular js, let partials rendered symfony2 twig? ( thinking of forms here, want validate both client , server side )

has 1 been through similar problem, if yes approach used develop hybrid application using angularjs , symfony2 or other framework? relevant ideas appreciated.

i in same situation are. angularjs+symfony2 project, rest api, login using fosuserbundle, etc.

... , every way has pros , cons, there no right way, i'm gonna did.

i choose angularjs native templates, no csrf validation, base template built using twig, server-side validation, use of fosjsroutingbundle, , helpers (builtresponse , basecontroller).

why native templates?

with use of verbatim, solve variable problems, gonna have more complex logic in our templates.

we have less scalable application. our forms templates doing request in symfony application, , 1 of best pros of angularjs load our controllers, templates, etc storage service, s3, or cdn, cloudfront. there no server-side processing, our templates load faster. caching, twig slower, obviously.

and both, twig , angularjs templates, complex manage, in own experience. started making them together, painful manage.

what did?

i created static templates in front-end, same field names, it's not good. need update templates every time update forms, manually. best way found. field names equal, won't have problems ajust model names in angular controllers.

and if creating software service, need anyway. not load form templates application in mobile app, right?

why no csrf validation?

we don't use csrf validation in rest api, obviously. but, if wanna it, need make request every time load form, csrf token. it's really, bad. so, create crud, , need create "csrf-crud", 4 routes more. doesn't make sense.

what did?

i disabled csrf in forms.

base template?!

yep. base template load route in our application. here i'm doing:

this avoid errors when users going directly application url if using html5 angularjs urls. simple that.

server-side validation, why?

if validation in angular, need same in server-side, have 2 validation codes maintain. painful. every change in form, need change validation in front, validation in , angular static form. really, painful.

what did?

i did server-side validation using symfony constraints. every request, application validates form , check if error found, if yes, gets first 1 , send response.

in angularjs, application checks if there error inside of errors key. so, have proccess used in application form request. it's that:

and routes?

there problem: routes. put url directly not reliable way. if change in url, route gone , users won't that.

to fix that, can use fosjsroutingbundle. library, can put route name directly in angular controller, , fill exact url of route. it's integrated symfony, parameters work well.

instead using url directly, can it:

routing.generate('panel_products_show', {id: $routeparams.product_id}); 

and voilá! route url.

---

that solve biggest part of problems have. there more.

problem 1 - form inputs

the forms symfony have prefix, "publish_product", every field has name [publish_product]name. ah, how problem me.

in angular, publish_product not considered array. need put single quote this, ['publish_product']name. , it's bad, need change every key use format. in angularjs, doing that:

{{ formdata('[publish_product]name') }} 

absolutely stupid.

the best solution remove form prefix in symfony, using createnamedbuilder method instead createbuilder. let first parameter null, , yeah, don't need use prefix anymore. now, use:

{{ formdata.name }} 

so better.

problem 2 - routes hard maintain

every request can return anything, need repeat code. hard maintain, create application rules, built responses, basecontroller, etc.

createnamedbuilder

createnamedbuilder big method. need this, every form have:

it's simple solve. created basecontroller , i'm extending every controller it. created simple method it.

for every route, not need repeat 3 lines, better.

responses

when application started growing, had serious problem: responses different. hard maintain. every request doing, using "response", "data", error messages lost in response, etc.

so, decided create buildresponse, need set parameters , same result every route, routes.

response key shows me status , message. can error or success, , message os optional field, can come blank. for example, success status message "you created product".

data key shows me information need. example, user added product, , needs link see it. in data, put url of post, , can angularjs controller.

notifications specific key business logic. every action can return notification user.

it doesn't matter keys have. important thing have standardized response, because when application grows, helpful.

that route controller:

completely standardized. scrutinizer code quality tool says routes duplicated. :d

have basecontroller , builtresponse much. when started refactoring code, each route lost 4-10 lines.

---

details: getformerror return first error of form. here method:

public function getformerror(forminterface $form) {     if ($form->geterrors()->current()) {         return $form->geterrors()->current()->getmessage();     }      return 'errors.unknown'; } 

... , parameters buildresponse are: 1. status. constant in basecontroller. can changed, believe important not use string value in each route. 2. translation message. (i use preg_match check if has translation format, because getformerror translates error). 3. data (array) parameter. 4. notifications (array) parameter.

other problem i'm gonna have

the project have 1 supported language until now. when start work in multilingual version, i'm gonna have big problem: maintain 2 versions of translations: back-end messages , validations , text front-end. big problem. when best approach, i'll update answer.

i took months approach. many code refactorings , probaly more in future. hope not need same.

1. if better way this, i'll update answer.

2. i'm not @ writing english, answer have many grammatical errors. sorry, i'm fixing i'm seeing.