angularjs-路由

来源：互联网发布：华为荣耀盒子安装软件编辑：程序博客网时间：2024/05/01 04:11

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的终极指令。

<!--该 div 内的 HTML 内容会根据路由的变化而变化。有以下两种写法--> <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><!--首先需要在页面引入angular和angular-route，注意要在angular-route之前引入angular这主要是因为angular-route.js需要传入window.angular这个参数，而这个参数只有在加载完angular才会出现。--><body><!--路由功能主要是 $routeProvider服务 与 ng-view 实现。路由功能是由 routeProvider服务 和 ng-view 搭配实现，ng-view相当于提供了页面模板的挂载点，当切换URL进行跳转时，不同的页面模板会放在ng-view所在的位置; 然后通过 routeProvider 配置路由的映射。--><div>    <a href="#/list">列表</a></div><!--单页Web应用由于没有后端URL资源定位的支持，需要自己实现URL资源定位。AngularJs使用浏览器URL"#"后的字符串来定位资源。--><!--路由机制并非在AngularJS核心文件内，你需要另外加入angular-route.min.js脚本。并且创建mainApp模块的时候需要添加对ngRoute的依赖。--></br><div ng-view></div><!--该 div 内的 HTML 内容会根据路由的变化而变化。有以下两种写法--><!-- <ng-view></ng-view> 当做标签--><!-- <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><!--<a href="http://www.runoob.com/">访问菜鸟教程</a>可以跳转--><!--http://www.cnblogs.com/shuchao/archive/2009/09/19/rel-nofollow.htmlnofollow的使用nofollow有两种用法：1.用于meta元标签：<meta name="robots" content="nofollow" />，告诉爬虫该页面上所有链接都无需追踪。2.用于a标签：<a href="login.aspx" rel="nofollow">登录</a>,告诉爬虫该页面无需追踪。nofollow的作用nofollow主要有三个作用：1.防止不可信的内容，最常见的是博客上的垃圾留言与评论中为了获取外链的垃圾链接，为了防止页面指向一些拉圾页面和站点。2.付费链接：为了防止付费链接影响Google的搜索结果排名，Google建议使用nofollow属性。3.引导爬虫抓取有效的页面：避免爬虫抓取一些无意义的页面，影响爬虫抓取的效率。-->

0 0