use angularjs in rails project

Question

I want use angularjs in a rails project and I'm new to angularjs. for this, I create a staticpage controller with index action. I set this page for root page:

config/routes.rb

Restauranteur::Application.routes.draw do
  root "staticpage#index"
end

now I download angular.js and add to asset pipeline. I remove turbolink and add below code to view/layouts/application.html.erb:

<!DOCTYPE html>
<html ng-app="restauranteur">
<head>
  <title>Restauranteur</title>
  <%= stylesheet_link_tag    "application", media: "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>

<div ng-view>
  <%= yield %>
</div>

</body>
</html>

Then, I create HomeCtrl.js.coffee:

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
  # Notice how this controller body is empty
]

Now, I set an angular route for show default page, For this I create main.js.coffee and create a templates directory in public folder.

main.js.coffee:

@restauranteur = angular.module('restauranteur', [])

@restauranteur.config(['$routeProvider', ($routeProvider) ->
  $routeProvider.
  otherwise({
      templateUrl: '../templates/home.html',
      controller: 'HomeCtrl'
    })
])

I create home.html in public/templates folder.

I want when I run the server,I see home.html, but the server run staticpage/index, where is the problem? Why home.html isn't set as root page and I cannot preview this?

server log:

Started GET "/" for 127.0.0.1 at 2014-07-17 18:54:31 +0430
Processing by StaticpageController#index as HTML
  Rendered staticpage/index.html.erb within layouts/application (0.0ms)
Completed 200 OK in 12ms (Views: 11.0ms | ActiveRecord: 0.0ms)
Started GET "/assets/staticpage.css?body=1" for 127.0.0.1 at 2014-07-17 18:54:31 +0430
Started GET "/assets/application.css?body=1" for 127.0.0.1 at 2014-07-17 18:54:31 +0430
Started GET "/assets/restaurants.css?body=1" for 127.0.0.1 at 2014-07-17 18:54:31 +0430
Started GET "/assets/scaffolds.css?body=1" for 127.0.0.1 at 2014-07-17 18:54:31 +0430 
Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at 2014-07-17 18:54:31 +0430 
Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at 2014-07-17 18:54:31 +0430
Started GET "/assets/angular.js?body=1" for 127.0.0.1 at 2014-07-17 18:54:31 +0430
Started GET "/assets/main.js?body=1" for 127.0.0.1 at 2014-07-17 18:54:31 +0430
Started GET "/assets/angular/controllers/HomeCtrl.js?body=1" for 127.0.0.1 at 2014-07-17 18:54:31 +0430
Started GET "/assets/application.js?body=1" for 127.0.0.1 at 2014-07-17 18:54:31 +0430

Note: I use this tutorial for do this, but I am not successful.

Rob · Accepted Answer · 2014-07-17 12:47:39Z

0

There are two different layers of views involved in this example:

the Rails views
the ng-view of AngularJS

I think that 1) is actually working because you see that the application renders staticpage/index, just like you specified in the Rails routes.

To get 2) to work, you need to make sure that you include the main.js in the application.js using the require_tree . instruction you see in the tutorial you used.

After this is done, the Angular application will pick up the routes. It will detect that no route matches and executes the otherwise section. In your Rails log, you will see that it tries to request the view templates/home.html. Once this succeeds, the loaded view will be rendered client-side within the <div ng-view> element.

answered Jul 17, 2014 at 12:47

Rob

4113 silver badges10 bronze badges

I edit question and add server log. I sure main.js and HomeCtrl.js are add successfully. I see the log, in server log just rendered staticpage/index. now how can I render public/templates/home.index instead of staticpage/index?

mgh
– mgh

07/17/2014 14:34:46
Commented Jul 17, 2014 at 14:34
The rendering as you expect it is done by angular at this point in time, not Rails. I don't see that the template is requested by angular. Please check the browser's javascript console for errors.

Rob
– Rob

07/18/2014 22:26:47
Commented Jul 18, 2014 at 22:26

Add a comment |

Collectives™ on Stack Overflow

use angularjs in rails project

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related