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. 设计模式 “续”

    观察者模式 再次申明,本文学习自 程杰 兄的 "大话设计模式" 根据书中的内容和自己的体会而来. 观察者模式也叫 发布.订阅模式,在这个模式里,一个目标物件管理所有依赖它的观察者物 ...

  2. Theano: CNMeM is disabled, CuDNN not available

    Problem Theano: CNMeM is disabled, CuDNN not available Solution cnmem package: https://github.com/NV ...

  3. 总结的JS数据类型判定（非常全面）

    用typeof 来检测数据类型 Javascript自带两套类型:基本数据类型(undefined,string,null,boolean,function,object)和对象类型. 但是如果尝试用 ...

  4. python的颜色显示

    我们知道在命令行下,python的输出的字符串颜色和一般字符相同. 若我们想强调某些字符,我们可以利用代码将要强调的部分变成某种颜色. 在linux终端命令可以显示某种颜色,在windows的cmd终 ...

  5. 用File判断D盘下面是否还有txt文件

    package cn.idcast; import java.io.File; public class File1 { public static void main(String[] args) ...

  6. Web jquery表格组件 JQGrid 的使用 - 11.问题研究

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  7. HTML5视频播放

    1.检测浏览器是否支持html5视频播放 <!doctype html> <html> <head> <meta charset="utf-8&qu ...

  8. 马化腾称春节前推出微信小程序

    腾讯马化腾在第二届深商大会“互联与时代”论坛上透露,会在2017年春节前推出微信小程序.在谈到“互联网+”.开放生态等话题时,马化腾表示,腾讯从过去5年来,从封闭的环境变成一个开放的环境,变成一个真正 ...

  9. MySQL字段自增长AUTO_INCREMENT的学习笔记

    1.创建表时指定AUTO_INCREMENT自增值的初始值(即起始值): CREATE TABLE XXX (ID INT(5) PRIMARY KEY AUTO_INCREMENT) AUTO_IN ...

  10. (转载)robots.txt写法大全和robots.txt语法的作用

    1如果允许所有搜索引擎访问网站的所有部分的话 我们可以建立一个空白的文本文档,命名为robots.txt放在网站的根目录下即可.robots.txt写法如下:User-agent: *Disallow ...