之前我使用过ng-route并且工作正常,但是使用UI路由器,链接不再可以点击,或者至少大部分时间它们都没有.当它们是非常随机的时,它们不会显示我正在使用的html模板.
HTML：
<head>
<title>Tutorial</title>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-ui-router.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<ng-view></ng-view>
<ul class="menu">
<li><a ui-sref="view1">view1</a></li>
<li><a ui-sref="view2">view2</a></li>
</ul>
.js文件
angular.module('myApp',[
'myApp.controllers','ui.router'
]);
angular.module('myApp').config(function($stateProvider,$urlRouterProvider) {
$stateProvider.state('view1',{
url: '/view1',controller:'Controller1',templateUrl:'/view1.html'
}).state('view2',{
url: '/view2/:firstname/:lastname',controller: 'Controller2',resolve: {
names: function() {
return ['Misko','Vojta','Brad'];
}
},templateUrl: '/view2.html'
});
$urlRouterProvider.otherwise('/view1');
});
angular.module('myApp.controllers',[]).controller('Controller1',function($scope,$location,$state) {
$scope.loadView2=function() {
$state.go('view2',{
firstname: $scope.firstname,lastname: $scope.lastname
});
};
}).controller('Controller2',$stateParams,names) {
$scope.firstname = $stateParams.firstname;
$scope.lastname = $stateParams.lastname;
$scope.names = names;
});
我正在按照AngularJS上的SitePoint电子书中的说明进行操作,所以我不确定我做错了什么或错过了什么.
我没有在你的标记中的任何地方看到ui-view,因此你的状态视图很可能不被渲染和注入.
你不应该需要ng-view.主HTML文件中应存在单个ui视图.您的顶级状态将被渲染并注入其中.状态可以有子状态,并且具有子状态的状态的每个模板应该具有其自身的ui视图,其中将呈现其呈现的子状态.
通过ui-router‘s readme查看使其正常工作的基础知识.此外,他们有一个很好的demo app,其来源真正帮助我了解这个状态路由引擎是什么以及如何使用它.
