Render html of angularjs instead of default rails html

Question

I want use angularjs in rails application and I'm new to angularjs. For this, I add angularjs file to project and created the below scripts and html:

HomeCtrl.js.coffee

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

RestaurantIndexCtrl.js.coffee:

@restauranteur.controller 'RestaurantIndexCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
  $scope.restaurants = []
  $http.get('./restaurants.json').success((data) ->
    $scope.restaurants = data
  )
]

main.js.coffee:

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

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

I add below code to application.js:

//= require angular
//= require angular-mocks
//= require angular-route
//= require main
//= require HomeCtrl
//= require RestaurantIndexCtrl

and in 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>

and I created templates/home.html and templates/restaurants/index.html directories in public folder.

now I want render templates/home.html on localhost:3000 and render templates/restaurants/index.html on localhost:3000/restaurants. But I'm not successful and rails is rendered default page. I check my server log, every js and angularjs file are renderd, but when I go to localhost:3000/restaurants url, rails rendered default page of restaurants. (restaurants is a model that generated by sccafold.) How can I render angularjs html instead of rails html? Any idea?

server log:

Started GET "/restaurants" for 127.0.0.1 at 2014-07-21 16:48:06 +0430
Processing by RestaurantsController#index as HTML
  Restaurant Load (0.0ms)  SELECT "restaurants".* FROM "restaurants"
  Rendered restaurants/index.html.erb within layouts/application (1.0ms)
Completed 200 OK in 12ms (Views: 11.0ms | ActiveRecord: 0.0ms)
Started GET "/assets/application.css?body=1" for 127.0.0.1 at 2014-07-21 16:48:06 +0430
Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at 2014-07-21 16:48:06 +0430
Started GET "/assets/scaffolds.css?body=1" for 127.0.0.1 at 2014-07-21 16:48:06 +0430
Started GET "/assets/restaurants.css?body=1" for 127.0.0.1 at 2014-07-21 16:48:06 +0430
Started GET "/assets/staticpage.css?body=1" for 127.0.0.1 at 2014-07-21 16:48:06 +0430
Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at 2014-07-21 16:48:06 +0430
Started GET "/assets/angular.js?body=1" for 127.0.0.1 at 2014-07-21 16:48:06 +0430
Started GET "/assets/main.js?body=1" for 127.0.0.1 at 2014-07-21 16:48:06 +0430
Started GET "/assets/angular/controllers/HomeCtrl.js?body=1" for 127.0.0.1 at 2014-07-21 16:48:06 +0430
Started GET "/assets/angular/controllers/RestaurantIndexCtrl.js?body=1" for 127.0.0.1 at 2014-07-21 16:48:06 +0430
Started GET "/assets/application.js?body=1" for 127.0.0.1 at 2014-07-21 16:48:06 +0430

Note: For do this, I use this tutorial.

uselesssmile · Accepted Answer · 2014-07-21 13:40:07Z

1

At first, if you want use routing, you must add this line in your app initialization:

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

And if you want url such as localhost:3000/restaurants, you must use html5-routing.

@restauranteur.config(['$locationProvider', '$urlRouterProvider',
    function($locationProvider, $urlRouterProvider) {
        $locationProvider.html5Mode(true).hashPrefix('!');
        ...
        ...
    }
]);

Otherwise, just try localhost:3000/#/restaurants.

answered Jul 21, 2014 at 13:40

uselesssmile

1249 bronze badges

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

Collectives™ on Stack Overflow

Render html of angularjs instead of default rails html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related