AngularJs多重视图和路由的使用
使用AngularJs来做多重视图和路由是在方便不过了，在开发过程中，都有许多的页面，而这些页面都有相同的部分，比如页面的头部和尾部通常都是一样的，变化的都是主体部分，还有就是一些后端管理的一些项目，通常不变的都是头部，尾部和菜单部分，变化的都是右边的内容部分，使用AngularJs的多重视图和路由就可以很方便的实现这样的效果。在实现之前需要准备两个文件，一个是angular的主JS文件，另一个是angular的路由JS文件，如下：
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
在页面中引入这两个JS文件就可以使用angular了，这里将实现这效果分为如下几步：
1.创建一个简单的布局文件
2.创建一个模块，可以写在当前的布局文件中也可以新开一个js文件，为了方便管理还是分开好点
3.创建路由规则
4.如果有用到控制器，再创建控制器
接下来就具体来实现这个效果：
1.
<html>
<meta charset="UTF-8">
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<title></title> <body>
<header>
<h1>页面头部</h1>
</header>
<!--这里就是渲染其他视图的地方-->
<div data-ng-view=""></div>
<footer>
<h1>页面底部</h1>
</footer>
</body>
</html>
在angularjs中就是通过ng-view指令和路由结合在一起。
2.创建模块
var mainApp=angular.module("main.app",['ngRoute']);
因为要使用路由，所以必须将ngRoute依赖加入进来
3.创建路由规则
mainApp.config(["$routeProvider",function($routeProvider){
$routeProvider.when("/",{
template:"<h1>内容部分</h1>"
}).when("/index",{
templateUrl:"index.html"
}).otherwise({
template:"<h2>这个是默认的模板哦</h2>"
});
}]);
如上，我们已经用when方法设置了两个路由。otherwise方法会在没有任何路由匹配时被调用，用它设置了一个默认的提示路由。可以看出来，这里有两中路由，一个路由是使用的模板，另一个是使用的模板路径，其实在路由中还有很多的属性可以配置，比如配置controller,
resolve,redirectTo.
在路由中配置控制器，如下：
mainApp.config(["$routeProvider",function($routeProvider){
$routeProvider.when("/",{
template:"<h1>内容部分</h1>",
controller:"MainController"
});
}]);
也可以写成这样
mainApp.config(["$routeProvider",function($routeProvider){
$routeProvider.when("/",{
template:"<h1>内容部分</h1>",
controller:function($scope){}
});
}]);
如果需要使用resolve,必须配置控制器，否则会报错，如果使用resolve属性，那么angularjs会将属性的键注入到配置的控制器中，使用如下：
mainApp.config(["$routeProvider",function($routeProvider){
$routeProvider.when("/",{
template:"<h1>内容部分{{name}}</h1>",
controller:"MainController",
resolve:{
name:function(){
return "张三";
}
}
});
}]);
列表对象可以是:
键：是注入到控制器中的名称
工厂：可以是一个服务工厂，也可以是一个返回值
在控制器中是这样获取上面注入的键
mainApp.controller("MainController",["name","$scope",function(name,$scope){
$scope.name=name;
}]);
redirectTo的使用，它的作用是做转发，如下：
mainApp.config(["$routeProvider",function($routeProvider){
$routeProvider.when("/",{
template:"<h1>内容部分{{name}}</h1>",
controller:"MainController",
resolve:{
name:function(){
return "张三";
}
},
redirectTo:"/index"
}).when("/index",{
templateUrl:"index.html"
});
}]);
如果访问的是第一个路由，因为里面配置了redirectTo属性，那么就会转到它所配置的路由上。
到这里路由的配置就算完成了，如果需要获取路由的参数，可以通过控制器来获取。
$routeParams：
可以使用它来获取路由参数，比如我们将路由配置成如下格式：
mainApp.config(["$routeProvider",function($routeProvider){
$routeProvider.when("/index/:name",{
templateUrl:"index.html"
});
}]);
那么访问的格式就是/index/zhangsan,这样通过控制器来获取的参数格式就是{"name":"zhangsan"},如下：
mainApp.controller("MainController",["$scope","$routeParams",function($scope,$routeParams){
$scope.name=$routeParams;
}]);
$location服务，可以用它来解析请求的URL中的相关信息，控制器使用如下：
mainApp.controller("MainController",["$scope","$<span style="font-family: Arial, Helvetica, sans-serif;">location</span>",function($scope,$<span style="font-family: Arial, Helvetica, sans-serif;">location</span>){
}]);
$location服务下有如下方法：
1.path();获取当前页面的路径，也可以设置一个新的路径path("/")，这样就修改为“/”的路由了
$location.path();//获取
$location.path("/");//设置
2.replace()
如果你希望跳转后用户不能点击后退按钮（对于登录之后的跳转这种发生在某个跳转之后的再次跳转很有用），AngularJS提供了replace()方法来实现这个功能：
$location.path('/home');
$location.replace();
// 或者
$location.path('/home').replace();
3.absUrl()
absUrl()方法用来获取编码后的完整URL：
$location.absUrl()
4.hash()
hash()方法用来获取URL中的hash片段：
$location.hash(); // 返回当前的hash片段
5. host()
host()方法用来获取URL中的主机：
$location.host();// 当前URL的主机
6. port()
port()方法用来获取URL中的端口号：
$location.port();// 当前URL的端口
7. protocol()
protocol()方法用来获取URL中的协议：
$location.protocol();// 当前URL的协议
8. search()
search()方法用来获取URL中的查询串：
$location.search();
我们可以向这个方法中传入新的查询参数，来修改URL中的查询串部分：
// 用对象设置查询
$location.search({name: 'Ari', username: 'auser'});
// 用字符串设置查询
$location.search('name=Ari&username=auser');
search方法可以接受两个参数。
search（可选，字符串或对象）
这个参数代表新的查询参数。hash对象的值可以是数组。
paramValue（可选，字符串）
如果search参数的类型是字符串，那么paramValue会做为该参数的值覆盖URL当中的对应
值。如果paramValue的值是null，对应的参数会被移除掉。
9. url()
url()方法用来获取当前页面的URL：
$location.url(); // 该URL的字符串
如果调用url()方法时传了参数，会设置并修改当前的URL，这会同时修改URL中的路径、
查询串和hash，并返回$location。
// 设置新的URL
$location.url('/home?name=Ari#hashthing');
url()方法可以接受两个参数。
url（可选，字符串）
新的URL的基础的前缀。
replace（可选，字符串）
想要修改成的路径。
AngularJs多重视图和路由的使用的更多相关文章
- [Angularjs]视图和路由（四）
写在前面 关于angularjs的路由的概念基本上这篇就要结束了,通过学习,以及在实际项目中的实践,还是比较容易上手的.自己也通过angularjs做了一个在app上的一个模块,效果还是可以的. 系列 ...
- [Angularjs]视图和路由（一）
写在前面 对单页应用来讲,视图和路由的作用可以从一个视图跳转到另外一个视图,可以合理管理用户在使用过程中看到的界面. 将视图分解成布局和模版视图,并且根据用户当前访问的URL来展示对应的视图,将会是一 ...
- [Angularjs]视图和路由（二）
写在前面 上篇文章主要介绍了视图和路由的基本概念,并在文章最后举了一个简单的使用案例.这篇文章将继续学习路由的配置,及相关参数的说明. 系列文章 [Angularjs]ng-select和ng-opt ...
- [Angularjs]视图和路由（三）
写在前面 上篇文章主要介绍了路由中when方法的第二个参数,常见的几个属性,以及作用.本篇文章,将介绍和路由相关的几个常见的服务. 系列文章 [Angularjs]ng-select和ng-optio ...
- AngularJS 视图和路由
在AngularJS之后引用angular-route 路由 ngRoute模块加载声明 AngularJS提供的when和otherwise两个方法来定义应用的路由 otherwise ...
- Django REST framework基础：视图和路由
DRF中的Request 在Django REST Framework中内置的Request类扩展了Django中的Request类,实现了很多方便的功能--如请求数据解析和认证等. 比如,区别于Dj ...
- Django Rest Framework 视图和路由
Django Rest Framework 视图和路由 DRF的视图 APIView 我们django中写CBV的时候继承的是View,rest_framework继承的是APIView,那么他们 ...
- DRF 视图和路由
Django Rest Feamework 视图和路由 DRF的视图 APIView 我们django中写CBV的时候继承的是View,rest_framework继承的是APIView,那么他们两个 ...
- Django框架的使用教程--视图和路由[二]
视图和路由 1.创建一个django_test应用 2.setting中设置django_test INSTALLED_APPS = [ 'django.contrib.admin', 'django ...
随机推荐
- 黑帽么metasploit
.Metasploit框架介绍Metasploit升级更新 Metasploit端口扫描 Metasploit SMB 获取系统信息 Metasploit 服务识别 Metasploit 密码嗅探 M ...
- 学习前端前必知的——HTTP协议详解
前端人士必备的知识点,无论你是否有经验,看了此文绝对有收获 此文针对前端爱好者,前端求职者(话说面试时很容易考到哦) 原文参考博客园http://kb.cnblogs.com/page/130970/ ...
- linux卸载rpm包
先查找要卸载的rpm包:比如cpp: #rpm -qa | grep cpp #rpm -e cpp-2.333x.x 如果提示有依赖,执行: #rpm -e cpp-2222 --nodeps
- android 5.0 -- 主题
系统提供默认的三种主题样式 @android:style/Theme.Material (dark version) @android:style/Theme.Material.Light (ligh ...
- Java线程的几种状态
一. 线程状态类型1. 新建状态(New):新创建了一个线程对象.2. 就绪状态(Runnable):线程对象创建后,其他线程调用了该对象的start()方法.该状态的线程位于可运行线程池中,变得可运 ...
- jdbc连接数据库的步骤
1.加载JDBC驱动程序: 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机), 这通过java.lang.Class类的静态方法forName(String classN ...
- Redis断线重连编码注意事项
应用在Redis重启.网络闪断并恢复正常后,应用必须能够自恢复,下面以Java语言的jedis客户端为例说明: 1.作为发布者 Jedis对象不能作为单例,网络闪断后该Jedis对象无法自恢复.应该每 ...
- 第六十三节，html表格元素
html表格元素 学习要点: 1.表格元素总汇 2.构建表格解析 本章主要探讨HTML5中表格元素的用法.表格的主要用途是以网格的形式显示二维数据. 一．表格元素总汇 ...
- 4、BufferedIn(out)putStream--->字节输入/输出流的缓冲区类（高效类：高效率读写）
前言 字节流一次读写一个数组的速度明显比一次读写一个字节的速度快很多,这是加入了数组这样的缓冲区效果,java本身在设计的时候,也考虑到了这样的设计思想(装饰设计模式后面讲解),所以提供了字节缓冲区流 ...
- jq选择器对象筛选
1.选择对象 1).基本 ·#id 根据给定的ID匹配一个元素.例如:$("#id")·element 根据给定的元素名匹配所有元素.例如:$("div")·. ...