angular.js之ui.router篇

AngularJS 路由可以通过不同的 URL 访问不同的内容，实现多视图页面的跳转。

在使用ui-router路由之前一定要先载入下面两个文件

 <script type="text/javascript" src="angular-ui-router.min.js"></script>
 <script type="text/javascript" src="jquery.min.js"></script>

1，路由使用分析，默认路由和路由规则

var m=angular.module('la',['ui.router']);//定义模块时依赖注入ui.router模块m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){//注入两个路由服务//默认路由$urlRouterProvider.otherwise('/my');//路由规则$stateProvider.state('default',{//default为路由规则名，ui-sref=""中用路由规则名，href中用路由地址url:'/my',//路由的地址template:'<h1>这个美丽的世界</h1>'//此路由下的内容，这里也可以用templateUrl载入一个内容文件}).state('home',{url:'/home',template:'<h1>首页</h1>'}).state('second',{url:'/second',tempalte:'<h1>第二页</h1>'}).state('three',{url:'/three',template:'<h1>第三页</h1>'});}]);

html部分

<div ng-view>您访问的页面不存在!</div><!--加载默认的路由，当找不到默认路由的时候显示里面的内容--><ul>    <li><a href="" ui-sref="home">首页</a></li><!--当点击这个链接的时候便会跳转到指定路由地址显示其内容-->    <li><a href="" ui-sref="second">第二页</a></li>    <li><a href="" ui-sref="three">第三页</a></li> </ul>

2.路由中使用控制器的两种方式

    1）直接在路由规则中定义控制器模块

var m=angular.module('la',['ui.router']);m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$ulrRouterProvider){//默认路由$urlRouterProvider.otherwise('');//路由规则$stateProvider.state('default',{url:'',templateUrl:'1.html',controller:['$scope',function($scope){//路由中定义控制器$scope.name='张三';}],});}]);

      1.html部分

<div>我的名字是：{{name}}</div>

      2）外部定义控制器，路由规则中调用

var m=angular.module('la',['ui.router']);m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$ulrRouterProvider){//默认路由$urlRouterProvider.otherwise('');//路由规则$stateProvider.state('default',{url:'',templateUrl:'1.html',controller:'ctrl',//调用外部定义的控制器});}]);m.controller('ctrl',['$scope',function(){$scope.name="张三";}]);

3.$state服务ui路由控制器中执行路由跳转 

var m=angular.module('la',['ui.router']);m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){//默认路由$urlRouterProvider.otherwise('/home');//路由规则$stateProvider.state('home',{url:'/home',templateUrl:'1.html',}).state('game',{url:'/game',template:'<h1>游戏</h1>'});m.controller('ctrl',['$scope','$state',function($scope,$state){$scope.go=function(url){$state.go(url);//在页面点击链接时执行此函数实现传入参数的跳转}}]);

   html部分

   <div ng-view></div>
   <li>
<a href="" ng-click="go('/game')">跳转</a>
   </li> 

4.路由参数的设置和$stateParams服务接收参数
var m=angular.module('la',['ui.router']);m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$ulrRouterProvider){//默认路由$urlRouterProvider.otherwise('/home');//路由规则$stateProvider.state('home',{url:'/home',templateUrl:'1.html',controller:'ctrl',}).state('user',{url:'/user/{id}',//在链接中传递参数template:'<h1>用户详情{{user.name}}</h1>',controler:'ctrl',});}]);m.controller('ctrl',['$scope','$stateParams',function($scope,$stateParams){$scope.user=[{id:1,name:'张三'},{id:2,name:'李四'}];id=$stateParams.id; //控制器中通过此服务获取参数if(id){//只有在页面中点击a标签之后跳转路由才有此参数for(var i=0;i<$scope.user.length;i++){if(id==$scope.user[i].id){$scope.user=$scope.user[i];}}}}]);
     1.html部分，
<li ng-repeat="v in user">  <a href="" ui-sref="user({id:v.id})">{{v.name}}</a></li>
//遍历控制器中的数据，每一个超链接标签内容为数据名，当点击之后跳转到第二个路由，并且传递参数，在路由名之后带括号传递参数

5.uiRouter路由定义高效的父子级嵌套路由，嵌套跳转到子级路由时父级路由内容不消失
 两种方法：第一种在定义路由名时指明是父级路由名下的路由，第二种是在state属性对象里面指明其父级路由
var m=angular.module('la',['ui.router']);m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){//默认路由$urlRouterProvider.otherwise('/home');//路由规则$stateProvider.state('home',{url:'/home',templateUrl:'1.html',}).state('home.news',{//定义路由规则名时指明其父级路由url:'news',template:'<h1>新闻</h1>',}).state('game',{url:'/game',parent:'home',//属性里面指明其父级路由template:'<h1>游戏</h1>'}).state('login',{url:'/login',template:'<h1>登录</h1>'});}])
    1.html是其默认加载的父级路由内容，在父级路由内容中必须指明加载子级路由的地方
<div ng-view></div>

6.通过view属性定义超灵活的嵌套路由,
var m=angular.modlue('la',['ui.router']);m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){//默认路由$urlRouterProvider.otherwise('/my');//路由规则$stateProvuder.state('my'{url:'/my',views:{//view可以定义多个视图内容，在html的不同区块中加载top:{templateUrl:'view/top.html',},left:{templateUrl:'view/my.html',},right:{templateUrl:'view/about.html'}}}).state('video',{views:{top:{templateUrl:'view/top.html',},left:{templateUrl:'view/video.html',},right:{templateUrl:'view/about.html',}}});}]);
       html部分
        <div ng-app="la"><div ng-view="top"></div><!--加载默认路由中的view下的top内容--><div ng-view="left"></div><div ng-view="right"></div></div>
         top.html示例
<a href="" ui-sref="my">我的</a><a href="" ui-sref="video">视频</a><!--点击视频时会跳转到第二个video路由规则-->
         my.html
<a href="">我的姓名</a><a href="">用户信息</a>
         about.html
<a href="">关于</a><a href="">帮助</a>

7.ui.router路由view下的父子级嵌套
var m=angular.module('la',['ui.router']);m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){//默认路由$urlRouterProvider.otherwise('/my');//路由规则$stateProvider.state('my',{url:'/my',view:{'@':{templateUrl:'video/my.html',},'content':{template:'欢迎来到此'}}.state('my.video',{url:'/video',view:{'son@my':{templateUrl:'view/video.html',},'content@':{template:'',}}})})}])


注：当为指明具体的html部分时直接加载默认的路由即可