AngularJS 路由配置对象

最新推荐文章于 2024-04-21 21:26:48 发布

Dewey666

最新推荐文章于 2024-04-21 21:26:48 发布

阅读量359

点赞数

分类专栏：效果初现文章标签： AngularJS 路由配置对象 templateUrl controller .when redirectTo

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

版权

效果初现专栏收录该内容

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
             /* 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>

Dewey666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 路由配置对象

html>html> head> meta charset="UTF-8"> title>AngularJS 路由配置对象title> style type="text/css">/* 可以利用CSS的伪类实现： a:link，定义正常链接的样式； a:visited，定义已访问过链接的样式；
复制链接

扫一扫

专栏目录