原标题:AngularJS前端路由
Hello大家好,继前两篇文章中我们了解了什么是AngularJS以及AngularJS的表单验证,今天源码时代H5学科讲师跟大家再来谈谈AngularJS的单页面前端路由及其用法。
现在越来越多的网站都用到了前端路由,那它和多页面跳转及传统开发有什么区别呢,我们为什么要用单页面路由呢?
在传统开发中,我们点击一个链接跳转到一个新的页面,这个跳转地址相当于一个二级地址。而路由的跳转并不是跳转到一个新的页面,而是在当前的页面进行跳转,相当于是在一个页面内跳转,使得前端页面体验更流畅。所有的交互和展现在一个页面运行以达到减少服务器请求,提高客户体验的目的。
接下来我们从一个简单的单页面跳转来看看单页面应用倒地怎么用。
首先我们得加载angular的主文件:
< src="https://cdn.bootcss.com/angular.js/1.3.19/angular.min.js">>
其次我们要加载angular的对应版本的路由插件:
< src="https://cdn.bootcss.com/angular.js/1.3.19/angular-route.js">>
注意:对应版本(!)
申明根元素:
接下来在项目中引入路由这个插件:
< type="text/java">
var route = angular.module('myApp',['ngRoute']);
route.controller('mytest',['$scope',function($scope){
}]);
>
另外确定路由区域:
其中'ng-view'这个指令是和'ngRoute'相互呼应的,只有引入了路由这个插件,'ng-view'这个指令才会生效。他实际的功效相当于圈(div)了一块儿地出来,作为路由结果的展示。即路由只控制这块地上倒地展示哪一个文件(div)中的内容。
接下来就来完成类似于这样的功能
在body中准备路由导航项
这里我们简单列出了三个导航项,跳转地址分别是’#1’,’#2’,’#3’,对应首页、商城和列表。当然你还可以列出更多。此处需要注意的是前面的‘#’不能忽略。
对应路由设置为:
var route = angular.module('myApp',['ngRoute']);
route.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/1',{
template:'
我的首页
'})
.when('/2',{
template:'
我的商城
'})
.when('/3',{
template:'
商城列表
'})
// 初始化默认路径
.otherwise({
redirectTo:'/1'
});
}]);
其中的‘template’可由‘templateUrl’替代,条件是当我们跳转的内容不是本文中所用的一个简单的h1标签,而是一个复杂的页面或区块。
看看效果图:
你们可能发现,当用户进入网页时,显示区域并没有内容呈现,故我们下面给网页一个默认路由的操作。
// 初始化默认路径
.otherwise({
redirectTo:'/1'
});
这样用户进入页面时,即默认页面即我们的路径为‘1’的首页。界面如下:
至此,一个基本的路由就已经搭建好了。
附源码如下:
本文章由源码时代H5前端学科讲师原创!转载须注明出处(http://www.itsource.cn)!感谢大家的配合!返回搜狐,查看更多
责任编辑: