为什么我的 html 页面没有在 <ui-view> 中呈现？

Question

我正在尝试用 rails 连接 angularjs。我的观点有一些问题。他们没有得到渲染

正在获取我的视图，但出现错误 [HTTP/1.1 404 Not Found]

我收到这个是对 first.html 的回应 https://github.com/sourabh-garg/vegeta/blob/master/response%20error.html

在我尝试加载的 app/assets/templates/first.html 中。

app/views/application/index.html.erb 有我的索引文件

路由 root 'application#index'

App.js

   var app = angular.module('myapp', ['ui.router'])

      .config(function config($stateProvider){

       $stateProvider.state("index", {
        url : "",
        controller : "FirstCtrl as first",
        templateUrl : "first.html"
       })

       $stateProvider.state("second", {
        url : "/second",
        controller : "SecondCtrl as second",
        templateUrl : "second.html"
       })

      })
      .directive('elem', function () {
        return {
          restrict: 'E',
          templateUrl: "templates/second.html"
        };
      })
      .filter('reverse', function(){

      return function(text){
        return text.split('').reverse().join('');
      }

      })
      .service("greeting", function Greeting(){

        var greeting =  this;

        greeting.message =  "Default";
       })
      .service('Data', [function () {

        return {message: "You are a awesome"}
      }])
      .controller('FirstCtrl', function($scope, greeting, Data){

        var first = this;
        first.greeting = greeting;

        first.data = Data;

        first.reversed = function(message){
          return message.split('').reverse().join('');

        };

      })
      .controller('SecondCtrl', function($scope, greeting){

        var second = this;
        second.greeting = greeting;
      });

Answer 1

1) 您正在使用gem angular-rails-templates。

您不必将模板模块注入到您的 Angular 应用程序中吗？
angular.module('myapp', ['ui.router', 'templates'])

---

2) 在您的文件结构 app/assets/javascripts/ 中，第 5 行的 application.js 文件中，查看将 //= require_tree . 更改为 //= require_tree ../templates 是否可以更正链接。

资源： angular-rails-template: include templates in rails assets pipeline

Answer 2

你的config函数写错了，试试

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

$stateProvider 被使用了两次。
// Now set up the states

// For any unmatched url, send to /route1 $urlRouterProvider.otherwise("/first");

$stateProvider .state('first', { url: "/first", templateUrl: "first.html" }) .state('second', { url: "/second", templateUrl: "second.html" }); }])