routing between angularJs and playframework

Question

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

"how can I do the routing" is a pretty vague question, please elaborate on what your specific problem is. — charlietfl
– charlietfl, Commented Feb 24, 2016 at 13:34
Have you ever looked at the javascript routing page of the play framework documentation? — irundaia
– irundaia, Commented Feb 24, 2016 at 14:05
Hard to figure out why you need angular router if you are doing all the routing on server. Seems like you need to make up your mind if you are building a single page app or a server side app. — charlietfl
– charlietfl, Commented Feb 24, 2016 at 14:10
I'm building a server side app, so I must do the CRUD with restangular for every class. for example this link /custd must show me the page related to customerdetail. (I'm beginner at all of this) — Rajeun
– Rajeun, Commented Feb 24, 2016 at 14:28

Laurence Bird · Accepted Answer · 2016-02-24 20:10:57Z

1

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 Feb 24, 2016 at 20:10

Laurence Bird

1807 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rajeun Over a year ago

the reason why I'm using AngularJS in my application is to display smart tables and other component, but I found myself lost between angular controllers and other controllers

Laurence Bird Over a year ago

Ignoring the concept of controllers, angular is geared towards single page applications, where everything is rendered on the client side. This means that through the angular app if you are loading a resource (for example an html page in your example via /custdetail) this needs to have been loaded in the browser on the client side (the users device). If you have some data which you want to get from your server you need to access it via an HTTP request, as the client and server are remote

Laurence Bird Over a year ago

When I was first learning angular i used this tutorial: campus.codeschool.com/courses/shaping-up-with-angular-js It's starts from quite simple terms and although the music and narrative is irritating, covers all the important basics very well

Collectives™ on Stack Overflow

routing between angularJs and playframework

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related