呈現angularjs的html而不是默認rails html

我想在rails應用程序中使用angularjs，我是angularjs的新手。對於這一點，我想補充angularjs文件項目和創建以下scripts和html：呈現angularjs的html而不是默認rails 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>

，我在public文件夾中創建templates/home.html和templates/restaurants/index.html目錄。

現在我想渲染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.

來源

2014-07-21 mgh

首先，如果你想使用的路由，您必須在您的應用程序初始化中加入這一行：

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

如果你想要url，如localhost:3000/restaurants，你必須使用html5-routing。

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

否則，只需嘗試localhost:3000/#/restaurants。

來源

2014-07-21 13:40:07 uselesssmile

呈現angularjs的html而不是默認rails html

回答

相關問題