Angular.js之Router学习笔记
<!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学习笔记的更多相关文章
- 关于Angular.js Routing 的学习笔记(实现单页应用)
最近开始学习angular.js,发现angular.js确实很方便,也很强大.在看到 AngularJS Routing and Multiple Views 这一部分的时候,有点乱.现在通过记录一 ...
- Angular.js之指令学习笔记
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 【09-23】js原型继承学习笔记
js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...
- Underscore.js 源码学习笔记（下）
上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...
- Underscore.js 源码学习笔记（上）
版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}()); 这样的东西,我们应该知道这是一个 IIFE(立即执行 ...
- 浏览器中js执行机制学习笔记
浏览器中js执行机制学习笔记 RiverSouthMan关注 0.0772019.05.15 20:56:37字数 872阅读 291 同步任务 当一个脚本第一次执行的时候,js引擎会解析这段代码,并 ...
- 纯JS实现KeyboardNav(学习笔记)一
纯JS实现KeyboardNav(学习笔记)一 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 GitHub项目源码 预览地址 最终效果 KeyboardNav使用指南 ...
- 纯JS实现KeyboardNav(学习笔记)二
纯JS实现KeyboardNav(学习笔记)二 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码 ...
- Angular.js 以及个人学习网站
Angular.js 教程 http://www.360doc.com/content/14/0414/15/14416931_368816305.shtml web前端学习: 慕课网:http:/ ...
随机推荐
- centos 6.5中安装hadoop2.2
1.配置集群机器之间ssh免密码登录 (1) ssh-keygen -t dsa -P '' -f ~/.ssh/id_dsa 将id_dsa.pub 公钥 加入授权的key中去 这条命令的功能是把公 ...
- 2. 托管对象数据模型的基本知识（Core Data 应用程序实践指南）
第一章的例子配置好了持久化存储区.持久化存储协调器.托管对象上下文.但是还没有对象图,本章要介绍托管对象模型的基础知识,并配置范例程序的对象图. 2.1. 托管对象模型是什么 托管对象模型是一种数据结 ...
- oc是一个全动态语言，oc的一切都是基于runtime实现的！
oc是一个全动态语言,oc的一切都是基于runtime实现的! 从以下三方面来理解runtime吧! 1. 传统的面向过程的语言开发,例如c语言.实现c语言编译器很简单,只要按照语法规则实现一个LAL ...
- delphi edit编辑框使用
Delphi编辑框Edit的用法 http://wenku.baidu.com/link?url=oKKm0VFBXexqiWt9ZNB8WxFGzwjJqRBM3ohrAy6GSMmOmwIzSWP ...
- win8解决“telnet不是内部或外部命令”问题
http://jingyan.baidu.com/article/870c6fc330c18ab03ee4be4f.html 打开“控制面板”里的“程序”选项. 点击“程序和功能”下的“启用或关闭wi ...
- Beanstalkd使用
Beanstalkd,一个高性能.轻量级的分布式内存队列系统,最初设计的目的是想通过后台异步执行耗时的任务来降低高容量Web应用系统的页面访问延迟,支持过有9.5 million用户的Facebook ...
- MyBatis动态SQL与模糊查询
sqlxml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC & ...
- Flex组件的生命周期
组件实例化生命周期描述了用组件类创建组件对象时所发生的一系列步骤,作为生命周期的一部分,flex自动调用组件的的方法,发出事件,并使组件可见. 下面例子用as创建一个btn控件,并将其加入容器中 va ...
- JSP获取绝对物理地址
session.getServletContext().getRealPath(""); 但是 getRealPath("a"+File.separator); ...
- 关于redis的主从、哨兵、集群
关于redis主从.哨兵.集群的介绍网上很多,这里就不赘述了. 一.主从 通过持久化功能,Redis保证了即使在服务器重启的情况下也不会损失(或少量损失)数据,因为持久化会把内存中数据保存到硬盘上,重 ...