AngularJS 路由
来源:互联网 发布:ubuntu wifi掉线 编辑:程序博客网 时间:2024/05/01 02:19
1.简介
AngularJS 路由机制是由ngRoute模块提供,它允许我们将视图分解成布局和模板视图,根据url变化动态的将模板视图加载到布局中,从而实现单页面应用的页面跳转功能。
2.AngularJS中的url
在单页WEB应用的url中添加了#号,#号代表着网页的一个位置 ,其右边的所有内容,就是用来标示该位置的标识符。#号及后面的内容称为url中的hash片段,它们都不会发送到服务端,下面三个url,向服务端请求的地址都是一样的。如果只改变#号后面的内容,刷新不会导致网页的重载。
- https://www.baidu.com/
- https://www.baidu.com/#123
- https://www.baidu.com/#123/456
3.路由使用
1)引入文件并注入依赖
由于从1.2版本开始,AngularJS已经将ngRoutes从核心代码中剥离出来成为独立的模块。因此我们需要安装并在模块声明中注入对ngRoute的依赖,才能在AngularJS应用中正常地使用路由功能。
<script src="angular-route.min.js"></script>var app = angular.module("myApp",['ngRoute']);
2) 创建一个布局模板
之所以要创建布局模板,是为了告诉AngularJS应该将布局渲染到何处。通过ng-view指令,我们可以精确的指定模板视图在DOM中的渲染位置。
<div ng-app="myApp"> <a ng-href="#/music">音乐</a> <a ng-href="#/movie">电影</a> <a ng-href="#/novel">小说</a> <a ng-href="#/other">其他</a> <div ng-view></div></div>
3) 创建一些模板视图
myMusic.html
<p>这里是音乐界面啦</p>
myMovie.html
<p>这里是电影界面啦</p>
myNovel.html
<p>这里是小说界面啦</p>
home.html
<p>我是首页界面</p>
4)定义路由表
app.config(['$routeProvider',function($routeProvide) { $routeProvide .when('/',{templateUrl:"home.html"}) .when('/music',{templateUrl:"myMusic.html"}) .when('/movie',{templateUrl:"myMovie.html"}) .when('/novel',{templateUrl:"myNovel.html"}) .otherwise({redirectTo:'/'});}]);
4.深入
1)涉及到的服务与指令
- $routeProvider 用来定义路由表,我们会用到里面的when和otherwise两个方法。
- $routeParams 用来保存地址栏中的参数,也提供了通配某类地址的能力。
- $location 用来分析处理url。
- $ng-view 用来指定加载模板视图的区域。
2)$location.path()详解
如果没有参数,返回当前路径,即#号后的内容;也可以传入字符串,将当前路径修改为字符串的内容,并触发路由变化。
假设当前url:http://localhost:63342/RouteDemo/index.html#/
//返回'/'$location.path(); //将当前url修改为:http://localhost:63342/RouteDemo/index.html#/music$locaiton.path('/music'); //返回'/music'$locaiton.path();
3)when及otherwise详解
when方法能够接收两个参数,第一个参数是路由路径,这个路径会与$location.path()的值进行匹配,如果没有任何一个when方法匹配到,那么将会执行otherwise方法。第二个参数是配置对象,它的六个属性分别是controller,template,templateUrl,resolve,redirectTo,reloadOnSearch。
- controller
该属性值可以是一个字符串,也可以是一个函数。如果是字符型,则会搜索相应的控制器,如果是函数,那么该函数代表控制器(可以用controllerAs为控制器命名或起别名)。控制器会与路由所创建的作用域关联在一起,并且转到该路径时都会执行一次控制器中的内容。
//每次路径变为/music触发路由变化时都会执行一次控制器中的内容app.config(['$routeProvider',function($routeProvide) { $routeProvide.when('/music'{templateUrl:"myMusic.html",controller:"myController"}) }]);app.controller('myController',function($scope) { console.log("123");});
- controllerAs
给controller属性值代表的控制器起个别名,以便之后引用。 - template
值是一个字符串,代表一个Html模板,AngularJS会拿该模板来渲染。 - templateUrl
值是一个字符串,代表一个存着Html模板的路径,AngularJS会拿该路径下的Html模板来渲染。 - resolve
值是一个对象,该对象属性名是可以注入到控制器的依赖,属性值可包含下列内容。
只有当resolve对象里所有promise对象执行完毕后才会注入到控制器,此时才会发生路由变化,因此可以解决页面闪烁问题(加载页面后才获取到数据去更新视图)。我们来看看对比,下面这个例子控制器注入的a是自定义的myService服务,注入的b则是从服务器端获取到的数据。
test.html代码如下。
<p>我是测试界面 {{ name }}</p><div ng-repeat="name in list">{{ name }}</div>
index.html代码如下。
<body ng-app="myApp"> <div ng-app="myApp"> <a ng-href="#/test">测试</a> <div ng-view></div> </div> <script> var app = angular.module("myApp",['ngRoute']); app.value("myService","张三"); app.config(['$routeProvider',function($routeProvide) { $routeProvide .when('/test',{templateUrl:"test.html", controller:function($scope,a,b) { $scope.name = "你好"+a; $scope.list = b.data; }, resolve:{ a:"myService", b:function($http,$timeout) { var promise = $timeout(function() { return $http.get("http://localhost:3000/person");},3000); return promise; } }}); }]); </script></body>
如果直接在控制器而不是resolve中请求,则index.html代码如下。
<body ng-app="myApp"> <div ng-app="myApp"> <a ng-href="#/test">测试</a> <div ng-view></div> </div> <script> var app = angular.module("myApp",['ngRoute']); app.value("myService","张三"); app.config(['$routeProvider',function($routeProvide) { $routeProvide .when('/test',{templateUrl:"test.html", controller:function($scope,$http,$timeout,a) { $scope.name = "你好"+a; var promise = $timeout(function() { return $http.get("http://localhost:3000/person"); },3000); promise.then(function(response) { $scope.list = response.data; }); }, resolve:{ a:"myService" }}); }]); </script></body>
两者效果如下,可以看到写在控制器中的代码不仅需要自己处理逻辑(控制器不推荐写太复杂的逻辑)从promise的success function中取得repsonse参数,而且页面加载不一致,服务器获取的数据在获得后才加载,而在resolve中写,只有等promise执行完毕后才会跳转,然后同步加载整个页面。
- redirectTo
值是一个字符串或一个函数,该属性写在otherwise中,代表着在when中找不到相应路径时的重定向。如果是字符串,路径会被替换成该值,如果是函数,它有三个参数,第一个是当前路径的路由参数,第二个是当前路径,第三个当前Url的查询串,路径会被替换成该函数的返回值,替换后都会触发路由变化。
- reloadOnSearch
值是一个布尔值,为true的时候$location.search()发生变化时就会重新加载路由,location.search是从当前URL的?号开始(包括?号)的字符串。
4)$routeParams
我们可以在路由参数的前面加上:号,AngularJS会把它解析出来并传递给$routeParams。
下面的例子中我们将123456传给value,AngularJS把其解析出来,在$routeParams中添加一个名为value的键,值为123456,我们可以将该服务注入到控制器中使用。
test.html代码如下。
<p>我是测试界面 {{ display }}</p>
index.html代码如下。
<body ng-app="myApp"> <div ng-app="myApp"> <a ng-href="#/test/123456">测试</a> <div ng-view></div> </div> <script> var app = angular.module("myApp",['ngRoute']); app.config(['$routeProvider',function($routeProvide) { $routeProvide .when('/test/:value',{templateUrl:"test.html", controller:function($scope,$routeParams) { $scope.display = $routeParams.value; }}); }]); </script></body>
5)路由事件
$route服务在路由过程中的每个阶段都会触发不同的事件,可以为这些事件设置监听器并做出响应。路由事件都是系统自动从$rootScope广播下去的,我们最好的做法是在$rootScope中监听,而最佳设置的地方就是run方法,可以保证不会漏掉任何路由变化。
下面是四种不同的路由事件。
- $routeChangeStart
AngularJS在路由改变之前就会广播此事件,在广播后,路由会开始加载路由变化所需要的所有依赖,并且模板和resolve键中的promise都会被resolve。 - $routeChangeSuccess
在路由的依赖加载,且resolve键中所有promise都resolve了就会广播此事件。 - $routeChangeError
在resolve键中任何一个promise被拒绝或者失败后会广播此事件,也就是说,此事件与$routeChangeSuccess互斥。 $routeUpdate
在reloadOnSearch属性设置为false的情况下,重新使用某个控制器的实例会广播该事件。下面一个例子演示了服务器开启和未开启时的各个事件发生的顺序。
<body ng-app="myApp"> <div ng-app="myApp"> <a ng-href="#/test">测试</a> <div ng-view></div> </div> <script> var app = angular.module("myApp",['ngRoute']); app.config(['$routeProvider',function($routeProvide) { $routeProvide .when('/test',{templateUrl:"test.html", controller:function() { console.log("controller"); }, resolve:{ myData:function($http,$timeout) { var promise = $timeout(function() { return $http.get("http://localhost:3000/person"); },3000); console.log("resolve"); return promise; } } }); }]); app.run(function($rootScope,$location) { $rootScope.$on('$routeChangeStart',function() { console.log("$routeChangeStart"); }); $rootScope.$on('$routeChangeSuccess',function() { console.log("$routeChangeSuccess"); }); $rootScope.$on('$routeChangeError',function() { console.log("$routeChangeError"); }); $rootScope.$on('$routeUpdate',function() { console.log("$routeUpdate"); }); }); </script></body>
- Angularjs路由
- AngularJS-路由
- AngularJS 路由
- AngularJS 路由
- AngularJS路由
- angularjs路由
- angularJS路由
- Angularjs 路由
- angularjs-路由
- AngularJS 路由
- AngularJS-路由
- angularjs---------路由
- AngularJS 路由
- AngularJs路由
- AngularJS 路由
- AngularJS 路由
- angularjs路由
- angularjs 路由
- ImageView充满屏幕
- Android酷炫实用的开源框架(UI框架)
- Docker从零单排系列之基础篇(一)
- 我对广播的一下理解
- Mybatis中运用小技巧(三)存储过程的运用
- AngularJS 路由
- Android序列化
- 前端开发中的js调试技巧
- MFC——ComBox用法大全
- java 解释器与JIT编译器
- scala List集合的用法
- 快速熟悉项目代码(转)
- EasyUI为combobox下拉框后扩展操作按钮
- ubuntu下安装jdk