Angularjs中UI Router全攻略_AngularJS_脚本之家

.state('content.home',{url: 'home',views:{"body@content":{templateUrl: 'partials/home.html'}}}) 
$stateProvider.state("home",{views: {"main" : {template: "hi"}}}) 
.state('content',{url: '/',views:{"":{templateUrl: 'partials/content.html'},"header@content":{templateUrl: 'partials/header.html'},}})

点击header对应的页面链接,或然会跳转到别的的子页面现身在

HomePhotosAbout 

photos-detail-comment

app.js state多级嵌套的装置为

var photoGallery = angular.module('photoGallery',["ui.router"]);photoGallery.config(function($stateProvider, $urlRouterProvider){$urlRouterProvider.otherwise;$stateProvider.state('content',{url: '/',views:{"":{templateUrl: 'partials/content.html'},"header@content":{templateUrl: 'partials/header.html'},}}).state('content.home',{url: 'home',views:{"body@content":{templateUrl: 'partials/home.html'}}}).state('content.photos',{url: 'photos',views:{"body@content":{templateUrl: 'partials/photos.html'}}}).state('content.photos.list',{url: '/list',templateUrl: 'partials/photos-list.html'}).state('content.photos.detail',{url: '/detail',templateUrl: 'partials/photos-detail.html'}).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'}}})})

抽象state

如若二个state,未有通过链接找到它,那就足以把这一个state设置为abstract:true,大家把上述的content和content.photos那2个state设置为架空。

.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;

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

谈到底把partials/home.html彰显出来。

动用调控器

在实际上项目中,数据大约从controller中来。

首先在路由中安装state所用到的调节器以至调整器外号。

var photoGallery = angular.module('photoGallery',["ui.router"]);photoGallery.config(function($stateProvider, $urlRouterProvider){$urlRouterProvider.otherwise;$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'}}})})

加多controller.js,该文件用来定义所用到的controller.今后的文书构造为:

asserts/…..css/…..images/……….image1.jpg……….image2.jpg……….image3.jpg……….image4.jpgnode_modules/partials/…..about.html…..home.html…..photos.html…..content.html…..header.html…..photos-list.html…..photo-detail.html…..photos-detail-comment.htmlapp.js

controllers.js

photoGallery.controller('HomeController',['$scope', '$state', function{this.message = 'Welcome to the Photo Gallery';}]);//别名:ctrPhotophotoGallery.controller('PhotoController',['$scope','$state', function{this.photos = [{ id: 0, title: 'Photo 1', description: 'description for photo 1', imageName: 'image1.jpg', comments:[{name: 'user1', comment: 'Nice'},{ name:'User2', comment:'Very good'}]},{ id: 1, title: 'Photo 2', description: 'description for photo 2', imageName: 'image2.jpg', comments:[{ name: 'user2', comment: 'Nice'},{ name:'User1', comment:'Very good'}]},{ id: 2, title: 'Photo 3', description: 'description for photo 3', imageName: 'image3.jpg', comments:[{name: 'user1', comment: 'Nice'}]},{ id: 3, title: 'Photo 4', description: 'description for photo 4', imageName: 'image4.jpg', comments:[{name: 'user1', comment: 'Nice'},{ name:'User2', comment:'Very good'},{ name:'User3', comment:'So so'}]}];//给子state下controller中的photos赋值this.pullData = function(){$scope.$$childTail.ctrPhotoList.photos = this.photos;}}]);//别名:ctrPhotoListphotoGallery.controller('PhotoListController',['$scope','$state', function{this.reading = false;this.photos = new Array();this.init = function(){this.reading = true;setTimeout{$scope.$apply{$scope.ctrPhotoList.getData;}this.getData = function(){//调用父state中controller中的方法$scope.$parent.ctrPhoto.pullData();/*this.photos = $scope.$parent.ctrPhoto.photos;*/this.reading = false;}}]);//别名:ctrPhotoDetailphotoGallery.controller('PhotoDetailController',['$scope', '$state', function; 

如上,通过$scope.$$childTail.ctrPhotoList在父state中的controller中得到子state中的controller;通过$scope.$parent.ctrPhoto在子state中的controller中取得父state中的controller。

photos-list.html

photos-list{{photo.title}}{{photo.description}} 

state间怎么传路由参数

在content.photos.detail这一个state设置接纳二个路由参数。

.state('content.photos.detail',{url: '/detail/:id',templateUrl: 'partials/photos-detail.html',controller: 'PhotoDetailController',controllerAs: 'ctrPhotoDetail'}) 

photos-list.html 送出三个路由参数

photos-list{{photo.title}}{{photo.description}} 

上述,通过把路由参数送出。

controller.js PhotoDetailController调控器通过$stateParams获取路由参数

...//别名:ctrPhotoDetailphotosGallery.controller('PhotoDetailController', ['$scope', '$state', '$stateParams',function($scope, $state, $stateParams){var id = null;this.photo = null;this.init = function(){id = parseInt;this.photo = $scope.ctrPhoto.photos[id];}}]); 

photos-detail.html 从以上的PhotoDetailController中获取数据。

photo-details通过相对路径去子state{{ctrPhotoDetail.photo.title}}{{ctrPhotoDetail.photo.description}}Comments 

state间哪些传字符串参数

.state('content.photos.detail.comment',{url:'/comment?skip&limit',templateUrl: 'partials/photos-detail-comment.html',controller: 'PhotoCommentController',controllerAs: 'ctrPhotoComment'}) 

controllers.js 中期维改革如下

photoGallery.controller('HomeController',['$scope', '$state', function{this.message = 'Welcome to the Photo Gallery';}]);//别名:ctrPhotophotoGallery.controller('PhotoController',['$scope','$state', function{this.photos = [{ id: 0, title: 'Photo 1', description: 'description for photo 1', imageName: 'image1.JPG', comments:[{ name:'User1', comment: 'Nice', imageName: 'man.png'},{ name:'User2', comment:'Very good', imageName: 'man.png'},{ name:'User3', comment:'Nice', imageName: 'woman.png'},{ name:'User4', comment:'Very good', imageName: 'woman.png'},{ name:'User5', comment:'Very good', imageName: 'man.png'},{ name:'User6', comment:'Nice', imageName: 'woman.png'},{ name:'User7', comment:'So so', imageName: 'man.png'}]},{ id: 1, title: 'Photo 2', description: 'description for photo 2', imageName: 'image2.JPG', comments:[{ name:'User1', comment: 'Nice', imageName: 'man.png'},{ name:'User2', comment:'Very good', imageName: 'man.png'},{ name:'User3', comment:'Nice', imageName: 'woman.png'},{ name:'User4', comment:'Very good', imageName: 'woman.png'}]},{ id: 2, title: 'Photo 3', description: 'description for photo 3', imageName: 'image3.JPG', comments:[{ name:'User1', comment: 'Nice', imageName: 'man.png'},{ name:'User2', comment:'Very good', imageName: 'man.png'},{ name:'User3', comment:'Nice', imageName: 'woman.png'},{ name:'User4', comment:'Very good', imageName: 'woman.png'},{ name:'User5', comment:'Very good', imageName: 'man.png'},{ name:'User6', comment:'Nice', imageName: 'woman.png'},{ name:'User7', comment:'So so', imageName: 'man.png'}]},{ id: 3, title: 'Photo 4', description: 'description for photo 4', imageName: 'image4.JPG', comments:[{ name:'User6', comment:'Nice', imageName: 'woman.png'},{ name:'User7', comment:'So so', imageName: 'man.png'}]}];//给子state下controller中的photos赋值this.pullData = function(){$scope.$$childTail.ctrPhotoList.photos = this.photos;}}]);//别名:ctrPhotoListphotoGallery.controller('PhotoListController',['$scope','$state', function{this.reading = false;this.photos = new Array();this.init = function(){this.reading = true;setTimeout{$scope.$apply{$scope.ctrPhotoList.getData;}this.getData = function(){//调用父state中controller中的方法$scope.$parent.ctrPhoto.pullData();/*this.photos = $scope.$parent.ctrPhoto.photos;*/this.reading = false;}}]);//别名:ctrPhotoDetailphotoGallery.controller('PhotoDetailController', ['$scope', '$state', '$stateParams',function($scope, $state, $stateParams){var id = null;this.photo = null;this.init = function(){id = parseInt;this.photo = $scope.ctrPhoto.photos[id];}}]);photoGallery.controller('PhotoCommentController', ['$scope', '$state', '$stateParams',function($scope, $state, $stateParams){var id, skip, limit = null;this.comments = new Array();this.init = function(){id = parseInt;var photo = $scope.ctrPhoto.photos[id];if{skip = parseInt;}else{skip = 0;}if{limit = parseInt;}else{limit = photo.comments.length;}this.comments = photo.comments.slice; 

也等于,$stateParams不仅仅基本上能用路由参数,还是能摄取查询字符串参数。

photo-detail.html 必要把询问字符串参数字传送递出去

photo-details通过相对路径去子state{{ctrPhotoDetail.photo.title}}{{ctrPhotoDetail.photo.description}}Comments 

上述,通过ui-sref=”.comment把询问字符串传递出去。

photos-detail-comment.html

photos-detail-comment{{comment.name}}{{comment.comment}} 

state间怎么传递对象

由此data属性,把三个对象赋值给它。

.state('content',{url: '/',abstract: true,data:{user: "user",password: "1234"},views:{"":{templateUrl: 'partials/content.html'},"header@content":{templateUrl: 'partials/header.html'},}}) 

给header.html加上一个应和的调控器,并提供注销方法。

$stateProvider.state('content',{url: '/',abstract: true,data:{user: "user",password: "1234"},views:{"":{templateUrl: 'partials/content.html'},"header@content":{templateUrl: 'partials/header.html',controller: function($scope, $rootScope, $state){$scope.logoff = function(){$rootScope.user = null;}}}}})

累计三个有关登入页的state

.state('content.login',{url:'login',data:{loginError: 'User or password incorrect.'},views:{"body@content" :{templateUrl: 'partials/login.html',controller: function($scope, $rootScope, $state){$scope.login = function(user, password, valid){if{return;}if($state.current.data.user === user && $state.current.data.password === password){$rootScope.user = {name: $state.current.data.user}// Or Inherited/*$rootScope.user = {name: $state.$current.parent.data.user};*/$state.go; }else{$scope.message = $state.current.data.loginError;}}}}}}) 

增多login.html文书,以往的公文构造为:

asserts/…..css/…..images/……….image1.jpg……….image2.jpg……….image3.jpg……….image4.jpgnode_modules/partials/…..about.html…..home.html…..photos.html…..content.html…..header.html…..photos-list.html…..photo-detail.html…..photos-detail-comment.html…..login.html

header.html 校勘如下

 HomePhotos About   {{user.name}} Sing out   Sing In   

onEnter和onExit事件

.state('content.photos.detail',{url: '/detail/:id',templateUrl: 'partials/photos-detail.html',controller: 'PhotoDetailController',controllerAs: 'ctrPhotoDetail',resolve:{viewing: function{return{photoId: $stateParams.id}}},onEnter: function{var photo = JSON.parse(sessionStorage.getItem;if{photo = {views: 1,viewing: 1}}else{photo.views = photo.views + 1;photo.viewing = photo.viewing + 1;}sessionStorage.setItem(viewing.photoId, JSON.stringify;},onExit: function{var photo = JSON.parse(sessionStorage.getItem;photo.viewing = photo.viewing - 1;sessionStorage.setItem(viewing.photoId, JSON.stringify

在PhotoDetailController中:

photoGallery.controller('PhotoDetailController', ['$scope', '$state', '$stateParams',function($scope, $state, $stateParams){var id = null;this.photo = null;this.viewObj = null;this.init = function(){id = parseInt;this.photo = $scope.ctrPhoto.photos[id];this.viewObj = JSON.parse(sessionStorage.getItem;}}]);

photos-detail.html

photo-details通过相对路径去子stateViews {{ctrPhotoDetail.viewObj.views}}Viewing {{ctrPhotoDetail.viewObj.viewing}}{{ctrPhotoDetail.photo.title}}{{ctrPhotoDetail.photo.description}}Comments 

StateChangeStart事件

controller.js 扩充如下

photoGallery.controller('RootController', ['$scope', '$state', '$rootScope',function($scope, $state, $rootScope){$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){if(toState.data.required && !$rootScope.user){event.preventDefault();$state.go;}]); 

修改content这个state:

.state('content',{url:'/',abstract: true,data:{user: "user",password: "1234"},views:{"":{templateUrl: 'partials/content.html',controller: 'RootController'},"header@content":{templateUrl: 'partials/header.html',controller: function($scope, $rootScope, $state){$scope.logoff = function(){$rootScope.user = null;}}}}})

content.photos.detail这个state

.state('content.photos.detail',{url:'/detail/:id',templateUrl: 'partials/photos-detail.html',controller: 'PhotoDetailController',controllerAs: 'ctrPhotoDetail',data:{required: true},resolve:{viewing: function{return{photoId: $stateParams.id}}},onEnter: function{var photo = JSON.parse(sessionStorage.getItem;if{photo = {views: 1,viewing: 1}}else{photo.views = photo.views + 1;photo.viewing = photo.viewing + 1;}sessionStorage.setItem(viewing.photoId, JSON.stringify;},onExit: function{var photo = JSON.parse(sessionStorage.getItem;photo.viewing = photo.viewing - 1;sessionStorage.setItem(viewing.photoId, JSON.stringify

data:{required: true} 

同理,content.photos.detail.comment这个state

.state('content.photos.detail.comment',{url:'/comment?skip&limit',templateUrl: 'partials/photos-detail-comment.html',controller: 'PhotoCommentController',controllerAs: 'ctrPhotoComment',data:{required: true}}) 

StateNotFound事件

photosGallery.controller('RootController', ['$scope', '$state', '$rootScope',function($scope, $state, $rootScope){$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){if(toState.data.required && !$rootScope.user){event.preventDefault();$state.go;return;} });$rootScope.$on('$stateNotFound', function(event, unfoundState, fromState, fromParams){event.preventDefault();$state.go;});}]); 

.state('content.notfound',{url:'notfound',views: {"body@content": {templateUrl: 'partials/page-not-found.html'} } }) 

page-not-found.html

404 - Sorry! Not found your page. 

StateChangeSuccess事件

photosGallery.controller('RootController', ['$scope', '$state', '$rootScope',function($scope, $state, $rootScope){$rootScope.accessLog = new Array();$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){if(toState.data.required && !$rootScope.user){event.preventDefault();$state.go;return;} });$rootScope.$on('$stateNotFound', function(event, unfoundState, fromState, fromParams){event.preventDefault();$state.go;});$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){$rootScope.accessLog.push({user: $rootScope.user,from: fromState.name,to: toState.name,date: new Date; 

.state('content.log',{url:'log',data:{required: true},views: {"body@content": {templateUrl: 'partials/log.html'} } }) 

 Access Log{{log.user ? log.user.name: 'anonymous'}} in {{log.date | date: 'longDate'}} at {{log.date | date: 'shortTime'}}From: {{log.from}} => to: {{log.to}} 

StateChangeError事件

photosGallery.controller('RootController', ['$scope', '$state', '$rootScope',function($scope, $state, $rootScope){$rootScope.accessLog = new Array();$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){if(toState.data.required && !$rootScope.user){event.preventDefault();$state.go;return;} });$rootScope.$on('$stateNotFound', function(event, unfoundState, fromState, fromParams){event.preventDefault();$state.go;});$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){$rootScope.accessLog.push({user: $rootScope.user,from: fromState.name,to: toState.name,date: new Date;$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){event.preventDefault();$state.go('content.error', {error: error});});}]); 

.state('content.profile', {url:'profile',data:{required: true},resolve:{showError: function(){throw 'Error in code.';}},views:{"body@content": {template: 'Error'}} }).state('content.error',{url:'error/:error',views:{"body@content":{templateUrl: 'partials/error.html',controller: function{$scope.error = {message: $stateParams.error}}}}})

 Sorry! But this message was displayed: {{error.message}}

于是,就找到了content那几个state下views下的 “”:{templateUrl:
‘partials/content.html’}那个键值对,把partials/content.html突显出来。

→ 点击header上的链接

Welcome 

点击

多个view以及state嵌套

index.html 那时候形成了这么

photos-list.html 通过2种门路到相邻页photo-detail.html

var photoGallery = angular.module('photoGallery',["ui.router"]);photoGallery.config(function($stateProvider, $urlRouterProvider){$urlRouterProvider.otherwise;$stateProvider.state('content',{url: '/',views:{"":{templateUrl: 'partials/content.html'},"header@content":{templateUrl: 'partials/header.html'},}}).state('content.home',{url: 'home',views:{"body@content":{templateUrl: 'partials/home.html'}}}).state('content.photos',{url: 'photos',views:{"body@content":{templateUrl: 'partials/photos.html'}}}).state('content.about',{url:'about',views:{"body@content":{templateUrl: 'partials/about.html'}}})}) 

,先加载 “body@content”:{templateUrl: ‘partials/home.html’}

→ 路由看见index.html上的

$stateProvider.state("home",{template: "hi"}) 

$stateProvider.state("home"{views: {"": {template: "hi"}}}) 

photo-detail.html
又提供了赶来其子页面photos-detail-comment.html的ui-view

$urlRouteProvider

看到

这么,页面有了嵌套关系,state也呼应的会有嵌套关系。

若是,以上页面归属一个称谓为parent的state中。

创建state和view

==未有称谓的ui-view

如上通过ui-sref属性实现state之间的跳转。

中去。

此刻,页面是那样显示出来的:

app.js

node_modules/partials/…..about.html…..home.html…..photos.html…..content.html…..header.htmlapp.jsindex.html

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

stateName是string类型stateConfig是object类型//statConfig可以为空对象$stateProvider.state;//state能够有子父级$stateProvider.state;$stateProvider.state//state可以是链式的$stateProvider.state.state.state;

$state.go(to,
[,toParams],[,options]卡塔尔国形参to是string类型,必需,使用”^”或”.”表示绝对路线;形参toParams可空,类型是目的;形参options可空,类型是指标,字段包涵:location为bool类型暗中同意true,inherit为bool类型暗中同意true,
relative为对象暗中同意$state.$current,notify为bool类型默感觉true,
reload为bool类型默以为false

header.html 把原先indext.html中nav部分放到这里来

在现存的文书构造上扩张content.html, header.html,文件布局变为:

,来到:

先是给大家介绍angular-ui-router的基本用法。

angular.module.config(function{$stateProvider.state(stateName, stateCofig);}) 

$state.go

node_modules/partials/…..about.html…..home.html…..photos.htmlapp.jsindex.html

本条任务。当时页面现身了子父关系,而各样页面都归于有些state,那样state间就应际而生了子父关系。那几个跳转的子页面,在路由设置中,也许被称为parent.son1,
parent.son2…那正是state的嵌套。

$stateProvider.state(stateName, stateConfig)

一时,多少个页面上可能有三个ui-view,举个例子:

中去。

state之间的跳转

$state.go$state.go到上一流,比方从photo.detail到photo$state.go到附近state,举例从photo.detail到photo.list$state.go到外甥级state,比如从photo.detail到photo.detial.comment

  • 本人通过相对路线到邻县的state
  • 本身透过绝对路线到相近的state
HomePhotosAbout 

→ 来到home这一个路由

$urlRouteProvider.when$urlRouterProvider.otherwise$urlRouteProvider.rule

state多级嵌套

photos-list
photo-details通过相对路径去子state 
$stateProvider.state("home",{views: {"":{template: "hi"},"data": {template: "data"}}}) 

stateConfig富含的字段:template, templateUrl, templateProvider,
controller, controllerProvider, resolve, url, params, views, abstract,
onEnter, onExit, reloadOnSearch, data

ui-sref

把partials/about.html显示到

怎样援用重视angular-ui-router

抱有state下views下的全部键值对(相近 “body@content”:{templateUrl:
‘partials/photos.html’}卡塔尔(قطر‎都被置于三个键值集结中。而ui-view的职业原理便是依靠自个儿的属性值,到那些键值群集中去找相配的键,找到就把相应的页面展现出来。

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

如上,告诉我们partials/home.html将会被加载到与”body@content”匹配的ui-view中。近来对应的ui-view还尚无现身,于是伺机。

如上,通过Photos来到photos.html的子页面photos-list.html.

→ 分别加载partials/content.html页面上的顺序部分

在photos.html页面筹划加载一个子页面,叫做photos-list.html;与photo-list.html页面相邻的还大概有四个页面,叫做photo-detail.html;在photo-detail.html页面上加载一个子页面,叫做photos-detail-comment.html;

点击Photos,来到:

品类文件布局

var photoGallery = angular.module('photoGallery',["ui.router"]);photoGallery.config(function($stateProvider, $urlRouterProvider){$urlRouterProvider.otherwise;$stateProvider.state('home',{url: '/home',templateUrl: 'partials/home.html'}).state('photos',{url: '/photos',templateUrl: 'partials/photos.html'}).state('about',{url: '/about',templateUrl: 'partials/about.html'})}) 
HomePhotosAbout

app.js 路由今后这么设置

content.html 包罗了多各ui-view,
四个ui-view和页头相关,保持不改变;令贰个ui-view和平议和会议依据页头上的点击突显差异的内容

node_modules/partials/…..about.html…..home.html…..photos.html…..content.html…..header.html…..photos-list.html…..photo-detail.html…..photos-detail-comment.htmlapp.jsindex.html

看到

ui-sref=’stateName’ui-sref=’stateName({param:value, param:value})’

以上,在路由安装中,state名称有content,
content.photos有了那般的一层嵌套。接下来,要得以达成state的千门万户嵌套。

index.html

“header@content”:{templateUrl: ‘partials/header.html’},

把partials/photos.html显示到

==有名称的ui-view

==多个ui-view

,就加载如下:

ui-view

何以达到那些子页面呢?校正header中的相关部分如下:

咱俩通晓在ui-router中,八个state大致是这么设置的:

photos-detail-comment.html 则很简短:

photos.html 加三个容纳子页面包车型的士ui-view

相关文章

发表评论