初学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>会显示路由的内容。
在路由规则中还好多其他的参数，不过我在学习第二例子的时候，发现好复杂。可能有待修炼！
时间有限，下次再补充。