初学AngularJs一些天，发现AngularJs到最后的时候会很难。刚刚开始的时候特别不容易适应，到中间的部分，还是比较简单，到最后的时候就发现特别难。我看到了网站上说到了AngularJs中，学习路线是比较奇怪的，有些诡异。我想想不知道是不是对的。今天我在学习AngularJs路由知识点的时候，遇到了一些问题，就是路由不到。以下是刚刚开始写的代码。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>AngularJs路由应用</title>
6 <script src="js/angular.min.js"></script>
10 <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js">
11 </script>
12 <script type="text/javascript">
13 var app=angular.module(‘routeDemoApp‘,[‘ngRoute‘]);
14 app.config([‘$routeProvider‘,function($routeProvider){
15 $routeProvider
16 .when(‘/‘,{template:‘this is index!‘})
17 .when(‘/tianmao‘,{template:‘this is Tmall‘})
18 .when(‘/taobao‘,{template:‘this is taobao‘})
19 .otherwise({redirectTo:‘/‘});
20 }]);
21 </script>
22 <!-- $routeProvider 用来定义路由规则 -->
23 </head>
24 <body ng-app="routeDemoApp">
25 <h1>AngularJS 路由应用</h1>
26 <ul>
27 <li><a href="#/">Index</a></li>
28 <li><a href="#/tianmao">Tmall</a></li>
29 <li><a href="#/taobao">Taobao</a></li>
30 <li><a href="#/blabla">其他</a></li>
31 </ul>
32 <div ng-view></div>
36 </body>
37 </html>
使用AngularJs是1.6.1版本，而我在一个菜鸟学习网站上用的是1.4版本的。
刚刚开始的时候，我以为是代码出现了问题，仔细检查之后发现，脚本和HTML都没啥问题。经过排除法，发现是AngularJs出现了问题。如果是代码不正确的话，后台最起码会报个错，可是后台也没有提示出现什么错误。很诡异誒。当时想想要不是慢慢排除，也不知道会是版本的问题。至于为什么是版本的问题，我觉得还是有必要去深入了解一下的。可是百度之后也没有发现什么比较有价值的线索。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>AngularJs路由应用</title>
6 <!-- <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> -->
7 <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js">
8 </script>
9 <script type="text/javascript">
10 var app=angular.module(‘routeDemoApp‘,[‘ngRoute‘]);
11 app.config([‘$routeProvider‘,function($routeProvider){
12 $routeProvider
13 .when(‘/‘,{template:‘this is index!‘})
14 .when(‘/tianmao‘,{template:‘this is Tmall‘})
15 .when(‘/taobao‘,{template:‘this is taobao‘})
16 .otherwise({redirectTo:‘/‘});
17 }]);
18 </script>
19 <!-- $routeProvider 用来定义路由规则 -->
20 </head>
21 <body ng-app="routeDemoApp">
22 <h1>AngularJS 路由应用</h1>
23 <ul>
24 <li><a href="#/">Index</a></li>
25 <li><a href="#/tianmao">Tmall</a></li>
26 <li><a href="#/taobao">Taobao</a></li>
27 <li><a href="#/blabla">其他</a></li>
28 </ul>
29 <div ng-view></div>
30 </body>
31 </html>
解释一些代码：
1 var app=angular.module(‘routeDemoApp‘,[‘ngRoute‘]);
首先定义一个应用程序，使用了路由的模型，所以在定义的时候，‘ngRoute’。这个模型是路由，也可以直接在body定义。不过这样定义比较方便吧，根据我最近学习，上次学到AngularJs动画的时候，也是有动画模型。
然后，AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义的路由规则。
$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:
- 第一个参数是 URL 或者 URL 正则规则。
- 第二个参数是路由配置对象。
<div ng-view></div>会显示路由的内容。
在路由规则中还好多其他的参数，不过我在学习第二例子的时候，发现好复杂。可能有待修炼！
时间有限，下次再补充。