本篇基于ng-route来讲下angular中的路由，路由功能主要是 $routeProvider服务 与 ng-view 实现。

ng-view的实现原理，是根据路由的切换，动态编译html模板——$compile(html)(scope)。

更多内容参考：Angularjs总结

前提

首先需要在页面引入angular和angular-route，注意要在angular-route之前引入angular

<script src="../../bower_components/angular/angular.js"></script>

<script src="../../bower_components/angular-route/angular-route.js"></script>

这主要是因为angular-route.js需要传入window.angular这个参数，而这个参数只有在加载完angular才会出现。

(function(window, angular, undefined) {

'use strict';

...

ngRouteModule.directive('ngView', ngViewFactory);

...

})(window, window.angular);

下载可以去官网下载，或者使用bower进行安装。

讲解

　　路由功能是由 routeProvider服务 和 ng-view 搭配实现，ng-view相当于提供了页面模板的挂载点，当切换URL进行跳转时，不同的页面模板会放在ng-view所在的位置; 然后通过 routeProvider 配置路由的映射。

一般主要通过两个方法：

when()：配置路径和参数;

otherwise：配置其他的路径跳转，可以想成default。

when的第二个参数：

controller：对应路径的控制器函数，或者名称

controllerAs：给控制器起个别名

template：对应路径的页面模板，会出现在ng-view处,比如"<div>xxxx</div>"

templateUrl：对应模板的路径，比如"src/xxx.html"

resolve：这个参数着重说下，该属性会以键值对对象的形式，给路由相关的控制器绑定服务或者值。然后把执行的结果值或者对应的服务引用，注入到控制器中。如果resolve中是一个promise对象，那么会等它执行成功后，才注入到控制器中，此时控制器会等待resolve中的执行结果。

详细的例子，可以参考下面的样例。

redirectTo：重定向地址

reloadOnSearch：设置是否在只有地址改变时，才加载对应的模板;search和params改变都不会加载模板

caseInsensitiveMatch：路径区分大小写

路由有几个常用的事件：

$routeChangeStart：这个事件会在路由跳转前触发

$routeChangeSuccess：这个事件在路由跳转成功后触发

$routeChangeError：这个事件在路由跳转失败后触发

使用

在页面中，写入URL跳转的按钮链接 以及 ng-view标签

    <div ng-controller="myCtrl">

        <ul>

            <li><a href="#/a">click a</a></li>

            <li><a href="#/b">click b</a></li>

        </ul>

        <ng-view></ng-view>

        <!-- <div ng-view ></div> -->

    </div>

其中，ng-view可以当作元素或者标签等。

JavaScript中需要定义跳转的相关配置

<script type="text/javascript">""""""function= hello,a!;

    })

    .controller(bController,($scope){

        $scope.hello "";

    })

    .controller(myCtrl,($scope,$location){

        $scope.$on($viewContentLoaded,(){

            console.log(ng-view content loaded!);

        });

        $scope.$on($routeChangeStart,(event,next,current){

            event.preventDefault(); //cancel url change

"");

        });

    })

    .config(($routeProvider, $locationProvider) {

          $routeProvider

           .when(/a, {

            templateUrl: a.html,

            controller: aController

          })

        .when(/b, {

            templateUrl: b.html,

            controller: bController,

            resolve: {

                   I will cause a 3 second delay

functionvar= $q.defer();

                    $timeout(delay.resolve, );

                     delay.promise;

                  }

            }

        })

        .otherwise({

            redirectTo: /a

          });

    });

    </script>

上面的代码中，/b路径中的resolve关联来一个延迟方法，这个方法返回的时Promise对象，而且3秒钟后才会返回结果。因此b页面，在3秒后才会加载成功。

额外还需要提供两个html:

a.html：

<div ng-controller="aController" style="height:500px;width:100%;">{{hello}}</div>

以及b.html：

<div ng-controller="bController" style="height:2500px;width:100%;">{{hello}}</div>

这样，就可以实现路由的跳转了。

全部的代码可以参考：

<html ng-app="myApp">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="../../bower_components/angular/angular.js"></script>

    <script src="../../bower_components/angular-route/angular-route.js"></script>

</head>

<body>

    <div ng-controller="myCtrl">

        <ul>

            <li><a href="#/a">click a</a></li>

            <li><a href="#/b">click b</a></li>

        </ul>

        <ng-view></ng-view>

        <!-- <div ng-view ></div> -->

    </div>

    <script type="text/javascript">""""""function= hello,a!;

    })

    .controller(bController,($scope){

        $scope.hello "";

    })

    .controller(myCtrl,($scope,$location){

        $scope.$on($viewContentLoaded,(){

            console.log(ng-view content loaded!);

        });

        $scope.$on($routeChangeStart,(event,next,current){

            event.preventDefault(); //cancel url change

"");

        });

    })

    .config(($routeProvider, $locationProvider) {

          $routeProvider

           .when(/a, {

            templateUrl: a.html,

            controller: aController

          })

        .when(/b, {

            templateUrl: b.html,

            controller: bController,

            resolve: {

                   I will cause a 1 second delay

functionvar= $q.defer();

                    $timeout(delay.resolve, );

                     delay.promise;

                  }

            }

        })

        .otherwise({

            redirectTo: /a

          });

    });

    </script>

</body>

</html>

angularJs-route路由详解的更多相关文章

  1. AngularJs ng-route路由详解

    本篇基于ng-route来讲下路由的使用...其实主要是 $routeProvider 搭配 ng-view 实现. ng-view的实现原理,基本就是根据路由的切换,动态编译html模板. 更多内容 ...

  2. route命令详解与使用实例 ，同时访问内外网

    route命令详解与使用实例     2011-10-18 12:19:41|  分类: 其他 |  标签:route   |字号 订阅   1.   使用背景 需要接入两个网络,一个是部署环境所在内 ...

  3. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

  4. (转)linux route命令详解

    linux route命令详解 原文:https://www.cnblogs.com/lpfuture/p/5857738.html   &&   http://blog.csdn.n ...

  5. AngularJS模块的详解

    AngularJS模块的详解 在讲angularjs的模块之前,我们先介绍一下angular的一些知识点: AngularJS是纯客户端技术,完全用Javascript编写的.它使用的是网页开发的常规 ...

  6. Ocelot简易教程（三）之主要特性及路由详解

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9664977.html 上篇<Ocelot简易教程(二)之快速开始2>教大家如何快速跑起来一个 ...

  7. elasticsearch系列三：索引详解（分词器、文档管理、路由详解（集群））

    一.分词器 1. 认识分词器  1.1 Analyzer   分析器 在ES中一个Analyzer 由下面三种组件组合而成: character filter :字符过滤器,对文本进行字符过滤处理,如 ...

  8. Express的路由详解

    Express的路由详解 http://www.jb51.net/article/76203.htm

  9. [转载]Ocelot简易教程（三）之主要特性及路由详解

    上篇<Ocelot简易教程(二)之快速开始2>教大家如何快速跑起来一个ocelot实例项目,也只是简单的对Ocelot进行了配置,这篇文章会给大家详细的介绍一下Ocelot的配置信息.希望 ...

  10. Flutter学习笔记（15）--MaterialApp应用组件及routes路由详解

    如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 最近一段时间生病了,整天往医院跑,也没状态学东西了,现在是好了不少了,也该继续学习啦!!! ...

随机推荐

  1. Go实现海量日志收集系统(一)

    项目背景 每个系统都有日志,当系统出现问题时,需要通过日志解决问题 当系统机器比较少时,登陆到服务器上查看即可满足 当系统机器规模巨大,登陆到机器上查看几乎不现实 当然即使是机器规模不大,一个系统通常 ...

  2. RabbitMQ 消息确认与公平调度消费者

    一.消息确认 为了确保消息一定被消费者处理,rabbitMQ提供了消息确认功能,就是在消费者处理完任务之后,就给服务器一个回馈,服务器就会将该消息删除,如果消费者超时不回馈,那么服务器将就将该消息重新 ...

  3. （转）Android 仿订单出票效果 （附DEMO）

    之前我下载了BaseAnimation 开源库(BaseAnimation是基于开源的APP,致力于收集各种动画效果) BaseAnimation 转载的链接:http://blog.csdn.net ...

  4. Eclipse+Pydev环境搭建

    1,准备好Eclipse和JAVA,x64 2,安装JDK,配置JAVA环境变量,假设安装路径为 C:\Program Files\Java\jdk1.8.0_161 在系统变量中,新建CLASSPA ...

  5. Java连接mysql——Establishing SSL connection without server's identity verification is not recommended.

    Establishing SSL connection without server's identity verification is not recommended. 出现这个错误的原因是因为m ...

  6. C语言博客作业—函数嵌套调用

    一.实验作业 1.1 PTA题目:递归法对任意10个数据按降序排序 1.1.1设计思路 void sort(int a[],int n) { 定义整型循环变量i,中间变量temp,最小值min: 令m ...

  7. 敏捷冲刺每日报告二（Java-Team）

    第二天报告(10.26  周四) 团队:Java-Team 成员: 章辉宇(284) 吴政楠(286) 陈阳(PM:288) 韩华颂(142) 胡志权(143) github地址:https://gi ...

  8. 20145237《Java程序设计》第一周学习总结

    教材学习内容总结 java可分为Java SE.Java EE.Java ME三大平台. java SE分为JVM.JRE.JDK.与java语言四个部分. JRE包括java SE API和JVM. ...

  9. 04_Linux目录文件操作命令1（mv ls cd...）_我的Linux之路

    上一节已经给大家讲了Linux的目录结构,相信大家已经对Linux的整个目录结构有所了解 现实中,服务器(包含Linux,Unix,windows server)一般都摆放在机房里,因为一个机房摆放了 ...

  10. 常用Mysql数据库操作语句

    用户管理: 1.新建用户: 语法msyql>CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 说明: username - 你将创建 ...