AngularJS 路由
本章节将为大家介绍 AngularJS 路由。
AngularJS 路由允许通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页 Web 应用(single page web application,SPA)。
通常的 URL 形式为 http://facesoho.com/first/page,但在单页 Web 应用中 AngularJS 通过 #! + 标记 实现,例如:
http://facesoho.com/#!/first http://facesoho.com/#!/second http://facesoho.com/#!/third
注意 Angular1.6 之前的版本是通过 # + 标记 实现路由。
当点击以上的任意一个链接时,向服务端请的地址都是一样的 (http://facesoho.com/)。 因为 #! 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以就需要在客户端实现 #! 号后面内容的功能实现。 AngularJS 路由就通过 #! + 标记 帮助区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。
在以上图形中,可以看到创建了两个 URL: /ShowOrders 和 /AddNewOrder。每个 URL 都有对应的视图和控制器。
接下来来看一个简单的实例:
AngularJS 实例
尝试一下 »
实例解析:
1、载入了实现路由的 js 文件:angular-route.js。
2、包含了 ngRoute 模块作为主应用模块的依赖模块。
angular.module('routingDemoApp',['ngRoute'])
3、使用 ngView 指令。
<div ng-view></div>
该 div 内的 HTML 内容会根据路由的变化而变化。
4、配置 $routeProvider,AngularJS $routeProvider 用来定义路由规则。
module.config(['$routeProvider', function($routeProvider){ $routeProvider .when('/',{template:'这是首页页面'}) .when('/computers',{template:'这是电脑分类页面'}) .when('/printers',{template:'这是打印机页面'}) .otherwise({redirectTo:'/'}); }]);
AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI,请求把$routeProvider注入到的配置函数并且使用$routeProvider.whenAPI来定义的路由规则。
$routeProvider 为提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由,函数包含两个参数:
- 第一个参数是 URL 或者 URL 正则规则。
- 第二个参数是路由配置对象。
路由设置对象
AngularJS 路由也可以通过不同的模板来实现。
$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则,第二个参数为路由配置对象。路由配置对象语法规则如下:
$routeProvider.when(url, { template: string, templateUrl: string, controller: string, function 或 array, controllerAs: string, redirectTo: string, function, resolve: object<key, function> });
参数说明:
template:
如果只需要在 ng-view 中插入简单的 HTML 内容,则使用该参数:
.when('/computers',{template:'这是电脑分类页面'})
templateUrl:
如果只需要在 ng-view 中插入 HTML 模板文件,则使用该参数:
$routeProvider.when('/computers', { templateUrl: 'views/computers.html', });
以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。
controller:
function、string或数组类型,在当前模板上执行的controller函数,生成新的scope。
controllerAs:
string类型,为controller指定别名。
redirectTo:
重定向的地址。
resolve:
指定当前controller所依赖的其他模块。
实例
AngularJS 实例
尝试一下 »
大王叫我来巡山1998
angular的config和run分别是干什么的
1 背景介绍
ANGULARJS模块加载
AngularJS模块可以在被加载和执行之前对其自身进行配置 可以在应用的加载阶段应用不同的逻辑组对其修改
在模块加载阶段 AngularJS会在提供者(provide)注册和配置的过程中对模块进行配置
在整个AngularJS的工作流中 这个阶段是唯一能够在应用启动前对其进行修改的部分
AngularJS的工作流包括了 配置块 config 和 运行块 run 并且在编译期间会执行
2 知识剖析
配置 config
通过config方法实现对模块的配置 AngularJS中的服务多数都对应一个provider
用来执行与对应服务相同的功能或对其配置 比如$log $http $location都是内置服务
相对应的“provider”分别是$logProvider $httpProvider $locationPorvider
//新建了一个模板:这个模板中有一个服务 一个自定义指令
var app = angular module("myApp" []);
app fatory('myFactory' function () {//利用工厂生产 创建一个 服务
var service = {};
return service;
});
app directive('myDirectiive' function () {//创建 一个 自定义指令
return {template: '<div><button>戳我!</button></div>' }
});
// angularJS编译的流程是这样的:
var app = angular module('myApp' []);
app config(function ($provide $compileProvider) {
$provide factory('myFactory' function () {
var service = {};
return service;
});
$compileProvider directive('myDiretive' function () {
return {template: '<div><button>click me</button></div>'}
});
});
// PS:angularJS会根据你定义的函数顺序来执行他们
2 2 运行块 run
和配置块不同 运行块在注入器创建之后被执行 它是所有AngularJS应用中第一个被执行的方法
运行块是AngularJS中与main方法最接近的概念 运行块中的代码块通常很难进行单元测试 它是和应用本身高度耦合的
运行块通常用来注册全局的事件监听器 例如 会在 run()块中设置路由事件的监听器以及过滤未经授权的请求
调用方式1: 服务也是以模块形式存在的 对外提供特定功能 将服务做为依赖注入进去的 然后再进行调用 调用方式2: 直接运行相应的服务模块 AngularJS提供了run方法来实现
run方法还是最先执行的 利用这个特点 可以将一些需要优先执行的功能通过run方法来运行
假设 需要在每次路由发生变化时 都执行一个函数来验证用户的权限 放置这个功能唯一合理的地方就是run方法:
3 常见问题
如何通过 config 配置一个路由模块?
4 解决方案
下面实例使用的是第三方ui-router
5 扩展思考
provider是个啥?
$provide服务负责告诉Angular如何创造一个新的可注入的东西:即服务 服务会被叫做供应商的东西来定义 你可以使用$provide来创建一个供应商 你需要使用$provide中的provider()方法来定义一个供应商 同时你也可以通过要求$provide被注入到一个应用的config函数中来获得$provide服务
大王叫我来巡山1998
angularjs中的run 方法使用
用于初始化全局的数据 仅对全局作用域起作用
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.run(['$rootScope',function($rootScope){
$rootScope.name = 'hello';
}]);
console.log( app );
</script>
文人墨客
根据该教程可知,路由有三种设置。
第一种,设置在 Module 的 Config 阶段,设置 routeProvider,提供简单的 template 模板字符串,当被该路径模式被请求时,将 template 模板字符串渲染在 ng-view 位置。
第二种,设置 templateUrl,且页面文件中存在 type为text/ng-template 的模板 js 片段,将会搜索 id 等于 templateUrl 的模板 js,并渲染在 ng-view 的位置。
第三种,设置 templateUrl,如果页面文件中不存在与 tempalteUrl 相匹配的 js 模板,则通过相对路径向服务器请求资源,请求完毕再渲染出来。
文人墨客
路由设置对象参数规则: