AngularJS，Rails和ui-router未显示模板

Question

我正在尝试完成本教程，并且属于Angular Routing 。 他们正在使用angular-ui-router而不是ng-route。 因此，我在github上找到了一个AngularUI路由器，该路由器提供了使用它的更多信息。 但是我没有得到理想的结果。

我在项目的根文件夹中使用bower install angular-ui-router了Bower的route-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-app文件夹中，有一个modules文件夹，其中包含带有以下内容的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
    )
])

模板文件夹也位于angular-app文件夹内。

我的身体看起来像这样

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

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

所以我应该在ui-view包含state1.html，但是什么也没有发生。

我包含正确的文件，但是ui视图未执行任何操作。 我的控制台也没有出现错误。

Answer 1

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

将两个依赖项添加到函数go中。

码

@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链轮不兼容。 要解决此问题，请将早期版本的链轮添加到您的gemfile中：

gem 'sprockets', '2.12.3'

然后运行bundle update sprockets 。

在其他类似的问题（如以下问题）中也对此回答了几次： Angular Rails模板不起作用

AngularJS，Rails和ui-router未显示模板

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-08-10 19:15:32

解决方案2
0 2015-08-23 16:14:18

AngularJS，Rails和ui-router未显示模板

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-08-10 19:15:32

解决方案2 0 2015-08-23 16:14:18

解决方案1
1 已采纳 2015-08-10 19:15:32

解决方案2
0 2015-08-23 16:14:18