最近搜了一下网上的教程，看完总感觉有点糊涂，对于新手来说可能云里雾里，所以写一个最简单的路由来给大家做个指引。

首先当然需要准备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'});
    });

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

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

最新文章

  1. PropertyGrid控件由浅入深(二)：基础用法
  2. HttpURLConnection类
  3. 20161023 NOIP 模拟赛 T2 解题报告
  4. android 画虚线,虚线圆
  5. MongoDB学习：（一）MongoDB安装
  6. Kafka主要参数详解（转）
  7. POJ1182食物链 （并查集）
  8. Java基础知识强化43：StringBuffer类之StringBuffer和String的相互转化
  9. USACO sprime
  10. 被DDOS攻击的解决方法
  11. C/C++ 对优先级与结合性的理解
  12. hibernate学习（四）hibernate的一级缓存&amp;快照
  13. JAVA中接口的使用
  14. 前端笔记-jquery
  15. ”危险“的restrict与GCC的编译优化
  16. 论文阅读笔记三十八：Deformable Convolutional Networks（ECCV2017）
  17. jQuery入门基础（动画效果）
  18. 注册ActiveX控件
  19. Android如何实现点击一次返回键返回桌面而不是退出应用
  20. 【python-opencv】22-直方图

热门文章

  1. cookie 详解 与 封装 实用的cookie
  2. 在.NET项目中使用PostSharp，实现AOP面向切面编程处理
  3. 通过代码在eclips中添加Maven Dependencies依赖包的简单方法
  4. 使用mysql_Front链接mysql，出现警告access denied for user &#39;&#39;@&#39;localhost&#39;
  5. spring项目中dubbo相关的配置文件出现红叉的问题
  6. js高程(二)-----继承
  7. 【SF】开源的.NET CORE 基础管理系统系列导航
  8. Win10下 VS2017 安装失败 未能安装包“Microsoft.VisualStudio.AspNet45.Feature,version=15.0.26208.0”
  9. iOS开发之计算文字尺寸
  10. 如何用Android Studio查看build.gradle源码