angularjsl路由_AngularJS前端路由

原标题：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)!感谢大家的配合!返回搜狐，查看更多

责任编辑：