Question

我正在尝试this tutorial而我正在Angular Routing。他们使用的是angular-ui-router而不是ng-route。所以我找到了AngularUI router on github，它在使用它时提供了更多信息。但是我没有得到理想的结果。

我在项目的根文件夹中使用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
    )
])

templates文件夹也位于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-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-router没有显示模板

2 个答案: