angular.js之路由的选择
在一个单页面中，我们可以添加多个模块，使得网页只在需要的时候加载这个模块。模块的切换大致上可以代替网页的切换，于是，我们便可以通过模块的切换实现网页的切换，这个切换是按需加载的。
乍一看非常普通的东西，但是仔细想想就可以发现，这种思想可以解决非常多的资源。
例如，假如有一个页面，需要显示1000种商品的信息，每个商品的表现形式各不相同（设他们有各自独立的css和js），那么一般来说，我们就需要准备1000张网页去加载这些信息。但是，使用这种模块化思想，我们就可以仅仅在后台设定1000个各不相同的模块，然后根据需要将需要的商品的对应模块加载到唯一一张页面上而已。
而要做到上面介绍的功能就必须使用路由功能了。
主体思路：
1. 后台设立多个独立的模块
2. 建立一个路由控制模块
3. 根据需要通过路由提取需要模块加载到主页上
4. 加载的同时，将其他模块隐藏。
那么，路由模块的建立需要多少功夫呢？其实意外地简单：
首先，主页面上，写上对应的代码：
<ng-view></ng-view>这个代表路由区域和视图区域，只有写了这个标签才会触发路由事件：
<html lang="en" ng-app="myTodo"><head>
<meta charset="utf-8">
<title>angularjs • TodoMVC</title>
<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
<style>
.pagination {
overflow: hidden;
padding: 20px;
}
.pagination ul li {
width: 60px;
height: 30px;
line-height: 30px;
border:1px solid black;
float: left;
list-style-type: none;
margin-right: 10px;
text-align: center;
}
</style>
</head>
<body>
<ng-view></ng-view> <!-- 路由区域，视图区域-->
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer> <script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="js/app.js"></script> </body>
</html>
其他的东西都是装饰，只要看第24行就可以了。
在路由区域和视图区域中，我们可以添加内容进去——甚至添加一个网页进去。
接下来请看对应的app.js。
var app = angular.module("myTodo", ['ngRoute']);
//路由的配置：
app.config(function($routeProvider) {
var routeconfig = {
templateUrl: "body.html",
controller: "myTodoCtrl"
/*controller: 'myTodoCtrl'*/
}
var ohter_config = {
templateUrl: "other.html"
}
$routeProvider.
when("",routeconfig).
//status ： 它对应我们页面的hash: all completed active
//路由规则的优先级按写法的顺序所决定的
when("/other", ohter_config).
when("/:aaa", routeconfig ).
otherwise( { redirectTo: "/all" });
});
app.controller("myTodoCtrl", function($scope, $routeParams, $filter){
console.log($routeParams);
});
如果仅仅使用路由的话，以上的代码就足够使用了。它会保证;
1.当页面停留在主页或者其他奇怪的地方的时候自动跳转到
/all
上面，网址是——http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/all
只需要注意index后面的就可以了。
2. 当页面跳转方向是/other的时候，跳转到
http://127.0.0.1:8020/finishAngularJS-mark2/iother.html
上
3. 当出现特定的跳转的时候（这里规定跳转的是/active,/complete/all三个)，也会跳转到对应页面，但这是在index下的跳转——
http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/active
http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/all
http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/complete
【尤其注意的一点：除了2会跳出这个页面，其他的跳转是显示在规定的视图区和路由区上面的，body网页上的内容会被加载过来。】
接下来我们讲解原理：
app.config(function($routeProvider)
这便是用来设定路由的代码，直接写就好
var routeconfig = {
templateUrl: "body.html",
controller: "myTodoCtrl"
/*controller: 'myTodoCtrl'*/
}
var ohter_config = {
templateUrl: "other.html"
}
这是两个跳转，跳转是一个对象，templateUrl，即模板是body.html，这就是为什么index.html会加载body.html的原因。第二个参数是为这个模板添加控制器，名字是——myTodoCtrl。
第二个跳转因为不重要所以pass。
$routeProvider.
when("",routeconfig).
//status ： 它对应我们页面的hash: all completed active
//路由规则的优先级按写法的顺序所决定的
when("/other", ohter_config).
when("/:aaa", routeconfig ).
otherwise( { redirectTo: "/all" });
});
这一段代码是用来进行判断的，当哈希值发生改变的时候，执行对应的跳转对象。
当哈希值为""即第二句，为空的时候，执行routeconfig
当哈希值为"/other",即第五局，执行other_config
当哈希值是一个特殊变量的时候，变量的名称为aaa，值为X（X可以是定义好的任何指，这里是all，complete，active中其中一个），即"/active","/complete","/all"的时候，执行routeconfig。
当哈希值是其他情况的时候，默认跳转到哈希值为"/all"上。
我们得到了哈希值，执行了后面的对象，取出对象的模板，添加在了主页上面，启动了控制器，整个路由便算完成了。
angular.js之路由的选择的更多相关文章
- angular.js的路由和模板在asp.net mvc 中的使用
angular.js的路由和模板在asp.net mvc 中的使用 我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.as ...
- angular.js中 路由 用法及概念
在开讲之前,首先谈谈APP应用.平时我们用的app总是多页面,如果用原生安卓或者苹果,那当然很流畅啦.但是当我们用一般的html页面做移动端,简单时候我们可以用<a href="&qu ...
- activiti自定义流程之整合（二）：使用angular js整合ueditor创建表单
注:整体环境搭建:activiti自定义流程之整合(一):整体环境配置 基础环境搭建完毕,接下来就该正式着手代码编写了,在说代码之前,我觉得有必要先说明一下activit自定义流程的操作. 抛开自定义 ...
- activiti自己定义流程之整合（二）：使用angular js整合ueditor创建表单
基础环境搭建完成,接下来就该正式着手代码编写了,在说代码之前.我认为有必要先说明一下activit自己定义流程的操作. 抛开自己定义的表单不谈.通过之前的了解,我们知道一个新的流程開始.是在启动流程实 ...
- Angular JS 学习之路由
1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...
- Angular JS中的路由
前 言 本章节将为大家介绍 AngularJS 路由.AngularJS 路由允许我们通过不同的 URL 访问不同的内容.通过 AngularJS 可以实现多视图的单页We ...
- angular js根据json文件动态生成路由状态
项目上有一个新需求,就是需要根据json文件动态生成路由状态,查阅了一下资料,现在总结一下发出来: 首先项目用到的是angular的UI-路由,所以必须引入angular.js和angular-ui- ...
- Angular.js路由 简单小案例
代码案例: <html> <head> <meta charset="utf-8"> <title>AngularJS 路由实例&l ...
- Angular JS笔记
1.引导程序 使用ng-app开始引导一个程序:标记了AngularJS应用的作用域 <!doctype html> <html lang="en" ng-app ...
随机推荐
- 【FBA】SharePoint 2013自定义Providers在基于表单的身份验证（Forms-Based-Authentication）中的应用
//http://www.cnblogs.com/OceanEyes/p/custom-provider-in-sharepoint-2013-fba-authentication.html 由于项目 ...
- redis数据类型：lists
redis的list类型其实就是一个每个子元素都是string类型的双向链表. 我们可以通过push,pop操作从链表的头部或者尾部添加删除元素,这样list即可以作为 栈,又可以作为队列. lpus ...
- genymotion模拟器配置Genymotion-ARM-Translation 兼容包
前提是你的adb的环境已经配置正确,不知道怎么配置的可参考http://jingyan.baidu.com/article/17bd8e52f514d985ab2bb800.html 如果还不成功的话 ...
- ThinkPHP模板
[MVC模式] M:Model 数据模型层,负责数据操作 V:View 视图层,负责显示视图 C:Controller 控制器,实现业务逻辑 tp框架url地址可以由以下四种 http://网址/in ...
- install font
哪些字体包含国际音标呢? 在微软的Windows与Office的2000或以上版本中分别带有Lucida Sans Unicode和Arial Unicode MS两种字体(以下分别简称LSU和AUM ...
- C语言_用if```else语句解决奖金发放问题
#include<stdio.h> #include<stdlib.h> /*企业发放的奖金根据利润提成,发放规则如下: 利润(I)低于或等于10万元时,奖金可提10%: 利润 ...
- .NET下,关于文件夹权限设置的小细节
InheritanceFlags 指定哪些接受权限继承 InheritanceFlags.ContainerInherit 下级文件夹要继承权限. InheritanceFlags.None 下级文件 ...
- LoadRunner编写Socket协议脚本方法
本文主要介绍使用LoadRunner手工编写Windows Socket协议测试脚本的方法. 通过LoadRunner编写Windows Socket协议测试脚本,总体说来,比较简单.就像把大象放进冰 ...
- eclipse4.3 安装tomcat8
Go to the WTP downloads page, select the 3.6.0 version , and download the zip (under Traditional Zip ...
- scala与java的==的比较
如果你想比较一下看看两个对象是否相等,可以使用或者==,或它的反义 !=.(对所有对象都适用,而不仅仅是基本数据类型) ? 1 2 3 4 scala> 1 == 2 res24: Boole ...