<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>angularRouter</title></head><body> <!--1:--> <div ng-app="mymodule"> <!--通过ui-view属性指定路由模板的填充地点--> <div ui-view></div> </div>
<!--2:-->
<div ng-app="mymodule2"> <a href="" ui-sref="main">The first page </a> <a href="#/list">The page of list </a> </div> <!--3:--> <div ng-app="mymodule3"> <div ui-sref="index">The first page</div> <div ui-sref="list">The page of list</div> <div ui-view></div> </div> <!--4:--> <div ng-app="mymodule4" ng-controller="ctrl4"> <a href="" ui-sref="main">The first page </a> <a href="#/list">The page of list </a> <div ui-view></div> </div> <!--5:--> <div ng-app="mymodule5" ng-controller="ctrl5"> <a href="" ui-sref="main">The first page </a> <a href="" ui-sref='list'>The page of list </a> <div ui-view></div> </div> <!--6:--> <div ng-app="mymodule6" ng-controller="ctrl6"> <a href="" ui-sref="main">The first page </a> <a href="" ui-sref='list'>The page of list </a> <div ui-view></div> </div> <script src="http://cdn.bootcss.com/angular-ui-router/0.4.2/angular-ui-router.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script> <script type="text/javascript"> /*Angular.js之Router: 1:uiRouter默认路由规则操作;路由一定是在控制器之上定义！a:继承ui.router模块；b:配置路由规则，依赖注入：$stateProvider/$urlRouterProvider两个服务；c：指定ui-view位置，确定路由模板显示位置 2:uiRouter链接上实现路由跳转方式：a：在a链接的href中指定路由规则中定义的url地址。b：在ui-sref属性中指定路由规则中定义的规则名称 3:uiRouter路由模板设置方式 4:uiRouter路由控制器使用方式：可以在路由中定义控制器controller，也可以在外部定义好，将controller属性定义为外部控制器的名称即可。 5:uiRouter路由控制器或指令中执行路由跳转，借助$state服务的go方法，只需将要跳转的路由名称传入该方法即可 6:uiRouter路由参数设置和$stateParams服务的使用，获取路由地址中的参数值，需要借助$stateParams服务，步骤：->路由地址中指定接收的参数->模板URL地址生成时，传入参数值->通过$stateParams服务获取参数值 7:uiRouter路由定义高效的父子嵌套路由：两种方式：第一种给路由名称添加命名空间，第二种给路由添加parent属性；模板中也需要指定ui-view，用来显示子视图 8:uiRouter路由定义超灵活的嵌套路由：给每个ui-view设置一个名称，当发生跳转时，给所有的ui-view都指定显示的模板， 9:uirouter路由多个view下的父子级视图嵌套使用：@符号指向父级ui-view视图标签；son@main：指定的是main视图下的son子视图*/ /*1:uiRouter默认路由规则操作;路由一定是在控制器之上定义！a:继承ui.router模块；b:配置路由规则，依赖注入：$stateProvider/$urlRouterProvider两个服务；c：指定ui-view位置，确定路由模板显示位置*/ let mymodule=angular.module('mymodule',['ui.router']); //配置路由规则 mymodule.config(['$stateProvider','$urlRouterProvider',function($state,$urlRouter){ //定义路由规则 $state.state('default',{ url:'', template:'<h1>welcome to puDong store !</h1>' }); $urlRouter.otherwise(''); }]);
/*2:uiRouter链接上实现路由跳转方式：a：在a链接的href中指定路由规则中定义的url地址。b：在ui-sref属性中指定路由规则中定义的规则名称*/
//继承ui.router let mymodule2=angular.module('mymodule2',['ui.router']); //配置路由规则 mymodule2.config(['$stateProvider','$urlRouterProvider',function($state,$urlRouter){ //定义路由规则 $state.state('default',{ url:'', template:'<h1>welcome to puDong store !</h1>' }).state('main',{ url:'/index', template:'<h2>This is a main page !</h2>' }).state('list',{ url:'/list', template:'<h2>This is a page of list !</h2>' }); $urlRouter.otherwise(''); }]);/*3:uiRouter路由模板设置方式*/
var mymodule3=angular.module('module3',['ui.router']); mymodule3.config(['$stateProvider','urlRouterProvider',function($state,$urlRouter){ $state.state('default',{ url:'', template:'<h1>welcome to puDong store !</h1>' }).state('index',{ url:'/index', template:'' }).state('list',{ url:'/list', template:'<h2>This is a page of list !</h2>' }); $urlRouter.otherwise(''); }]);/*4:uiRouter路由控制器使用方式：可以在路由中定义控制器controller，也可以在外部定义好，将controller属性定义为外部控制器的名称即可。*/
var mymodule4=angular.module('module4',['ui-router']); mymodule4.config(['$stateProvider','urlRouterProvider',function($state,$urlRouter){ $state.state('default',{ url:'', template:'<h1>welcome to puDong store !</h1>' }).state('index',{ url:'/index', templateUrl:'router4.html', /*controller:['$scope',function($scope){ $scope.title='puDong store'; }]*/ controller:'ctrl4' }).state('list',{ url:'/list', template:'<h2>This is a page of list !</h2>' }); $urlRouter.otherwise(''); }]); mymodule4.controller('ctrl4',['$scope',function($scope){ $scope.title='puDong store'; }])
/*5:uiRouter路由控制器或指令中执行路由跳转，借助$state服务的go方法，只需将要跳转的路由名称传入该方法即可*/
var mymodule5=angular.module('module5',['ui-router']); mymodule5.config(['$stateProvider','urlRouterProvider',function($state,$urlRouter){ $state.state('default',{ url:'', template:'<h1>welcome to puDong store !</h1>' }).state('index',{ url:'/index', templateUrl:'router5.html', controller:'ctrl5' }).state('list',{ url:'/list', template:'<h2>This is a page of list !</h2>' }); $urlRouter.otherwise(''); }]); mymodule5.controller('ctrl5',['$scope','$state',function($scope,$state){ $scope.go=function(){ $state.go('list'); } }]) /*6:uiRouter路由参数设置和$stateParams服务的使用，获取路由地址中的参数值，需要借助$stateParams服务，步骤：->路由地址中指定接收的参数->模板URL地址生成时，传入参数值->通过$stateParams服务获取参数值*/ var mymodule6=angular.module('module6',['ui-router']); mymodule6.config(['$stateProvider','urlRouterProvider',function($state,$urlRouter){ $state.state('default',{ url:'', template:'router6.html', controller:'ctrl6' }).state('list',{ url:'/list/{id}', template:'<p>UserName:{ {user.name}}</p>', controller:'ctrl6' }); $urlRouter.otherwise('/list'); }]); mymodule6.controller('ctrl6',['$scope','$http','$stateParams',function($scope,$http,$stateParams){ $http({ method:'get', url:'http://localhost/ajax.php', cache:true, }).then(function(res){ $scope.data=res.data; let id=$stateParams.id; if(id){ $scope.data.forEach(function(v){ if(v.id==id) $scope.user=v; }); } }); }]); </script></body></html>