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： /first 和 /second。每个 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>



												


											
AngularJS 路由的更多相关文章
	

    
								
  1. Angularjs路由需要了解的那点事
		
    Angularjs路由需要了解的那点事 我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模 ...
    
		
    2. 
						
  2. 【转】AngularJS路由和模板
		
    1. AngularJS路由介绍 AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(re ...
    
		
    3. 
						
  3. AngularJS路由和模板
		
    前言 如果想开发一款类似gmail的web应用,我们怎么做呢? 以jQuery的思路,做响应式的架构设计时,我们要监听所有点击事件,通过事件函数触发我们加载数据,提交,弹框,验证等的功能:以 Angu ...
    
		
    4. 
						
  4. AngularJS路由跳转
		
    AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是 ...
    
		
    5. 
						
  5. AngularJS 路由精分
		
    AngularJS 路由机制是由ngRoute模块提供,它允许我们将视图分解成布局和模板视图,根据url变化动态的将模板视图加载到布局中,从而实现单页面应用的页面跳转功能. AngularJS 路由允 ...
    
		
    6. 
						
  6. AngularJS进阶(二)AngularJS路由问题解决
		
    AngularJS路由问题解决 遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去.再加一层地址解决了,但是后来发现问题还是来了: Could not resolve 'yhDtlMain ...
    
		
    7. 
						
  7. AngularJS路由使用案例
		
    AngularJS路由使用案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
    
		
    8. 
						
  8. angularjs路由path方式实现原理探究
		
    angularjs路由 https://angular.io/guide/router 通过URL解释, 来定位客户端生成的浏览器端视图. 你可绑定路由到页面的链接上, 当用户点击链接, 可以浏览到相 ...
    
		
    9. 
						
  9. AngularJS路由系列(6)-- UI-Router的嵌套State
		
    本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Python学习总结 03 Plotly 学习总结
			
    一 Plotly 简介 Plotly是另一个免费进行数据分析和绘制图表的APP,建立在d3.js上. Plotly图可下载为SVG,EPS或PNG格式,并简单地导入到Illustrator或者Phot ...
    
			
    2. 
						
  2. 查看IO负载
			
    负载(load)是linux机器的一个重要指标,直观了反应了机器当前的状态.如果机器负载过高,那么对机器的操作将难以进行. Linux的负载高,主要是由于CPU使用.内存使用.IO消耗三部分构成.任意 ...
    
			
    3. 
						
  3. thinkphp 3.2 linux二级目录安装
			
    详解:http://document.thinkphp.cn/manual_3_2.html#url_rewrite 注意:linux系统对大小写敏感 服务器系统:linux (阿里云服务器) thi ...
    
			
    4. 
						
  4. [转]C语言SOCKET编程指南
			
    1.介绍 Socket编程让你沮丧吗?从man pages中很难得到有用的信息吗?你想跟上时代去编Internet相关的程序,但是为你在调用 connect() 前的bind() 的结构而不知所措?等 ...
    
			
    5. 
						
  5. Windows 7 OpenGL配置
			
    http://blog.csdn.net/qingyang8513/article/details/45155245
    
			
    6. 
						
  6. 转载：Centos7 从零编译配置Memcached
			
    序言 Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度. Memca ...
    
			
    7. 
						
  7. java基础知识（十一）java反射机制（上）
			
    java.lang.Class类详解 java Class类详解 一.class类 Class类是java语言定义的特定类的实现,在java中每个类都有一个相应的Class对象,以便java程序运行时 ...
    
			
    8. 
						
  8. phpcms调取数据库的两种机制
			
    在phpcms中,模板调取后台的数据有两种机制: 1.在控制器中定义数据,在模板中直接调用. 2.标签机制.即在模块的classes/tag.class中定义标签类,然后在模板中用标签调用 两种调用机 ...
    
			
    9. 
						
  9. Vue.js：轻量高效的前端组件化方案
			
    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
    
			
    10. 
						
  10. mac 关闭&&显示隐藏文件命令
			
    打开终端,输入: defaults write com.apple.finder AppleShowAllFiles -bool true 此命令显示隐藏文件 defaults write com.a ...
    
			
    11.