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