AngularJS中ui

 

首先是angular-ui-router的基本用法。■ 如何引用依赖angular-ui-router

 

angular.module('app',["ui.router"])  .config(function($stateProvider){    $stateProvider.state(stateName, stateCofig);  })

stateName是string类型//statConfig可以为空对象//state可以有子父级//state可以是链式的stateConfig包含的字段：template, templateUrl, templateProvider, controller, controllerProvider, resolve, url, params, views, abstract, onEnter, onExit, reloadOnSearch, data■ $urlRouteProvider$urlRouteProvider.when(whenPath, toPath)■ $state.go$state.go(to, [,toParams],[,options])$state.go('photos.detail')■ ui-srefui-sref='stateName'■ ui-view==没有名称的ui-view

 

<div ui-view></div>$stateProvider.state("home",{  template: "<h1>hi</h1>"})

node_modules/■ 创建state和viewapp.js

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

■ 多个view以及state嵌套有时候，一个页面上可能有多个ui-view，比如：<div ui-view="header"></div>假设，以上页面属于一个名称为parent的state中。我们知道在ui-router中，一个state大致是这样设置的：

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

在现有的文件结构上增加content.html, header.html,文件结构变为：content.html 包含了多各ui-view, 一个ui-view和页头相关，保持不变；令一个ui-view和会根据页头上的点击呈现不同的内容<div ui-view></div>app.js 路由现在这样设置

 

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

→ 来到home这个路由

 

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

→ 路由看到index.html上的<div ui-view></div>

 

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

→ 分别加载partials/content.html页面上的各个部分看到<div ui-view="header"></div>，就加载如下："header@content":{templateUrl: 'partials/header.html'},点击<a ui-sref="content.photos">Photos</a>，来到：

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

以上，在路由设置中，state名称有content, content.photos有了这样的一层嵌套。接下来，要实现state的多级嵌套。在photos.html页面准备加载一个子页面，叫做photos-list.html；这样，页面有了嵌套关系，state也相应的会有嵌套关系。现在，文件结构变成：node_modules/photos.html 加一个容纳子页面的ui-viewphotos如何到达这个子页面呢？修改header中的相关部分如下：

 

<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="content.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="content.photos.list">Photos</a>    </li>    <li>     <a ui-sref="content.about">About</a>    </li>   </ul>  </div> </div>

photos-list.html 通过2种途径到相邻页photo-detail.html

<h1>photos-list</h1><ul> <li><a ui-sref="^.detail">我通过相对路径到相邻的state</a></li> <li><a ui-sref="content.photos.detail">我通过绝对路径到相邻的state</a></li></ul>

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

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

--会导航到默认路由上$urlRouterProvider.otherwise('home');即

 

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

在实际项目中，数据大多从controller中来。首先在路由中设置state所用到的控制器以及控制器别名。

 

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'}      }    })})

controllers.js

photoGallery.controller('HomeController',['$scope', '$state', function($scope, $state){  this.message = 'Welcome to the Photo Gallery';}]);//别名：ctrPhotophotoGallery.controller('PhotoController',['$scope','$state', function($scope, $state){  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($scope, $state){  this.reading = false;  this.photos = new Array();  this.init = function(){    this.reading = true;    setTimeout(function(){      $scope.$apply(function(){        $scope.ctrPhotoList.getData();      });    }, 1500);  }  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,$state){}]);

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

 

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

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($stateParams.id);      this.photo = $scope.ctrPhoto.photos[id];    }  }]);

在路由中这样设置：

 

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

photo-detail.html 需要把查询字符串参数传递出去

<h1>photo-details</h1><a class="btn btn-default" ui-sref=".comment">通过相对路径去子state</a><a ui-sref="content.photos.list" style="margin-left: 15px;"> <i class="fa fa-arrow-circle-left fa-2x"></i></a><div ng-init="ctrPhotoDetail.init()"> <img class="img-responsive img-rounded" ng-src='/images/loading.gif' data-original="../assets/images/{{ctrPhotoDetail.photo.imageName}}"    style="margin:auto; width: 60%;"> <div class="well well-sm" style="margin:auto; width: 60%; margin-top: 15px;">  <h4>{{ctrPhotoDetail.photo.title}}</h4>  <p>{{ctrPhotoDetail.photo.description}}</p> </div> <div style="margin:auto; width: 80%; margin-bottom: 15px;">  <button style="margin-top: 10px; width:100%;"      class="btn btn-default" ui-sref=".comment({skip:0, limit:2})">Comments</button> </div></div><div ui-view></div>

通过data属性，把一个对象赋值给它。

 

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

asserts/login.html

<form name="form" ng-submit="login(user, password, form.$valid)">  <div class="panel panel-primary" style="width:360px; margin: auto;">    <div class="panel-heading">      <h3 class="panel-title">Indentification</h3>    </div>    <div class="panel-body">      <input name="user" type="text" class="form-control" ng-model="user" placeholder="User ..." required>      <span ng-show="form.user.$error.required && form.user.$dirty" class="label label-danger">Enter the user</span>      <hr>      <input name="password" type="password" class="form-control" ng-model="password" placeholder="Password ..." required>      <span ng-show="form.password.$error.required && form.password.$dirty" class="label label-danger">Enter the password</span>          </div>    <div class="panel-footer">      <button class="btn btn-default" type="submit">Login</button>      <button class="btn btn-default" type="reset">Reset</button>      <span class="label label-danger">{{message}}</span>          </div>    </div></form>

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.login');        }      });  }]);

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：AngularJS中ui

关键词：JS