AngularJS 路由

本章节我们将为大家介绍 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 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

在以上图形中，我们可以看到创建了两个 URL： /ShowOrders 和 /AddNewOrder。每个 URL 都有对应的视图和控制器。

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

<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所依赖的其他模块。

实例

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<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 type="text/javascript">

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

.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})

.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})

.config(function ($routeProvider) {

    $routeProvider.

    when('/home', {

        templateUrl: 'embedded.home.html',

        controller: 'HomeController'

    }).

    when('/about', {

        templateUrl: 'embedded.about.html',

        controller: 'AboutController'

    }).

    otherwise({

        redirectTo: '/home'

    });

});

</script>

</head>

<body ng-app="ngRouteExample" class="ng-scope">

  <script type="text/ng-template" id="embedded.home.html">

      <h1> Home </h1>

  </script>

  <script type="text/ng-template" id="embedded.about.html">

      <h1> About </h1>

  </script>

  <div>

    <div id="navigation">

      <a href="#/home">Home</a>

      <a href="#/about">About</a>

    </div>

    <div ng-view="">

    </div>

  </div>

</body>

</html>

angular路由参数说明的更多相关文章

  1. angular路由——ui.route

    angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. angular路由详解：

    1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...

  3. angular 路由的引用

    使用angular路由 遇到的坑. 使用cmd 安装好node.js 安装成功 输入node  -v 能查看版本说明安装成功 搭建angular项目输入命令 npm install  -g  angu ...

  4. angular 路由项目例子

    angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...

  5. Angular路由参数传递

    一.路由时传递参数的方式 1.在查询参数中传递数据 //页面 <a routerLink="/product" [queryParams]="{id:1}" ...

  6. angular路由（自带路由篇）

    一.angular路由是什么? 为了实现SPA多视图的切换的效果,其原理可简述为每个 URL 都有对应的视图和控制器.所以当我们给url后面拼上不同的参数就能通过路由实现不同视图的切换. 二.文件总览 ...

  7. Angular路由守卫 canActivate

    作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...

  8. Angular路由守卫 canDeactivate

    目的 离开页面时,做出逻辑判断 以ng-alain的项目为基础做演示 效果如图: 关键代码 定义一个CanDeactivateGuardService export class CanDeactiva ...

  9. Angular 路由守卫

    1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...

随机推荐

  1. [Lucas定理]【学习笔记】

    Lucas定理 [原文]2017-02-14 [update]2017-03-28 Lucas定理 计算组合数取模,适用于n很大p较小的时候,可以将计算简化到小于p $ \binom{n}{m} \m ...

  2. Heartbeat实现热备

    1.环境准备:1)主节点:master eth0:192.168.0.201 eth1:192.168.0.03 2)备节点:slave eth0 :192.168.0.215 eth1:192.16 ...

  3. SDN第四次上机作业

    1.建立以下拓扑,并连接上ODL控制器. 2.利用ODL下发流表,使得h3在10s内ping不通h1,10s后恢复. 3.借助Postman通过ODL的北向接口下发流表,再利用ODL北向接口查看已下发 ...

  4. Asp.Net Core 2.0 之旅---在Ubuntu上部署WEB应用程序

    1.Ubuntu 上 安装NET Core 2.0 SDK 第一步的安装,微软大佬已经写的非常详细了=>直达链接,按照教程来即可. 2.将我们的WEB 发布到一个文件夹,将这个文件夹打包成 压缩 ...

  5. java程序设计原则

    前言: 前言:java这种面向对象的的语言其实是很符合人的生活思维模式的,因为它以对象作为自己的研究对象,所谓"万物皆对象".一个人.一颗苹果.一只蚂蚁都是对象.所以它的设计原则和 ...

  6. docker设置固定ip地址

    Docker安装后,默认会创建下面三种网络类型 $ docker network ls NETWORK ID NAME DRIVER SCOPE 9781b1f585ae bridge bridge ...

  7. 【HTTP协议】---TCP三次握手和四次挥手

    TCP三次握手和四次挥手 首先我们知道HTTP协议通常承载于TCP协议之上,HTTPS承载于TLS或SSL协议层之上 通过上面这张图我们能够知道.     在Http工作之前,Web浏览器通过网络和W ...

  8. C# 13行代码带你模拟登录QQ空间

    最近想做一个QQ空间点赞的小工具,于是晚上下班回来就开始分析PC版的QQ空间,打开Chrome,切换到Network,然后输入账号密码,然后点击登录... 然后,我曹....一堆请求就开始了....搞 ...

  9. xBIM WeXplorer 设置模型颜色

    目录 基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...

  10. POJ - 3268 单源最短路

    题意:给定一些有向边,以及一个目的地,从某个点到达目的地,再从目的地回到那个点.共有n个点,问这n个点花费最大是多少? 思路:从目的地回去直接把目的地作为源点即可.那么从某个点到达目的地应该如何得到最 ...