angularjs-路由

最新推荐文章于 2020-12-30 06:40:28 发布

Mars-xq

最新推荐文章于 2020-12-30 06:40:28 发布

阅读量419

点赞数

分类专栏： angularjs angularjs

本文链接：https://blog.csdn.net/sinat_31057219/article/details/58041310

版权

angularjs 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

angularjs

37 篇文章 0 订阅

订阅专栏

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：父传子 child
controller：传递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.html
nofollow的使用
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.引导爬虫抓取有效的页面：避免爬虫抓取一些无意义的页面，影响爬虫抓取的效率。-->

Mars-xq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs-路由

AngularJS 路由机制是由ngRoute模块提供，它允许我们将视图分解成布局和模板视图，根据url变化动态的将模板视图加载到布局中，从而实现单页面应用的页面跳转功能。实现无刷新的视图切换。首先需要在页面引入angular和angular-route，注意要在angular-route之前引入angular，这主要是因为angular-route.js需要传入window.angular这个参数
复制链接

扫一扫