在多视图单页面web应用中，angularjs使用路由‘#+标记’来区别不同的逻辑页面并将不同的页面绑定到对应的控制器上。通过一个简单的实例来深入理解：

1.index.html

主页面中插入代码：

<div ng-view></div>

该div内的html内容会根据路由的变化而变化。

(Tips:除了基本框架需要引入外，需要引入实现路由的js文件： ../angular-route.min.js)

 <!DOCTYPE html>

 <html lang="zh-CN" ng-app="webapp">

   <head>

     <meta charset="utf-8">

     <title>Demo</title>

     <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/>

     <style>

         body {font-size:20px;}

         .ng-scope {

             margin: 10px;

             padding:10px;

         }

     </style>

   </head>

   <body>

     <div ng-view></div>

     <script src="../bower_components/angular/angular.min.js"></script>

       <script src="../bower_components/angular-route/angular-route.min.js"></script>

       <script src="scripts/demo.js"></script>

   </body>

 </html>

2.ctrl1.html

第一个html模板文件

 <div>I am ctrl1.html</div>

 <div>{{Ctrl1Var}}</div>

 <div ng-include="'views/links.html'"></div>

3.ctrl2.html

第二个html模板文件

 <div>I am ctrl2.html</div>

 <div>{{Ctrl2Var}}</div>

 <div ng-include="'views/links.html'"></div>

4.ctrl3.html

第三个html模板文件

 <div>I am ctrl3.html</div>

 <div>{{Ctrl3Var}}</div>

 <div ng-include="'views/links.html'"></div>

5.links.html

默认的html模板文件

 <ul class="list-unstyled">

     <li><a href="#/ctrl1">ctrl1</a></li>

     <li><a href="#/ctrl2">ctrl2</a></li>

     <li><a href="#/ctrl3">ctrl3</a></li>

     <li><a href="#/nonsense">nonsense</a></li>

 </ul>

6.index.js

1） 引入ngRoute作为主应用模块的依赖模块;

2） angularjs的config模块用来配置路由规则，通过configAPI，请求把$routeProvider注入到我们的配置函数，然后使用$routeProvider.whenAPI来定义路由规则，when（path,object)&otherwise(object)按顺序定义我们的所有路由，其中函数的两个参数：path为URL或者URL正则规则，object则为路由配置对象，查阅资料，完整的object如下：

$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:'这是ctrl1页面'})

•templateUrl:若在ng-view中插入HTML模板文件，则使用

$routeProvider.when('/computers', {

    templateUrl: 'views/strl1.html',

});

•controller:可以是function,string或者数组类型，这表示在当前模板上执行的controller函数，生成新的scope.

•controllerAs:string类型，为controller指定别名。

•redirectTo:重定向的地址。

•resolve:指定当前controller所依赖的其他模块。

 angular.module("webapp",[

     "ngRoute"

 ]);

 angular.module("webapp").config(['$routeProvider',function ($routeProvider) {

     $routeProvider.when('/ctrl1', {

         templateUrl: 'views/ctrl1.html',

         controller: 'Ctrl1'

     })

     .when('/ctrl2', {

         templateUrl: 'views/ctrl2.html',

         controller: 'Ctrl2'

     })

     .when('/ctrl3', {

         templateUrl: 'views/ctrl3.html',

         controller: 'Ctrl3'

     })

     .otherwise({

         redirectTo: '/ctrl1'

     });

 }]);

 angular.module('webapp').controller('Ctrl1' , ['$scope',function($scope) {

     $scope.Ctrl1Var = 'Ctrl1Var';

 }]);

 angular.module('webapp').controller('Ctrl2' , ['$scope',function($scope) {

     $scope.Ctrl2Var = 'Ctrl2Var';

 }]);

 angular.module('webapp').controller('Ctrl3' , ['$scope',function($scope) {

     $scope.Ctrl3Var = 'Ctrl3Var';

 }]);

相关实例演示链接：http://dreammaker-8-16-qboooogle.c9users.io:8080/

anjularjs 路由的更多相关文章

  1. anjularjs简介

    1 什么时候该用AngularJS AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架.首先,它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计web应用.它不仅仅 ...

  2. 详解 anjularjs的ui-route（多视图、视图嵌套、视图传参）

    最近整理了一下anjularjs的第三方插件ui-route,在这就以一个demo的形式讲解一下.整片博客均以开头的demo代码为例.下边是个目录,大家可以酌情直接跳转浏览. 1. demo的代码 2 ...

  3. Ionic-wechat项目边开发边学（二）：目录结构，header标签与路由

    之前一直跟Linux驱动打交道,上层应用几乎为零,业余时间也不是很多,所以博客也不会写的非常详细,大家有问题尽管评论哦, 我有空会及时回复! 摘要 上一篇文章主要介绍了ionic的开发环境配置, 以及 ...

  4. Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  5. Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  6. nodejs进阶(3)—路由处理

    1. url.parse(url)解析 该方法将一个URL字符串转换成对象并返回. url.parse(urlStr, [parseQueryString], [slashesDenoteHost]) ...

  7. .NetCore MVC中的路由（2）在路由中使用约束

    p { margin-bottom: 0.25cm; direction: ltr; color: #000000; line-height: 120%; orphans: 2; widows: 2 ...

  8. .NetCore MVC中的路由（1）路由配置基础

    .NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...

  9. ASP.NET路由模型解析

    大家好,我又来吹牛逼了 ~-＿-~ 转载请注明出处:来自吹牛逼之<ASP.NET路由模型解析> 背景:很多人知道Asp.Net中路由怎么用的,却不知道路由模型内部的运行原理,今天我就给大家 ...

随机推荐

  1. Android自定义View

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24252901 很多的Android入门程序猿来说对于Android自定义View ...

  2. [转]MySQL去除重复数据

    亲测可行,看这里就行了 http://www.jb51.net/article/39302.htm

  3. iOS AFNetworking中cookie的读取与设置

    参考: http://blog.csdn.net/zhaoxy_thu/article/details/20532879 实际上AFNetworking中并没有专门针对cookie封装的代码,但是由于 ...

  4. 入坑HttpServletRequest.getParameterMap

    在项目开发的时候遇到一个小坑,在发送了异步请求以后,回调的时候传递给我一个参数直接就是HttpServletRequest的请求,下面简称request: 在使用的时候自以为很简单,直接get就好了嘛 ...

  5. CSS 3 阴影,倒影,渐变

    盒子阴影 box-shadow:盒子的阴影 第一个参数:设置的是阴影的水平偏移量 第二个参数:设置的是阴影的垂直偏移量 第三个参数:设置阴影的模糊程度 第四个参数:设置阴影外延值 第五个参数:阴影的颜 ...

  6. ORACLE分页查询SQL语法——最高效的分页

    --1:无ORDER BY排序的写法.(效率最高)--(经过测试,此方法成本最低,只嵌套一层,速度最快!即使查询的数据量再大,也几乎不受影响,速度依然!) SELECT * FROM (SELECT  ...

  7. css代码段

    css文字超出省略 .demo{ display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; ...

  8. Spring Boot工程发布到Docker

    先聊聊闲话 搞过企业级的application运维的同仁肯定深有感触,每个application的功能交叉错杂,数据交换就让人焦头烂额(当然这和顶层业务设计有关系), 几十个application发布 ...

  9. MVP 个人理解2

    根据我的理解,画了个图 这次又看了下 较复杂点的例子. 往往一个项目有多个部份,我们可以按功能分成几个activity, 每个activity有自己的view和数据model,因此也有自己的逻辑 pr ...

  10. ocp 1Z0-051 141题---感觉有问题

    141. View the Exhibit and examine the structure of CUSTOMERS and GRADES tables. You need to display ...