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

【问题标题】：Render html of angularjs instead of default rails html渲染 angularjs 的 html 而不是默认的 rails html
【发布时间】：2023-03-16 15:55:01
【问题描述】：

我想在 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>

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

现在我想在localhost:3000 上渲染templates/home.html 并在localhost:3000/restaurants 上渲染templates/restaurants/index.html。但我没有成功，rails 被呈现为默认页面。我检查了我的服务器日志，每个js 和angularjs 文件都被渲染了，但是当我转到localhost:3000/restaurants url 时，rails 渲染了restaurants 的默认页面。（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.

【问题讨论】：

标签： ruby-on-rails angularjs

【解决方案1】：

首先，如果你想使用路由，你必须在你的应用初始化中添加这一行：

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

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

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

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

【讨论】：