routing between angularJs and playframework

Issue

I’m working with restangular ngroute and playframework and I’m trying to do my CRUD following this tutorial : http://plnkr.co/edit/d6yDka?p=info

the list.html and detail.html in the index page (in the tutorial), I have them all in customer.scala.html page which call the main page by using this : @main(“MyApp”) So all my controllers and models are defined in this main page.

So how can I do the routing, the way that when I click on a button I can call the link (localhost:9000/custd) definded here in my js page:

app.config(function($routeProvider, RestangularProvider) {
    $routeProvider.
      when('/custd', {
        controller:ListCtrl, 
        templateUrl:'list.html'
      }).

UPDATE:
this is the link in customer.scala.html

 <li><a href="@routes.Application.custDetail()">Customers</a></li>

in the file Application.scala I have this:

 def custDetail = Action {
    Ok(views.html.custDetail("Your new application is ready."))
  }

in routes I have this:

GET     /                           controllers.Application.index

GET     /custdetail                 controllers.Application.custDetail

so how can I link this : /custd (in the angular controller) with my html page

Solution

So I think you’re jumping in at the deep end a bit here. If you don’t understand how to make a simple play web app, and you don’t understand how to make a simple angular app then it might not be the best idea trying to integrate both straight away (I tried the same thing when I was new to this and it was complicated!).

Why have you chosen Angular for this given job? If you are not planning to create a single page application (which it sounds like you’re not), then just using play templating should be sufficient for your needs (ands there’s lots of docs available!).

If you are adamant on using the two, angular routing is geared towards angular applications. Looking at the routing you’ve provided:

app.config(function($routeProvider, RestangularProvider) {
    $routeProvider.
      when('/custd', {
        controller:ListCtrl, 
        templateUrl:'list.html'
      }).

In this you have provided a controller and a template. These are in reference to Angular controllers html templates, not Play. If you’re not sure on how Angular controllers work, Angular has great documentation:

https://docs.angularjs.org

You need to work out exactly what information you need from the server side, create an endpoint to serve that data to your Angular app (using AJAX calls). I know this is a high level answer but really integrating the two is quite complex and hard to summarise in a single reply. My advice would be focus on creating an Angular OR Play app, then once you have the basics down move to integrating the two, but be clear as to the reasons behind chosing your technology as it sounds like you may not be

Answered By – Laurence Bird

Answer Checked By – Terry (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.