在项目开发中会到这样的需求,在导航中,有的点击需要在本页面中切换,有的点击需要跳转到其他页面(比如点击登录、注册等),ui-router为我们很方便的解决了这个问题,代码如下:
main.html中的代码:
04 | <meta charset= "UTF-8" > |
05 | <title>Document</title> |
13 | <script type = "text/javascript" > |
14 | var m = angular.module( 'app' , [ 'ui.router' ]); |
15 | m.config([ '$urlRouterProvider' , '$stateProvider' , function ($urlRouterProvider, $stateProvider){ |
16 | $urlRouterProvider.otherwise( '/index' ); |
17 | $stateProvider.state( 'index' , { |
19 | templateUrl : './index.html' , |
22 | .state( 'index.news' , { |
24 | templateUrl : './news.html' , |
30 | templateUrl : './login.html' , |
34 | m.controller( 'ctr1' , [ '$scope' , function ($scope){ |
35 | $scope.name = 'index.html' ; |
37 | m.controller( 'ctr2' , [ '$scope' , function ($scope){ |
38 | $scope.name = 'news.html' ; |
40 | m.controller( 'ctr3' , [ '$scope' , function ($scope){ |
41 | $scope.name = 'login.html' ; |
|
index.html中的代码:
2 | <a ui-sref= "index" >首页</a> |
3 | <a ui-sref= "index.news" >新闻</a> |
4 | <a ui-sref= "login" >登录</a> |
|
在main.html中可以看出,在路由中设置index.news或者是parent:"index"指定某个ui-view的父级,就可以实现在本页面中如果不指定这两个条件之一,就会跳转到其他页面!