AngularJs多重视图和路由的使用
使用AngularJs来做多重视图和路由是在方便不过了,在开发过程中,都有许多的页面,而这些页面都有相同的部分,比如页面的头部和尾部通常都是一样的,变化的都是主体部分,还有就是一些后端管理的一些项目,通常不变的都是头部,尾部和菜单部分,变化的都是右边的内容部分,使用AngularJs的多重视图和路由就可以很方便的实现这样的效果。在实现之前需要准备两个文件,一个是angular的主JS文件,另一个是angular的路由JS文件,如下:
<script src="js/angular.min.js"></script> <script src="js/angular-route.min.js"></script>
1.创建一个简单的布局文件
2.创建一个模块,可以写在当前的布局文件中也可以新开一个js文件,为了方便管理还是分开好点
3.创建路由规则
4.如果有用到控制器,再创建控制器
接下来就具体来实现这个效果:
1.
<!DOCTYPE html> <html data-ng-app="main.app"> <head lang="zh-CN"> <meta charset="UTF-8"/> <script src="js/angular.min.js"></script> <script src="js/angular-route.min.js"></script> <title></title> </head> <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(可选,字符串)
想要修改成的路径。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。