AngularJS路由的简单配置

来源：互联网发布：网络销售股票就是聊天编辑：程序博客网时间：2024/05/16 18:05
<!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            .when("/",{template:"欢迎来到 主界面"})            .when("/user",{template:"您现在进入： 个人中心"})            .when("/car",{template:"您现在进入： 购物车"})            .when("/setting",{template:"您现在进入：设置"})            .otherwise({redirectTo:"/"});         }]);         app.controller("myCtrl",function($scope){                    });      </script>   </head>      <body ng-app="myApp" ng-controller="myCtrl">      <center>         <!-- 5.通过 #+ 标记访问路由 -->            <p style="line-height: 88px;">               <a href="#/">主界面</a>               <a href="#/user">个人中心</a>               <a href="#/car">购物车</a>               <a href="#/setting">设置</a>               <a href="#/other">其它</a>            </p>                     <!-- 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