<!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>

Angular.js之Router学习笔记的更多相关文章

  1. 关于Angular.js Routing 的学习笔记(实现单页应用)

    最近开始学习angular.js,发现angular.js确实很方便,也很强大.在看到 AngularJS Routing and Multiple Views 这一部分的时候,有点乱.现在通过记录一 ...

  2. Angular.js之指令学习笔记

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  3. 【09-23】js原型继承学习笔记

    js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...

  4. Underscore.js 源码学习笔记（下）

    上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...

  5. Underscore.js 源码学习笔记（上）

    版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}());  这样的东西,我们应该知道这是一个 IIFE(立即执行 ...

  6. 浏览器中js执行机制学习笔记

    浏览器中js执行机制学习笔记 RiverSouthMan关注 0.0772019.05.15 20:56:37字数 872阅读 291 同步任务 当一个脚本第一次执行的时候,js引擎会解析这段代码,并 ...

  7. 纯JS实现KeyboardNav(学习笔记)一

    纯JS实现KeyboardNav(学习笔记)一 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 GitHub项目源码 预览地址 最终效果 KeyboardNav使用指南 ...

  8. 纯JS实现KeyboardNav(学习笔记)二

    纯JS实现KeyboardNav(学习笔记)二 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码 ...

  9. Angular.js 以及个人学习网站

    Angular.js  教程 http://www.360doc.com/content/14/0414/15/14416931_368816305.shtml web前端学习: 慕课网:http:/ ...

随机推荐

  1. 今日头条视频Url嗅探

    1.打开http://toutiao.com/a6309254755004875010/,查看网页源代码获取videoid = 0425d8f0c2bb425d9361c0eb2eeb4f16 2.拼 ...

  2. JAVA控制台输入输出方法总结

    java的控制台输入输出有很多方法,此文分别对其进行介绍. 1.控制台的输入 关于控制台的输入主要介绍三种方法,第一种方法使用BufferedReader获得控制台输入的数据,此方法是传统的输入方法, ...

  3. iOS 之 设置控件在视图中心位置

    _qrImgView.bounds = CGRectMake(0, 0, sizeImg, sizeImg); _qrImgView.center = CGPointMake(CGRectGetWid ...

  4. JWPlayer支持SD/HD

    First, we have to render two versions of our video: an SD (standard definition) and HD (high definit ...

  5. Spring context:component-scan中使用context:include-filter和context:exclude-filter

    Spring context:component-scan中使用context:include-filter和context:exclude-filter XML: <?xml version= ...

  6. 用ant打包可运行的jar文件 （将第三方jar包放进你自己的jar包）

    http://blog.csdn.net/caiqcong/article/details/7618582 <span style="font-family:SimSun;font-s ...

  7. php知识点总结（一）

    1.把数组以表格的形式显示 <?php $array = array( '书籍' =>  array( '生活',  '人与自然','动物世界'), '体育用品' =>  array ...

  8. POJ1221(整数划分)

    UNIMODAL PALINDROMIC DECOMPOSITIONS Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 543 ...

  9. 在Oracle中数据库、表空间、表之间的关系

    在oracle中,表空间是存储概念上的,建立表空间需要有对应的数据文件,数据文件建立好之后直接会把一定的磁盘空间分配给它,这样可以对数据库的存储空间进行有效的管理.然后在建表的时候指定对应的表空间,该 ...

  10. 使用PHP的strstr()函数来统计一段字符串中元音字母的个数(区分大小写)

    <?php/**练习:统计一段字符串中所有元音字母的个数(区分大小写)*/$str='This is a test file.'; //原始字符串echo $str.'<br>'; ...