AngularJS routes does not work Play 2.5 java

[Telmo Neves]

Hi there.

After a long time looking for a solution I don't understand the best approach to use angular router instead of play routes.

For example when I launch localhost:9000/maps defined in angular router, it goes directly to play framework router where is not defined and gives a error.

But for 

This is my play framework routes 

GET     /                    controllers.Assets.at(path="/public", file="index.html")

GET     /*file               controllers.Assets.at(path = "/public", file)

App.js

app.config(function ($routeProvider) {
    $routeProvider
        .when('/home/', {
            templateUrl: 'html/maps.html',
            controller: 'MapsController'
        })
        .otherwise({
            redirectTo: '/'
        });
});

I use index.html to import all the scripts and css...and dont have a index.html.scala file as I thought it was pointless.

html folder is inside public folder.

Thanks for the help.

[Greg Methvin]

Hi Telmo,

Play's router and Angular's router serve different purposes. Play's router is responsible for determining which action to call when a request is received on the server side. Angular's router works on the client side, after the server has already sent a page to the client.

I'm assuming you've configured Angular's router to use the HTML5 history API, so it has the ability to change the URL on the client side without making a request to the server. If this is the case, you basically have to rewrite all your URLs to the entry point of your application. That should render your "index.html" page with your Angular JavaScript. From there Angular should parse the URL and render the correct page.

Here's an example routes file from a working Angular2/Play app: https://github.com/joost-de-vries/play-angular2-typescript/blob/master/conf/routes. And the controller: https://github.com/joost-de-vries/play-angular2-typescript/blob/master/app/controllers/Application.scala. The important thing is the "other" action mapping all the other URLs back to "index". The "index" action can do whatever you want; it doesn't have to render a template. It could send a static HTML file if you want.

--
You received this message because you are subscribed to the Google Groups "Play Framework" group.
To unsubscribe from this group and stop receiving emails from it, send an email to play-framework+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/play-framework/54602501-cd5e-4339-b777-aba496fc1c6f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Greg Methvin

Tech Lead - Play Framework

Lightbend, Inc.

[kevin....@redelastic.com]

Hi Thelmo,

To expand on what Greg said, routing in Play and Angular need to compliment each other rather than step on each other. Think of Angular as "intercepting" requests to specific URIs, based on the definitions in Angular, and Play handling everything else. 

I did a webinar on this a long time ago: https://www.lightbend.com/resources/video/play-all-day-enterprise-web-development-with-play-and-scala

If you go to about 11:30 in that video, I go through Play/Angular routing in detail. This is an old webinar with Angular 1.x code examples but the concepts should remain more or less the same. 

You'll need to do a few main things:

1. Decide which routes Angular should ignore, and let those pass through to the server in Angular's routing file
2. Add routing instructions for those routes to Play
3. Add wildcard routes on Play in case someone bookmarks a route that only Angular handles (or visits from a link, etc)

HTH.

Thanks,

-Kevin.

To unsubscribe from this group and stop receiving emails from it, send an email to play-framewor...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/play-framework/54602501-cd5e-4339-b777-aba496fc1c6f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Pasquale Panuccio]

Hi Kevin,

it seems that the link you provided doesn't work. Moreover, also the link suggested by Greg, doesn't exists anymore. In fact I couldn't find  the 

 "other" action mapping all the other URLs back to "index". 

in the provided example's code. 

Actually I use Angular 4 with  PathLocationStrategy and Play Framework 2.5 with the following configuration:

GET        /             controllers.Assets.at(path="/public/ui/dist", file="index.html")

GET        /*file               controllers.Assets.at(path="/public/ui/dist", file)

The Angular's components are built and deployes to the public/ui/dist folder. 

When I manually insert an URL ( for example http://localhost:9000/profile)  that isn't listed in the Play's routes file, I receive the "Action Not Found"  error. 

The REST API exposed by the Play Framework are all prefixed with  /api/v1/*.

What route configuration I have to setup in order to redirect all the "non Play Framework related URLs" to the index.html?

Thank you in advance.

Pasquale

[R.M.]

It's not possible at the moment.  Here is the open bug:  https://github.com/playframework/playframework/issues/7634