AngularJS 路由

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。

通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如：

http://runoob.com/#/first

http://runoob.com/#/second

http://runoob.com/#/third

当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://runoob.com/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

接下来我们来看一个简单的实例：

<html>

    <head>

        <meta charset="utf-8">

        <title>AngularJS 路由实例 - 菜鸟教程</title>

    </head>

    <body ng-app='routingDemoApp'>

        <h2>AngularJS 路由应用</h2>

        <ul>

            <li><a href="#/">首页</a></li>

            <li><a href="#/computers">电脑</a></li>

            <li><a href="#/printers">打印机</a></li>

            <li><a href="#/blabla">其他</a></li>

        </ul>

        <div ng-view></div>

        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

        <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>

        <script>

            angular.module('routingDemoApp',['ngRoute'])

            .config(['$routeProvider', function($routeProvider){

                $routeProvider

                .when('/',{template:'这是首页页面'})

                .when('/computers',{template:'这是电脑分类页面'})

                .when('/printers',{template:'这是打印机页面'})

                .otherwise({redirectTo:'/'});

            }]);

        </script>

    </body>

</html>

实例解析：

  • 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学习篇（二十三）的更多相关文章

  1. AngularJS学习篇（十三）

    AngularJS HTML DOM ng-disabled 指令 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. <!DOCTYPE html> ...

  2. python3.4学习笔记(二十三) Python调用淘宝IP库获取IP归属地返回省市运营商实例代码

    python3.4学习笔记(二十三) Python调用淘宝IP库获取IP归属地返回省市运营商实例代码 淘宝IP地址库 http://ip.taobao.com/目前提供的服务包括:1. 根据用户提供的 ...

  3. 学习笔记：CentOS7学习之二十三： 跳出循环-shift参数左移-函数的使用

    目录 学习笔记:CentOS7学习之二十三: 跳出循环-shift参数左移-函数的使用 23.1 跳出循环 23.1.1 break和continue 23.2 Shift参数左移指令 23.3 函数 ...

  4. (C/C++学习笔记) 二十三. 运行时类型识别

    二十三. 运行时类型识别 ● 定义 运行时类型识别(Run-time Type Identification, RTTI) 通过RTTI, 程序能够使用基类的指针或引用来检查(check)这些指针或引 ...

  5. AngularJS学习篇（二十四）

    AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...

  6. AngularJS学习篇（二十二）

    AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...

  7. AngularJS学习篇（二十一）

    AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!doctyp ...

  8. AngularJS学习篇（二十）

    AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...

  9. AngularJS学习篇（十二）

    AngularJS SQL ASP.NET 中执行 SQL 获取数据 <!DOCTYPE html> <html> <head> <meta charset= ...

随机推荐

  1. mysql技能提升篇 - Sqlyog高级应用

    mysql作为绝大部分公司使用的数据库,自然是牛牛牛! 每个人都能设计数据库,都能从删库到跑路.但是,如何做到更好,更快,更准地建立你的mysql数据库,这是个值得关注的问题(尽管很多人已经去搞大数据 ...

  2. struts2一个和多个文件上传及下载

    struts2的文件上传相比我们自己利用第三方jar包(commons-fileupload-1.2.1.jar   commons-io-1.3.2.jar )要简单的多,当然struts2里面也是 ...

  3. Quartz源码——JobStore保存JonDetail和Trigger源码分析（一）

    我都是分析的jobStore 方式为jdbc的SimpleTrigger!RAM的方式类似分析方式! {0} :表的前缀 ,如表qrtz_trigger ,{0}== qrtz_ {1}:quartz ...

  4. java集合系列——Set之HashSet和TreeSet介绍（十）

    一.Set的简介 Set是一个不包含重复元素的 collection.更确切地讲,set 不包含满足 e1.equals(e2) 的元素.对 e1 和 e2,并且最多包含一个为 null 的元素. S ...

  5. Android Studio安装应用时报错 installation failed with message Failed to finalize session......

    解决方法: 在AndroidManifest.xml中的provider中的authorities后加几个数字即可. 2017.09.01: 我发现有的项目AndroidManifest.xml中没有 ...

  6. Ionic3学习笔记（五）动画之使用 animate.css

    本文为原创文章,转载请标明出处 目录 前言 animate.css 的使用 animate.scss 的使用 1. 前言 animate.css 是一款强大的.跨浏览器的预设CSS3动画库,内置了很多 ...

  7. JavaWeb（四）EL表达式

    前言 前面详细的说明了什么是JSP和它的一些元素,这篇给大家介绍一下的是EL表达式. 用EL表达式,能更好的使用JSP中的各种内置对象和作用域. 楼主作为大四狗马上要出去面试了,内心很紧张!!! 一. ...

  8. 通过JQuery实现Ajax代码

    今天早上遇到了这个问题,结果我写的顺序是惨不忍睹啊,所有现在留个模版以示标准. $(function(){ $.ajax({ url : "Servlet", //传地址 type ...

  9. Tarjan LCA

    强连通 迷宫城堡 Proving Equivalences Equivalent Sets Summer Holiday Intelligence System The King's Problem ...

  10. EasyUI Dialog 窗体 布局记要

    通常在窗体里放置的都是表单,或者使用分栏(Tab)来陈列信息也是非常的好用.在这里特别记录一下在窗体里同时放置表单和表格的设计思路. 仅放置一个表单 通常 Dialog 里只放一个表单,而且表单的行数 ...