AngularJS路由使用案例


AngularJS路由使用案例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>AngularJS路由使用案例</title>
 6         <script type="text/javascript" src="../js/angular.min.js"></script>
 7         <script type="text/javascript" src="../js/angular-route.min.js"></script>
 8     </head>
 9     <body ng-app="myapp">
10         <div>
11             <h1>在你我他學習吧,你可以學習到如下技術:</h1>
12             <a href="#/JAVAEE"></a>
13             <a href="#/AngularJS"></a>
14             <a href="#/EasyUI"></a>
15             <a href="#/MySQL"></a>
16         </div>
17         <!--路由加載后,更新變化的內容-->
18         <div ng-view></div>
19         <div>
20             <h1>footer</h1>
21         </div>
22     </body>
23     <script type="text/javascript">
24         //定義myapp模塊
25         var myapp = angular.module("myapp",["ngRoute"]);
26         //配置模塊的路由
27         myapp.config(["$routeProvider",function($routeProvider){
28             $routeProvider.when('/JAVAEE',{
29                 templateUrl:'javaee.html'
30             }).when('/AngularJS',{
31                 templateUrl:'angularjs.html'
32             }).when('/EasyUI',{
33                 templateUrl:'easyui.html'
34             }).when('/MySQL',{
35                 templateUrl:'mysql.html'
36             }).otherwise({
37                 redirectTo:'JAVAEE'
38             });
39         }]);
40     </script>
41 </html>

 

javaee.html代碼:

<h1>javaee</h1>

 

angularjs.html代碼:

<h1>angular</h1>

 

easyui.html代碼:

<h1>easyui</h1>

 

mysql.html代碼:

<h1>mysql</h1>

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com