我正在尝试做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
)
])
模板文件夹也位于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视图没有执行任何操作。我的控制台也没有出现错误。
最佳答案
您在定义配置块时犯了一个错误,
将两个依赖项添加到函数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
)
])