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>

 

posted @ 2017-12-27 12:16  学亮编程手记  阅读(383)  评论(0)  编辑  收藏  举报