今天给大家来说说AngularJS1.0的路由部分。。。。
在使用路由的这个功能的时候,需要引入AngularJS的angular-route这个文件。放在angular之后。因为angular-route.js需要传入window.angular这个参数,而这个参数只有在加载完angular才会出现
路由的概括:路由功能是由 routeProvider服务 和 ng-view 搭配实现,ng-view相当于提供了HTML模板的挂载点,当切换url进行跳转时,不同的页面模板会放在ng-view所在的位置; 然后通过 routeProvider 配置路由的映射。
一般主要通过两个方法:
when():配置路径和参数;
otherwise:配置其他的路径跳转。 可以参考下面代码:
<!DOCTYPE html>
<html ng-app="myApp" lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
</head>
<body ng-controller="myController">
<li>
<a href="#/">首页</a>
<a href="#/news">新闻</a>
<a href="#/music">music</a>
</li>
<ng-view></ng-view> <!--各个单页面的挂载点-->
</body>
</html>
JavaScript部分:
<script>
var app = angular.module('myApp', ['ngRoute']);
//需要注入$routeProvider
app.config(function ($routeProvider) {
console.log('$routeProvider:',$routeProvider);
//第一个参数:路由的地址
//第二参数:路由的对象
$routeProvider.when('/', {
template: '<div>首页</div>'
}).when('/news', {
template: '<div>新闻页</div>'
}).when('/music', {
template: '<div>音乐</div>'
}).when('/error', {
template: '<div>无法找到</div>'
}).otherwise({//当路由地址都无法匹配的时候,进入这个函数
redirectTo: '/error'//重定向
})
});
app.controller('myController', ['$scope', function ($scope) {
}])
</script>
结果显示为:
angularjs提供的route自身有很多不足之处,不能进行很多深层次的嵌套。所以,我们一般会引入angular-ui-router.js这个文件。这个文件提供了新的路由配置项;
如下面的代码:提供了$stateProvider和$urlRouterProvider两个属性。(代码仅供参考)
angular.module('myApp',['ionic','myApp.controller','myApp.service','ngResource'])
.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state('tabs',{
url:'/tabs',
templateUrl:'template/tabs.html',
controller:'tabsController'
})
$stateProvider.state('download',{
url:'/download',
templateUrl:'template/download.html',
controller:'loadController'
})
$urlRouterProvider.otherwise('/tabs')
})
路由的核心思想如下:
路由通过不同的路径,通过路由设置的view加载不同的页面,不同的页面加载不同的controller也达到不同的控制,说白了,路由就是给应用定义“状态”。使用路由的机制是需要站在一个全局的角度思考问题的,所以从整体的构架上面需要考虑的比较多,需要预先定义好状态。当然我这里也是简单的介绍一下路由,路由的状态名字后面也可以跟随一些参数,以对应不同的页面。实现更多的信息展示,比如在上面的url:‘/tabs:id’(后面跟随一些参数),根据参数的不同加载不同的信息,这就需要我们去后面请求不同的信息,这就需要我们的请求数据的代码了,这就是下面要讲的$http,这个代码需要的一些文件了。下一篇就讲一讲如何使用ngResource模块来实现。。。。。。。