Question

我想在rails应用程序中使用angularjs，而我是angularjs的新手。为此，我将angularjs文件添加到项目并创建了以下scripts和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'
    })
])

我将以下代码添加到application.js：

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

和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>

我在templates/home.html文件夹中创建了templates/restaurants/index.html和public个目录。

现在我想在templates/home.html上渲染localhost:3000并在templates/restaurants/index.html上渲染localhost:3000/restaurants。但我没有成功，rails呈现默认页面。我检查了我的服务器日志，每个js和angularjs文件都被渲染，但是当我转到localhost:3000/restaurants url时，rails呈现了restaurants的默认页面。（餐馆是由sccafold生成的模型。）我如何渲染angularjs html而不是rails html？有什么想法吗？

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

注意：为此，我使用this tutorial.

Answer 1

首先，如果您想使用路由，则必须在应用初始化中添加此行：

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

如果你想要localhost:3000/restaurants这样的网址，你必须使用html5-routing。

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

否则，只需尝试localhost:3000/#/restaurants。

渲染angularjs的html而不是默认的rails html

1 个答案: