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'});
    });  

另外,一定要启用本地启用本地启用本地,重要的事情说三遍。

把其他功能去掉,只剩路由功能,是不是很好理解呢。 

posted on 2016-08-05 17:49  Mr.J先生  阅读(334)  评论(0编辑  收藏  举报