Routing.generateAngularRoute is not a function

[NoelLH]

Hi,

Thanks very much for this, it looks like a really useful starting point for the project I'm trying to move towards Angular.

I've got a bit stuck using it as inspiration for my own code with newer Angulars, but I'm probably getting ahead of myself there since even my efforts with the demo as-is have not quite worked.

I've taken the codebase, added a minimal config etc. and made an Apache vhost that mirrors your recommendation. But if I then go to e.g. http://angular.localhost/#!/demo/secured/hello/World I get a JavaScript error because Routing.generateAngularRoute is not a function. I see the page load as far as Symfony is concerned, and all external files are there, but of course with the JS error there is no AngularJS template magic working.

I can't actually see anywhere this function is declared in the codebase. But I also had no luck trying to tweak the parameters and replace it with Routing.generate(), which I guess does something subtly different.

Any ideas where I'm going wrong would be much appreciated!

[rajasaur]

Hi, I use a modified fosjsrouting bundle as you can see in the composer.json. It uses a local branch (dev-angularsf) in my fork of fosjsrouting, which includes this function.

I too had this problem I think as the javascript updated by composer did not have it and resulted in the same error as yours. The function to add (generateAngularRoute) is at https://github.com/rajasaur/FOSJsRoutingBundle/commit/da1980ba4366befbd3cd5f3b9ac877e1ea04d4c3. You can add it to your router.js (I have automated it as part of composer.json so that it gets updated as part of post-{install,upgrade} commands.

Let me know if that fixes the problem. Our project is now using angularjs 1.2.x with a much modularized app.js since there are a lot of screens and we made quite a few changes from this branch to optimize it. Let me know if youd be interested and I can try to port it. The problem is the scope as a demo project can only demonstrate so much.

[NoelLH]

Aha, thanks very much! I'd missed that other branch.

This has got things looking a lot more promising. (I'm also making reasonable progress with my - albeit messier currently! - code on AngularJS 1.3.x, but would be good to understand how it should work properly in the demo.)

Just for reference, to get to my current point I've:

• Used the modified FOSJsRoutingBundle as you say
• Got a recent plovr.jar and save it as vendor/plovr/plovr.jar (as per docs for google-closure-bundle
• Rebuilt as per FOSJsRoutingBundle doc: php app/console plovr:build @FOSJsRoutingBundle/compile.js - I did get one error here, which might be relevant below? (Error: /Users/noel/files/Dev/angulartest/angular-symfony-demo/vendor/friendsofsymfony/jsrouting-bundle/FOS/JsRoutingBundle/Resources/js/router.js:209: WARNING - Property hosttokens never defined on route)
• php app/console fos:js-routing:dump

This seems to work in places. Filling in the contact form does what I'd expect in the 'main' area of the page, including a confirmation message.

However some things don't seem right:

• A URL like http://angular.localhost/demo/ sees me redirected to an escaped version like http://angular.localhost/#!%2Fdemo%2F, with no console errors - even though others such as http://angular.localhost/demo/secured/login don't do this.
• No pages have a working version directive in the footer - just "Angular seed app: v" - even when loading with no JS errors
• The login form does a full-page POST to .../login_check, then seems to take the location returned and clears the form completely. I'm left with a page still showing http://angular.localhost/demo/secured/login in the URL bar, but with no form - just a page header and footer. If I subsequently load the page afresh from the location bar, I get the form back plus the flash message ('Bad credentials') I should have got before. When I get the missing form there is a JS error:

Error: Argument 1 of Node.appendChild does not implement interface Node.
.clean@http://angular.localhost/lib/jquery-1.7.2.js:6497:6
...
.link/<@http://angular.localhost/js/directives.js:14:17
...

I think this error relates to element.html ($compile(value)(scope)); in the compileHtml directive. When working with newer AngularJS I did find this seemed to need replacing with something more like this:

element.html(value);
$compile(element.contents())(scope);

Otherwise I'd get an escaped representation/description of the objects I wanted instead of them actually being compiled.

However if I try this substitution in the demo with the versions as-is, I get rid of the JS error but still have the same behaviour with the vanishing form.

Sorry this is a bit long/ involved! Please let me know if any more info would be helpful.

[rajasaur]

Hi, I never tried this project with angular 1.2 or 1.3, so not sure if thats causing any issues but my actual project runs on angular 1.2 and i checked the directive for compileHtml is the same as what is in here.

I have a couple deadlines before end of day tomorrow, so may not get the time to try this out immediately, but ill do some work on updating the branch and trying it out by monday.

[NoelLH]

Sorry, was unclear - for the demo project I'm sticking with the versions used here to try and isolate the problem I had, so that's still on Angular 1.1.5.

No rush at all - really appreciate your help!