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. Spring定时器的使用详解

    写个最简单的demo吧,反正睡前没什么事儿,来祸害一下园子~~虽然我菜,但是我不会承认啊,哈哈哈 明天详细补充点儿吧,很晚了,不睡觉的程序员不是好程序员,我总能给自己找借口~~~ //spring开启 ...

  2. escape()、encodeURI()、encodeURIComponent()区别详解（转）

      JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,dec ...

  3. 运行Chromium浏览器缺少google api密钥无法登录谷歌账号的解决办法

    管理员身份运行CMD,然后依次输入以下三行内容: setx GOOGLE_API_KEY "AIzaSyAUoSnO_8k-3D4-fOp-CFopA_NQAkoVCLw"setx ...

  4. You Are the One DP

    You Are the One Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Sub ...

  5. .Neter玩转Linux系列之一：初识Linux

    一.为什么要学习Linux (1)首先我们欣赏一下,曾经的微软是如何看待Linux的,是不是很惊讶,微软还是很可爱的(#^.^#) 如今的微软看待Linux的态度:有人说微软技术那么厉害,难道微软就不 ...

  6. 用shell脚本新建shell文件并自动生成头说明信息

    目标: 新建文件后,直接给文件写入下图信息 代码实现: [root@localhost test]# vi AutoHead.sh #!/bin/bash#此程序的功能是新建shell文件并自动生成头 ...

  7. flex的三个属性：

    (1)flex-grow:指的是相对于其他的子元素的扩展比率:默认值为0:数字 (2)flex-basis:指的是子元素的具体长度:可以为长度(rem,px,em)也可以为百分比: (3)flex-s ...

  8. VUE长按事件

    PS:在开发中常常会有长按事件的需求,这里我简单的介绍几种长按事件的需求 需求一:长按数字累加或者累减 HTML: <div class="mui-numbox" data- ...

  9. Extjs6随笔（终篇）——内容总结

    上个月和Extjs说byebye了,以后大概也没机会用了.之前的博客有点乱,大家看着比较麻烦,所以趁着我还没忘,在这里总结一下♪(^∇^*) 写了个demo,传到git上了,有需要可以自取.Extjs ...

  10. [原创]InnoDB体系结构

    参阅:<innodb存储引擎内幕> innodb整体的体系结构如下图所示:  整体结构分两大部分:内存和进程其中内存包括:buffer_pool\redo log buffer\addit ...