首页 > 代码库 > AngularJs的关于路由问题

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="http://www.mamicode.com/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="http://www.mamicode.com/#/">Index</a></li>
28         <li><a href="http://www.mamicode.com/#/tianmao">Tmall</a></li>
29         <li><a href="http://www.mamicode.com/#/taobao">Taobao</a></li>
30         <li><a href="http://www.mamicode.com/#/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="http://www.mamicode.com/#/">Index</a></li>
25         <li><a href="http://www.mamicode.com/#/tianmao">Tmall</a></li>
26         <li><a href="http://www.mamicode.com/#/taobao">Taobao</a></li>
27         <li><a href="http://www.mamicode.com/#/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>会显示路由的内容。

  在路由规则中还好多其他的参数,不过我在学习第二例子的时候,发现好复杂。可能有待修炼!

  时间有限,下次再补充。

 

AngularJs的关于路由问题