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

AngularJs的关于路由问题

2024-09-02 13:46:06   222人阅读

　　初学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的关于路由问题


联系
我们