AngularJS路由的简单配置

最新推荐文章于 2018-04-16 11:32:53 发布

Dewey666

最新推荐文章于 2018-04-16 11:32:53 发布

阅读量457

点赞数

分类专栏：效果初现文章标签： AngularJS路由 ngRoute template .when redirectTo

本文链接：https://blog.csdn.net/IT666DHW/article/details/78272340

版权

效果初现专栏收录该内容

108 篇文章 3 订阅

订阅专栏

<!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>