AngularJS、Rails 和 ui-路由器未显示模板

Question

我正在尝试 this tutorial and I'm on the part of Angular Routing. And they're using angular-ui-router instead of ng-route. So I found a AngularUI router on github，它提供了更多有关使用它的信息。但是我没有得到想要的结果。

我在我的项目的根文件夹中使用 bower install angular-ui-router 通过 bower 添加了路由-ui，它创建了所有需要的文件等

我已经在 application.js

中添加了所需的文件

//= require jquery
//= require jquery_ujs

//= require angular
//= require angular-ui-router
//= require angular-animate
//= require angular-rails-templates

//= require angular-app/app
//= require_tree ./angular-app/templates
//= require_tree ./angular-app/modules
//= require_tree ./angular-app/filters
//= require_tree ./angular-app/directives
//= require_tree ./angular-app/models
//= require_tree ./angular-app/services
//= require_tree ./angular-app/controllers

当我检查 <head> 时，我可以看到正在加载 angular 和路由器文件。我的 Angular 功能也正常工作。

在我的 angular-app 文件夹中，我有一个模块文件夹，其中有一个 searchModule.coffee.js 文件，内容如下，

@app = angular.module('app.movieseat', [ 'ui.router' ]).config([

  '$urlRouterProvider', ($urlRouterProvider) ->
    $urlRouterProvider.otherwise '/state1'
    # Now set up the states

  '$stateProvider', ($stateProvider) ->
    $stateProvider.state('state1',
      url: '/state1'
      templateUrl: '../templates/state1.html').state('state1.list',
      url: '/list'
      templateUrl: '../templates/state1.list.html'
      controller: ($scope) ->
        $scope.items = [
          'A'
          'List'
          'Of'
          'Items'
        ]
        return
    )
])

templates 文件夹也在 angular-app 文件夹中。

我的身材是这样的，

%body{"ng-app" => "app.movieseat"}

  %div{"ui-view" => ""}
  %a{"ui-sref" => "state1"} State 1
  %a{"ui-sref" => "state2"} State 2

所以我应该将 state1.html 包含在 ui-view 中，但没有任何反应。

我包含了正确的文件，但是 ui-view 没有做任何事情。我的控制台也没有出现错误。

Answer 1

您在定义配置块时犯了一个错误，

一次性添加函数中的依赖。

代码

@app = angular.module('app.movieseat', [ 'ui.router' ]).config([

  '$urlRouterProvider', '$stateProvider', ($urlRouterProvider, $stateProvider) ->
    $urlRouterProvider.otherwise '/state1'
    # Now set up the states

  //'$stateProvider', ($stateProvider) ->//basiacally you don't need this line
    $stateProvider.state('state1',
      url: '/state1'
      templateUrl: '../templates/state1.html').state('state1.list',
      url: '/list'
      templateUrl: '../templates/state1.list.html'
      controller: ($scope) ->
        $scope.items = [
          'A'
          'List'
          'Of'
          'Items'
        ]
        return
    )
])

Answer 2

angular-ui-router 似乎与新的 Rails 链轮不兼容。要解决此问题，请将此早期版本的 sprockets 添加到您的 gemfile 中：

gem 'sprockets', '2.12.3'

然后运行 bundle update sprockets.

这个问题在其他类似问题中已经回答过几次，如下所示： Angular Rails Templates just not working

AngularJS、Rails 和 ui-路由器未显示模板

AngularJS, Rails and ui-router not showing template

javascript

ruby-on-rails

angularjs

angularjs-routing

angular-ui-router