AngularJS 路由配置对象

来源：互联网发布：脸书注册网络错误编辑：程序博客网时间：2024/06/04 23:27
<!DOCTYPE html><html>   <head>      <meta charset="UTF-8">      <title>AngularJS 路由配置对象</title>      <style type="text/css">/*       可以利用CSS的伪类实现：         a:link，定义正常链接的样式；          a:visited，定义已访问过链接的样式；          a:hover，定义鼠标悬浮在链接上时的样式；          a:active，定义鼠标点击链接时的样式。  */         a{            text-decoration:none;          }         a:link{             color:black;          }          a:visited {             color:green;          }          a:hover {             color:red;          }          a:active {             color:peru;          }       </style>      <!-- 1.导入AngularJS库文件 -->      <script type="text/javascript" src="../js/angular.js" ></script>      <!-- 2.导入AngularJS路由支持文件（必须放在AngularJS库文件下面） -->      <script type="text/javascript" src="../js/angular-route.js" ></script>      <script>         /* 3.在AngularJS应用模块中注入路由 ngRoute (单引号''或双引号""都可以) */         var  app = angular.module("myApp",['ngRoute']);                  /* 4.在config()函数中配置路由规则: */         app.config(["$routeProvider",function($routeProvider){            $routeProvider             /* 4.1 template:需要在 ng-view 中插入的简单 HTML 内容； */            .when("/",{template:"欢迎进入 主页面"})            .when("/first",{               templateUrl:"first.html",               controller:"firstCtrl"            })            .when("/second",{               /* 4.2 templateUrl：需要在 ng-view 中插入的 HTML 模板文件  */               templateUrl:"second.html",               /* 4.3 controller: function、string或数组类型.在当前模板上执行的controller函数，生成新的scope对象。               每个页面都会有一个独立的控制器，加载页面的同时会执行控制器中的函数。 */               controller:"secondCtrl"            })                        /* 4.4 redirectTo:重定向的地址。 */            .otherwise({redirectTo:"/"});         }]);         app.controller("myCtrl",function($scope){                    });                  //为first.html页面创建一个控制器         app.controller("firstCtrl",function($scope){            $scope.firstName = "孩子";         });         //为second.html页面创建一个控制器         app.controller("secondCtrl",function($scope){            $scope.secondName = "小伙子";            $scope.result = "OUT";         });      </script>   </head>      <body ng-app="myApp" ng-controller="myCtrl">      <center>         <!-- 5.通过 #+ 标记访问路由 -->            <p style="line-height: 88px;">               <a href="#/">主界面</a>               <a href="#/first">第一页</a>               <a href="#/second">第二页</a>            </p>                        <!-- 显示内部页面 -->            <script type="text/ng-template" id="first.html">               <h3>{{firstName}}  这是第一页面，恭喜你，闯关成功</h3>            </script>                        <script type="text/ng-template" id="second.html">               <h3>{{secondName}}  这是第二页面，抱歉，你被{{result}}了</h3>            </script>                     <!-- 6.通过 ng-view指令 设置路由显示页面 ng-view指令不赋值也可用-->            <div ng-view style="background-color:aquamarine;width: 558px; height: 288px; border: solid 1px blueviolet;line-height: 258px;">                           </div>             </center>   </body></html>
阅读全文
0 0