angular中路由的实现(针对新手)
最近搜了一下网上的教程,看完总感觉有点糊涂,对于新手来说可能云里雾里,所以写一个最简单的路由来给大家做个指引。
首先当然需要准备angular,下载地址:https://angular.io/
现在angular为了减轻自身大小,它将一些功能分离开来,所以路由还得自己导入一个angular-route.js的文件。
首先创建一个index.html文件,内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular/angular.js"></script>
<script src="angular/angular-route.js"></script>
</head>
<body ng-app="myRoute">
<div ng-view></div>
</body>
</html>
然后你还需要几个半成品的html文件,如list.html,city.html等。(只有所需要的标签,没有完整的html结构的文件)
list里的内容:
<div>
<span>我是list页面</span>
<a href="#city">上一页</a>
</div>
city里的内容:
<div>
<span>我是city页面</span>
<a href="#/list">下一页</a>
</div>
这时在script中写出如下代码即可:
var myRoute=angular.module('myRoute',['ngRoute']);
myRoute.config(function($routeProvider){
var cityconfig={
templateUrl:"view/city.html"
}
var listconfig={
templateUrl:"view/list.html"
}
$routeProvider.when('/city',cityconfig)
.when('/list',listconfig)
.otherwise({redirectTo:'/city'});
});
另外,一定要启用本地启用本地启用本地,重要的事情说三遍。
把其他功能去掉,只剩路由功能,是不是很好理解呢。