1.AngularJS路由允许我们通过不同的URL访问不同的内容；通过AngularJS可以实现多视图的单页WEB访问（SPA）

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

http://runoob.com/#/first

http://runoob.com/#/second

http://runoob.com/#/third

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

4.简单实例：

<html>

　　<head>

　　　　<meta charset="utf-8">

　　　　<title>AngularJS路由实例<title>

　　</head>

　　<body ng-app='routingDemoApp'>

　　<h2>AnuglarJS路由应用</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>                 //使用ngView指令，该<div>内的HTML内容会根据路由的变化而变化

　　<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>                   //载入了实现路由的js文件：angular-route.js

　　<script>

　　　　angular.module('routingDemoApp',['ngRoute'])    //包含了ngRoute模块作为主应用模块的依赖模块

　　　　.config(['$routeProvider',function($routeProvider{   //AngularJS模块的config函数用于配置路由规则，通过使用configAPI，我们请求把$routeProvider注入到我们的配置函数且使用$routeProviderAPI定义我们的路由规则

　　　　　　$routeProvider;        //配置$routeProvider,AngularJS的$routeProvider用了定义路由规则

　　　　　　.when('/',{template:'这是首页页面'})     //$routeProvider为我们提供了when(path，object)&otherwise(object)函数按顺序定义所有路由，函数包含两个参数：第一个参数是URL或者URL正则规则；第二个参数是路由配置对象

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

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

　　　　})]);

　　</script>

</body>

</html>

5.路由设置对象：AngularJS路由也可以通过不同的模板来实现，$routeProvider.when函数的第一个参数是URL或者URL正则规则，第二个参数为路由配置对象；语法规则如下：

$routeProvider.when(url,{

　　template:string,           //如果我们只需要在ng-view中插入简单的HTML内容，则使用该参数.when('/computers',{template:'这是电脑分类页面'})

　　templateUrl:string,      //如果我们只需要在ng-view中插入HTML模板文件，则使用该参数：$routeProvider.when('/computers',{templateUrl:'views/computers.html',});从服务器端获取view/computers.html文件插入到ng-view中

　　controller:string,function或array,             //function，string，或数组类型，在当前模板上执行的controller函数，生成新的scope

　　controllerAs:string,             //string，为controller指定别名

　　redirectTo:string,function,       //重定向的地址

　　resolve:object<key,function>        //指定当前controller所依赖的其他模块

});

Angular JS 学习之路由的更多相关文章

  1. 适合我胃口的angular.js学习资料

    断断续续弄了半年的ANGULAR.JS学习资料,网上下载了N多资料,测试了很多次. 现在只能算是入门,因时间问题,现在要转入其它领域. 如果以后要拾起来,下面这个PDF比较对我胃口. <Angu ...

  2. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

  3. Angular.js学习笔记（三）

    一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRI ...

  4. Angular JS中的路由

      前  言            本章节将为大家介绍 AngularJS 路由.AngularJS 路由允许我们通过不同的 URL 访问不同的内容.通过 AngularJS 可以实现多视图的单页We ...

  5. angular.js学习的第一天

    第一天对angular.js进行学习,肯定是面对的入门的最简单的实例: 实现下面的这个效果,首先需要在html页面引入angular.js,在下面的div中,ng-app则表示在当前div是一个ang ...

  6. Angular JS 学习之Bootstrap

    1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...

  7. Angular JS学习之指令

    1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...

  8. Angular JS学习之表达式

    1.Angular JS使用表达式把数据绑定到HTML: 2.Angular JS表达式写在双大括号中:{{expression}} **Angular JS表达式把数据绑定到HTML,这与ng-bi ...

  9. Angular JS 学习之简介

    1.Angular JS是一个JavaScript框架,它是一个以JavaScript编写的库,它可以通过<script>标签添加到HTML页面: <script src=" ...

随机推荐

  1. 【原】fiddler修改线上的内容

    摘要:当我们线上的代码出bug了,咋办呢?有时候本地的代码跟线上的代码还是运行环境还是有区别的.比如有些封装的方法需要运动到手机上可以调试,而浏览器是无法调试的.如果不想每次修改完再放上到测试环境看效 ...

  2. Linux系统概述

    1.Linux是一套免费使用 和自 由传播的类Unix操作系统. 这个系统是由世界各地的成千上万的程序员 设计和实现的.其目 的是建立不受任何商品化软件的版权制约的. 全世界都能自 由使用的Unix兼 ...

  3. Javascript实现前端简单路由

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http ...

  4. 简明Linux命令行笔记：mv

    重命名.覆盖或移动文件 mv [options] existing-file new-filename mv [options] existing-file-list directory mv [op ...

  5. 在linux命令行下执行php 程序

    如何在linux命令行下,执行php程序. 例子 打印当前时间 php -r "echo time()" 随机输出一个数字 php -r "echo rand(1,20) ...

  6. golang笔记——流程控制

    条件语句 if ... else if ... else 语句,如: { fmt.Println(">100") } < num { fmt.Println(" ...

  7. （五）SQL Server分区自动化案例

    需求定义 统计表可能达到每天1000万数据.只查询当天的数据用于统计,可归档三月前的数据.得出分区方案如下: 每天生成一个分区 归档三个月前的分区 基本架构 固定生成12个辅助数据库文件,将每年当月的 ...

  8. MVVM开发模式简单实例MVVM Demo

    本文主要是翻译Rachel Lim的一篇有关MVVM模式介绍的博文 A Simple MVVM Example 并具体给出了一个简单的Demo(原文是以WPF开发的,对于我自己添加或修改的一部分会用红 ...

  9. ASP.NET学习链接

    张子阳个人ASP.NET技术博客:http://www.tracefact.net/Asp-Net/ 动态加载asp.net分页控件:http://www.cnblogs.com/cresuccess ...

  10. Python 爬虫2

    import urllib.request import os import re import time 设置头文件 head={} head['User-Agent'] ='Mozilla/5.0 ...