AngularJS 路由
route 路由
在AngularJS里面有两种方式实现路由，第一个是$location,第二个就是route。
在这里,我先介绍route模块.
由于AngularJS是模块化的，我们要引用路由，就需要先将这个包下载下来。
npm install angular-route --save
或者使用bower
bower install angular-route --save
之后,在我们的文件引入AngularJS-route.js文件,就可以使用route路由了.
由于route是一个单独的模块,我们想要使用,必须要在自己的模块中添加对ngRoute模块的依赖.
var app = angular.module('myApp', ['ngRoute']);
然后,我们需要通过config方法来配置.
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/a', {
controller: 'aController',
templateUrl: './a.html'
})
.when('/b', {
controller: 'bController',
templateUrl: './b.html'
})
.when('/c', {
controller: 'cController',
templateUrl: './c.html'
})
.otherwise({
redirectTo:'/a'
});
}]);
注意,上面的config也要注入一个对象,后缀也是Provider.
config里面注入的对象都要跟上Provider,即使后面有Provider.
when表示匹配,如果有对应的路由匹配上, 那么就会进入相应的控制器.
otherwise表示如果没有匹配到,就走'\a'.
下面是控制器代码:
app.controller('aController', ['$scope', function ($scope) {
$scope.msg = 'this is aController';
}])
app.controller('bController', ['$scope', function ($scope) {
$scope.msg = 'this is bController';
}])
app.controller('cController', ['$scope', function ($scope) {
$scope.msg = 'this is cController';
}])
注册了三个控制器(注意,这里的控制器不用在View里面通过ng-controller申明.
好了
现在我们需要在html文件里面加上ng-app指令和ng-view指令
注意:ng-view 指令是一个特殊的指令,它的作用是在html中给$route对应的视图占位.(ng-view是优先级为1000的终极指令,AngularJs不会运行作用在同一个指令上的其他指令.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-app="myApp">
<div ng-view></div>
</div>
<script src="./../angular.js"></script>
<script src="./../angular-route.js"></script>
<script src="index.js"></script>
</body>
</html>
下面是我的三个html文件
a.html
<h2>
{{msg}}
</h2>
b.html
<h2>
{{msg}}
</h2>
c.html
<h2>
{{msg}}
</h2>
好了,所有的文件都已经写好了,似乎已经可以打开了,我们试试
上面什么都没有显示!!
我们使用F12打开控制台
我们看到了关键字 XMLHttpRequest,这是一个ajax对象.
明白了,AngularJs加载a.html,b.html,c.html时通过ajax方式的,而File协议是不支持ajax方式的?
怎么办呢?
办法就是起一个Web服务器.
现在主流的IDE都会自动以http方式在浏览器中查看文件,比如,WebStorm,HBuilder,Sublime也有对应的插件. Sublime Server.
但遗憾的是,VScode没有,
VSCode通过
ext install view in-browser
安装插件可以打开浏览器,但也是file协议.
npmJs社区提供了一个Web服务器,叫做 http-server
可以通过npm方式安装.
npm install http-server -g
现在可以使用命令
hs -o[path]
打开一个服务,
注意: 虽然路径名是可选的,但是还是需要写上,因为这个在第一个启动的时候会记住url地址,以后虽然在别的路径下启动服务,还是只会跳转到第一个url上.
好了,
它会启动一个端口8080的服务,并会打开我的资源管理器(我资源管理器使用了clover插件).
然后我们在浏览器地址栏输入
http://127.0.0.1:8080/01route/index.html
注意: /表示网站根目录,一定要使用我上面开启服务的路径作为网站根目录.
它会默认跳转到http://127.0.0.1:8080/01route/index.html#/a 并打开
是不是欧了 哈哈哈哈
当然,你也可以不使用这种方式,使用IIS或者其它的Web服务器. 但是我太不喜欢IIS啦(其实我以前做ASP.NET过的... 囧),
嗯,虽然这么做可行,但是有一个弊端,看下面的图
它每次都要请求a.html,b.html,c.html,如果文件多起来,是不是很麻烦呢?
由于在html里面,script标签在html5中可以省略type="text/javascript",默认会作为JavaScript文件解析,但是我们我们声明为其他的类型,html就不会做为JavaScript解析了,而是一个普通的节点. AngularJs就是利用这个特点,实现了在一个页面上放置多个View.
看下面的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script id="a_html" type="text/ng-template">
{{msg}}
</script>
<script id="b_html" type="text/ng-template">
{{msg}}
</script> <script id="c_html" type="text/ng-template">
{{msg}}
</script>
</head>
<body>
<ul>
<li>
<a href="#/a">a视图</a>
</li>
<li>
<a href="#/b">b视图</a>
</li>
<li>
<a href="#/c">c视图</a>
</li>
</ul>
<div ng-app="myApp">
<div ng-view></div>
</div>
<script src="./../angular.js"></script>
<script src="./../angular-route.js"></script>
<script src="index2.js"></script>
</body>
</html>
js代码有稍微的变化
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/a', {
controller: 'aController',
templateUrl: './a_html'
})
.when('/b', {
controller: 'bController',
templateUrl: './b_html'
})
.when('/c', {
controller: 'cController',
templateUrl: './c_html'
})
.otherwise({
redirectTo:'/a'
});
}]);
app.controller('aController', ['$scope', function ($scope) {
$scope.msg = 'this is aController';
}])
app.controller('bController', ['$scope', function ($scope) {
$scope.msg = 'this is bController';
}])
app.controller('cController', ['$scope', function ($scope) {
$scope.msg = 'this is cController';
}])
下面看效果:
但是,有时候比如一个班级的信息统计,我需要查看每个同学的详细信息,比如 ..#/tom,那么还有#/linda,在这里如果为每个学生都写一个模板是不是太浪费了? 而且每个学生之间的信息模板都是相同的,不同的就是数据,而数据是可以通过控制器来提供的. 所以在这种情况下,只需要声明一个模板就并且只匹配一次.
看下面的代码:
index2.html
<!--/*
* @Author: Pawn.Hu
* @Date: 2016-08-14 13:48:39
* @Last Modified by: Pawn.Hu
* @Last Modified time: 2016-08-14 13:48:39
*/-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>
<a href="#/student/Tom">Tom</a>
</li>
<li>
<a href="#/student/Linda">Linda</a>
</li>
<li>
<a href="#/student/Taylor">Taylor</a>
</li>
</ul>
<div ng-app="myApp">
<div ng-view></div>
</div>
<script src="./../angular.js"></script>
<script src="./../angular-route.js"></script>
<script src="index2.js"></script>
</body>
</html>
这里申明了3个锚点
index2.js
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/student/:name', {
controller: 'studentController',
templateUrl: './student.html'
}).otherwise({
redirectTo: '/student/Tom'
});
}])
app.controller('studentController', ['$scope', '$routeParams', function ($scope, $routeParams) {
var name = $routeParams.name;
$scope.name = name;
}])
这里when方法第一个参数后面的冒号表示后面是一个路由参数.
注意: $routeProvider.when('/student/:name', { ... }) 这里when的后面还可以跟上一个?号,表示没有也能匹配成功,但是通常情况下不会跟otherwise合用.,而且AngularJS路由模块只有这两个特殊符号.
这里是student.html 模板
<h1>
{{name}}
</h1>
下面看效果
注意观察地址栏的变化.(我的书签就不用看了,都是没用的东西.
这就是AngularJS的路由基础,但是功能还是相对比较薄弱,
ui-router 这是一个独立的模块,并不包含在AngularJs中,可以进行嵌套路由和一些非常复杂的路由,会在后面介绍.
好了,关于AngularJS 基础的路由模块就介绍到这里,下面Angular路由(二) 我会介绍下$location服务和AngularJS路由架构,其实,在真正开发中,我们并不是按照上面的方式来使用路由.
希望能对你提供帮助.
