angular路由 UI Router理解

原文链接

//引用依赖

angular.module('app',["ui.router"])

.config(function($stateProvider){

$stateProvider.state(stateName, stateCofig);

})

 

案例

创建state和view

app.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var photoGallery = angular.module('photoGallery',["ui.router"]);//注入模块依赖，ui.router为路由文件的模块 photoGallery.config(function($stateProvider, $urlRouterProvider){ $urlRouterProvider.otherwise('/home');//如果未寻得合适路径，则跳转到otherwise内的path $stateProvider　　　　　　　　　　　　//配置路由 .state('home',{　　　　　　　　　　　//状态跳转  home为状态名称  url为跳转页面　　templateUrl为要显示的页面内容 url: '/home', templateUrl: 'partials/home.html' }) .state('photos',{ url: '/photos', templateUrl: 'partials/photos.html' }) .state('about',{ url: '/about', templateUrl: 'partials/about.html' }) })

state之间的跳转

index.html

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a ui-sref="home" class="navbar-brand">Home</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li> <a ui-sref="photos">Photos</a> </li> <li> <a ui-sref="about">About</a> </li> </ul> </div> </div> </nav> <div ui-view></div>

以上通过ui-sref属性完成state之间的跳转。

 

→ 点击header上的链接

点击<a ui-sref="photos">Photos</a>，来到：

1 2 3 4 5 6

.state('photos',{ url: 'photos', views:{ "body":{templateUrl: 'partials/photos.html'}  //这时页面内容会显示在ng-view名为body的控件上 } })

 抽象state

如果一个state,没有通过链接找到它，那就可以把这个state设置为abstract:true,我们把以上的content和content.photos这2个state设置为抽象。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

.state('content',{ url: '/', abstract: true, views:{ "":{templateUrl: 'partials/content.html'}, "header@content":{templateUrl: 'partials/header.html'}, } }) ... .state('content.photos',{ url: 'photos', abstract: true, views:{ "body@content":{templateUrl: 'partials/photos.html'} } })

那么，当一个state设置为抽象，如果通过ui-sref或路由导航到该state会出现什么结果呢？

--会导航到默认路由上

$urlRouterProvider.otherwise('home');

即

 

1 2 3 4 5 6

.state('content.home',{ url: 'home', views:{ "body@content":{templateUrl: 'partials/home.html'} } })

最终把partials/home.html显示出来。

使用控制器

在实际项目中，数据大多从controller中来。

首先在路由中设置state所用到的控制器以及控制器别名。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

var photoGallery = angular.module('photoGallery',["ui.router"]); photoGallery.config(function($stateProvider, $urlRouterProvider){ $urlRouterProvider.otherwise('home'); $stateProvider .state('content',{ url: '/', abstract: true, views:{ "":{templateUrl: 'partials/content.html'}, "header@content":{templateUrl: 'partials/header.html'}, } }) .state('content.home',{ url: 'home', views:{ "body@content":{ templateUrl: 'partials/home.html', controller: 'HomeController', controllerAs: 'ctrHome' } } }) .state('content.photos',{ url: 'photos', abstract: true, views:{ "body@content":{ templateUrl: 'partials/photos.html', controller: 'PhotoController', controllerAs: 'ctrPhoto' } } }) .state('content.photos.list',{ url: '/list', templateUrl: 'partials/photos-list.html', controller: "PhotoListController", controllerAs: 'ctrPhotoList' }) .state('content.photos.detail',{ url: '/detail', templateUrl: 'partials/photos-detail.html', controller: 'PhotoDetailController', controllerAs: 'ctrPhotoDetail' }) .state('content.photos.detail.comment',{ url: '/comment', templateUrl: 'partials/photos-detail-comment.html' }) .state('content.about',{ url:'about', views:{ "body@content":{templateUrl: 'partials/about.html'} } }) })