angularjs-路由

2019-11-06 10:03:25

字体：大中小

来源：转载

供稿：网友

AngularJS 路由机制是由ngRoute模块提供，它允许我们将视图分解成布局和模板视图，根据url变化动态的将模板视图加载到布局中，从而实现单页面应用的页面跳转功能。实现无刷新的视图切换。

首先需要在页面引入angular和angular-route，注意要在angular-route之前引入angular，这主要是因为angular-route.js需要传入window.angular这个参数，而这个参数只有在加载完angular才会出现。

单页Web应用由于没有后端URL资源定位的支持，需要自己实现URL资源定位。AngularJs使用浏览器URL”#”后的字符串来定位资源。

路由机制并非在AngularJS核心文件内，你需要另外加入angular-route.min.js脚本。并且创建mainApp模块的时候需要添加对ngRoute的依赖。

服务routePRovider用来定义一个路由表，即地址栏与视图模板的映射。我们会用到里面的when和otherwise两个方法，otherwise：默认界面。

服务routeParams保存了地址栏中的参数，例如{id : 1, name : ‘tom’}，也提供了通配某类地址的能力。

服务route完成路由匹配，并且提供路由相关的属性访问及事件，如访问当前路由对应的controller。

指令ngView用来在主视图中指定加载子视图的区域，它会创建自己的作用域并将模板嵌套在内部。 ng-view 是一个优先级为1000的终极指令。AngularJS不会运行同一个元素上的低优先级指令。ng-view 是一个优先级为1000的终极指令。

<ng-view></ng-view> //当做标签 //或<div ng-view ></div> //当做元素

以上内容再加上location服务（用来分析处理url），我们就可以实现一个单页面应用了。

$http：用于处理 xmlHttpRequest$location：提供当前URL的信息$q：异步请求使用，promise/deferred模块$routeProvider：配置路由$log：日志服务resolve：该属性会以键值对对象的形式，给路由相关的控制器绑定服务或者值。然后把执行的结果值或者对应的服务引用，注入到控制器中。如果resolve中是一个promise对象，那么会等它执行成功后，才注入到控制器中，此时控制器会等待resolve中的执行结果。

如何在作用域之间通信呢？

1.创建一个单例服务，然后通过这个服务处理所有子作用域的通信。2.通过作用域中的事件处理通信。但是这种方法有一些限制；例如，你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。

on、emit和broadcast使得event、data在controller之间的传递变的简单。

$emit：子传父传递event与data$broadcast：父传子 childcontroller：传递event与data$on：监听或接收数据。。用于接收event与data

broadcast、emit事件必须依靠其他事件（ng-click等）进行触发，而不能单纯写一个这个。on倒是可以直接写，因为它属于监听和接收数据的。

$on的方法中的event事件参数： event.name// 事件名称 event.targetScope //发出或者传播原始事件的作用域 event.currentScope //目前正在处理的事件的作用域 event.stopPropagation() //一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用`$emit`发出的事件) event.preventDefault() //这个方法实际上不会做什么事，但是会设置`defaultPrevented`为true。 //直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。 event.defaultPrevented //如果调用了`preventDefault`则为true

示例：

index.html

<!DOCTYPE html><html ng-app="mainApp"><head> <meta charset="utf-8"> <title>My AngularJS App</title> <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script> <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"></script></head><body><div> <a href="#/list">列表</a></div></br><div ng-view></div><script> // 设置当前模块依赖，“ngRoute”，用.NET的解就是给这个类库添加“ngRoute”引用 angular.module("mainApp", ["ngRoute"]) .config(["$routeProvider", function ($routeProvider) { $routeProvider//定义一个路由表，即地址栏与视图模板的映射。 /*when()：配置路径和参数; otherwise：配置其他的路径跳转，可以想成default。*/ .when("/list", { // 指定URL为“/” 控制器：“listController”，模板：“route-list.html” controller: "listController", templateUrl: "route-list.html" }) .when("/view/:id", {// 注意“/view/:id” 中的 “：id” 用于捕获参数ID controller: "viewController", templateUrl: "route-view.html" }) .when("/", { // 跳转 redirectTo: "/list" }) .otherwise({redirectTo: "/list"}); }]) //创建一个提供数据的服务器 .factory("service", function () { var list = [ {id: 1, title: "博客园", url: "http://www.cnblogs.com"}, {id: 2, title: "知乎", url: "http://www.zhihu.com"}, {id: 3, title: "codeproject", url: "http://www.codeproject.com/"}, {id: 4, title: "stackoverflow", url: "http://www.stackoverflow.com/"} ]; return function (id) { //假如ID为无效值返回所有 if (!id) return list; var t = 0; //匹配返回的项目 angular.forEach(list, function (v, i) { if (v.id == id) t = i;//item的下标 }); return list[t]; } }) // 创建控制器 listController,注入提供数据服务 .controller("listController", ["$scope", "service", function ($scope, service) { $scope.list = service();//获取所有数据 }]) // 创建查看控制器 viewController, 注意应为需要获取URL ID参数 // 我们多设置了一个依赖注入参数 “$routeParams” 通过它获取传入的 ID参数 .controller("viewController", ["$scope", "service", '$routeParams', function ($scope, service, $routeParams) { $scope.model = service($routeParams.id || 0) || {}; }]);</script></body></html>

route-list

<ul ng-repeat="item in list"> <li><a href="#view/{{item.id}}">{{item.title}}</a></li></ul>

route-view

<div> <div>网站ID：{{model.id}}</div> <div>网站名称：<a href="{{model.url}}" rel="nofollow">{{model.title}}</a></div> <div>访问地址：{{model.url}}</div></div>

上一篇：Linux驱动regulator

下一篇：插件化知识详细分解及原理之ClassLoader及dex加载过程