devbox
Li_阴宅
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

AngularJS总结_在angularjs中,视图指【】编写的页面,在【】中编写业务代码。

作者：Li_阴宅 | 2024-07-24 11:48:45

赞

踩

在angularjs中,视图指【】编写的页面,在【】中编写业务代码。
        AngularJS是一个基于MVC处理模式，实现了MVVM数据的双向绑定的用于开发动态web项目的框架，

以其数据和展现分离、MVVM、MVC、DI等强大的特性活跃于前端开发市场，是前端敏捷开发使用的主流的必须掌握的框架之一。它包括有控制器、指令、过滤器、自定义过滤器、服务、自定义服务等等重要内容。

        AngularJS的重要性：AnuglarJS是前后端分离软件架构模型下，前端业务处理的解决方案！

AngularJS是web应用前端的一个完整的解决方案，框架不仅提供了优雅的DOM操作和基于Ajax的数据交互技术，同时进行了良好的结构整理和常规的业务逻辑处理的封装，使得Angular构建的应用能够灵活的适应不同的项目场景。

注意：AngularJS中提供了如下的解决方案用以前端开发：数据双向绑定、基本模板指令、自定义指令

、表单验证、路由操作、依赖注入、过滤器、内置服务、自定义服务、组件、模块。

补充：

外链：AngularJS官方网站:http://angularjs.org;AngularJS代码下载:http://code.angularjs.org;

AngularJS官方教程:https://code.angularjs.org/1.6.4/docs/tutorial ;

AngularJS官方开发向导:https://code.angularjs.org/1.6.4/docs/guide ;

AngularJS官方API:https://code.angularjs.org/1.6.4/docs/api;

案列：实现购物车功能：

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">   <!--加载一个根模块-->
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>购物车</title>
  6.     <link rel="stylesheet" href="js/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  7.     <script src="js/lib/AngularJS/angular.min.js"></script>
  8.     <style>
  9.         .container{margin:50px auto;border:1px solid #ccc;width:1200px;height:600px;}
  10.         .container .row .header h2{text-align:center;color:#f00;}
  11.         input{width:40px;text-align:center;}
  12.     </style>
  13. </head>
  14. <body>
  15. <div  class="container" ng-controller="myCtrl">
  16.     <div class="row">
  17.         <div class="header">
  18.             <h2>淘宝购物车</h2>
  19.         </div>
  20.     </div>
  21.     <div class="row">
  22.         <div class="col-md-8 col-md-offset-2">
  23.             <table class="table table-hover table-strped">
  24.                 <tr style="background:#ff0;">
  25.                     <th >商品序号</th>
  26.                     <th>商品名称</th>
  27.                     <th>单价</th>
  28.                     <th>数量</th>
  29.                     <th>小计金额</th>
  30.                     <th>操作</th>
  31.                 </tr>
  32.                 <tr ng-repeat="goods in goodses">
  33.                     <td>{{goods.goodsID}}</td>
  34.                     <td>{{goods.goodsName}}</td>
  35.                     <td>￥{{goods.goodsPrice}}</td>
  36.                     <td><input type="text" ng-model="goods.count"></td>
  37.                     <td>￥{{goods.goodsPrice * goods.count}}</td>  <!--小计金额-->
  38.                     <td >
  39.                         <a href="javascript:;" ng-click="del($index)">删除</a>   <!--单击事件-->
  40.                     </td>
  41.                 </tr>
  42.             </table>
  43.         </div>
  44.     </div>
  45.     <div class="row">
  46.         <div class="col-md-8 col-md-offset-2">
  47.             <div class="panel panel-default">
  48.                 <div class="panel-body text-left">
  49.                     总计金额：<span>￥{{total()}}</span> 
  50.                     运费金额：<span>￥{{freight()}}</span>  
  51.                     实际金额：<span>￥{{priceAll()}}</span> 
  52.                     <span><a href="javascript:;" ng-click="delall($index)">清空购物车</a></span>
  53.                 </div>
  54.             </div>
  55.         </div>
  56.     </div>
  57. </div>
  58. <script>
  59.     var app = angular.module("myApp",[]); //定义一个模块
  60.     app.controller("myCtrl",function($scope){  //定义控制器
  61.         $scope.goodses = [  //后端借口返回的json数据
  62.             {goodsID:1, goodsName:"商品A", goodsPrice:12.00, count:1, subtotal:12.00},
  63.             {goodsID:2, goodsName:"商品B", goodsPrice:44.00, count:1, subtotal:44.00},
  64.             {goodsID:3, goodsName:"商品C", goodsPrice:12.00, count:1, subtotal:12.00},
  65.             {goodsID:4, goodsName:"商品D", goodsPrice:55.00, count:1, subtotal:55.00},
  66.             {goodsID:5, goodsName:"商品E", goodsPrice:89.00, count:1, subtotal:89.00},
  67.             {goodsID:6, goodsName:"商品F", goodsPrice:140.00, count:1, subtotal:140.00},
  68.             {goodsID:7, goodsName:"商品G", goodsPrice:144.00, count:1, subtotal:144.00},
  69.             {goodsID:8, goodsName:"商品H", goodsPrice:135.00, count:1, subtotal:135.00},
  70.             {goodsID:9, goodsName:"商品I", goodsPrice:240.00, count:1, subtotal:240.00},
  71.         ];
  72.         //删除：
  73.         $scope.del = function(index){
  74.             $scope.goodses.splice(index,1);
  75.         }
  76.         //清空购物车：
  77.         $scope.delall = function(index){
  78.             $scope.goodses=[ ];
  79.         }
  80.        //总计金额：
  81.         $scope.total = function(){
  82.             var allPrice = 0; //计算前先清空为0
  83.             for(var i = 0; i < $scope.goodses.length; i++){
  84.                 allPrice += $scope.goodses[i].goodsPrice * $scope.goodses[i].count;
  85.             }
  86.             return allPrice;
  87.         }
  88.         //运费金额：
  89.         $scope.freight = function(){
  90.             var allPrice = 0;
  91.             var freightPrice = 0;
  92.             for(var i = 0; i < $scope.goodses.length; i++){
  93.                 allPrice += $scope.goodses[i].goodsPrice * $scope.goodses[i].count;
  94.             }
  95.             if( allPrice < 100){   //运算判断
  96.                 freightPrice = 10;
  97.             }else if(allPrice > 100 || allPrice <=200){
  98.                 freightPrice = 20;
  99.             }else if(allPrice > 200 ||allPrice <=500){
  100.                 freightPrice = 30;
  101.             }else{
  102.                 freightPrice = 0;
  103.             }
  104.             return  freightPrice;
  105.         }
  106.         //实付金额：
  107.         $scope.priceAll = function(){
  108.             var allPrice = 0;
  109.             var freightPrice = 0;
  110.             var priceto = 0;
  111.             for(var i = 0; i < $scope.goodses.length; i++){
  112.                 allPrice += $scope.goodses[i].goodsPrice * $scope.goodses[i].count;
  113.             }
  114.             if( allPrice < 100){
  115.                 freightPrice = 10;
  116.                 priceto =  allPrice +  freightPrice;
  117.             }else if(allPrice > 100 || allPrice <200){
  118.                 freightPrice = 20;
  119.                 priceto =  allPrice +  freightPrice;
  120.             }else if(allPrice > 200 ||allPrice < 500){
  121.                 freightPrice = 30;
  122.                 priceto =  allPrice +  freightPrice;
  123.             }
  124.             return priceto;
  125.         }
  126.     });
  127. </script>
  128. </body>
  129. </html>
通过这个案列可以看出一些在AngularJS应用中，对传统的HTML进行了扩展，增加并强化了HTML

的功能，从入口属性ng-app(指令)开始加载应用，并逐行编辑解释这些扩展的内容。遇到input标签中的

属性ng-model(指令)，就会将它的值当成一个变量进行处理，遇到{{}}这样的结构，就会将括号中的值当

成表达式进行处理。(注意：mustache语法，通过两个大括号来包含一个表达式的结构,Angular会对

mustache语法进行编译并解释成可以运算的表达式进行处理)。

AngularJS就是因为对传统的HTML进行了功能的扩展，所以在一定程度上，实现了软件开发过程中

前后端的架构级别的分离——也就是软件前后端分离架构模型。同时将前端的内容展示、业务功能处理、

数据交互有组织的进行了规划，让前端HTML更加适合如今的企业级平台的web软件开发。

AngularJS中专业术语的表述：

模板template

包含了Angular特殊扩展标记的HTML代码

指令directive

扩展的HTML代码，自定义的标签、属性等等

模型model

保存在JS中，用来和用户交互的数据

作用域scope

模型数据在HTML页面中产生作用的范围

表达式expression

AngularJS在HTML页面中可以运算的语法

编译器compiler

被用来解释HTML代码中的Angular代码

过滤器filter

对HTML页面中输出的数据进行指定格式展示

视图view

统称用户看到的HTML视图页面

数据绑定data binding

JS中特定的数据和HTML页面上的数据的关联关系

控制器controller

给视图view提供功能支持的东东

依赖注入

dependency injection

Angular自动创建对象并传递对象的一种方式

注入器

injector

专门用来实现依赖注入（DI）的容器

模块module

Angular用来对项目进行最高层次封装的东东

服务service

Angular用来对视图view提供业务功能支持的东东

组件component

用于对网页的公共部分进行封装重用的Angular代码

通常会包含模板、指令、服务等等

AngularJS中的引导程序：
任何应用程序，运行过程中都会有一个运行的入口。AngularJS应用程序也是一样，正常情况下，

引导Ag应用的入口程序有两种：(1) ng-app指令;(2)bootstrap手工引导;常规模式下，是通过ng-app指

令引导Angular应用进行工作的。网页中引入Angular之后，程序运行时会自动查找ng-app指令并从

这个入口开始加载编译并解释执行。

代码：通常，页面中会定义ng-app熟悉来指定入口，在script中通过angular的module来加载ng-app

指定的模块：

  1. <html ng-app=”myApp”>
  2. <script>
  3.     angular.module(“myApp”, []);
  4. </script>
  5. </html>

代码：某些特殊情况下，也可以通过脚本来动态控制加载启动Angular应用，通过angular.bootstrap

(dom, module)来启动应用：

  1. <html>
  2. <div id=”myDiv”></div>
  3. <script>
  4.     angular.module(“myApp”, []);
  5.     var _div = document.getElementById(“myDiv”);
  6.     angular.bootstrap(_div, “myApp”);
  7. </script>
  8. </html>
基础语法结构：

1>指令：

什么是指令?

指令：就是扩展了HTML的基本功能，通过额外的标签、属性来增强HTML功能。AngularJS的指令正在

页面中体现出来就是一个标签/属性/class名称/注释等等。

常见的指令，按照指令的功能可以划分为五大类：

1、控制指令，用于ANGULAR应用程序加载流程控制；

2、渲染之令，用于ANGULAR将数据在网页中进行展示/隐藏处理；

3、节点指令，用于ANGULAR对标签、属性、样式、内容进行处理的指令；

4、事件之令，用于处理常规事件操作的指令；

5、其他指令。。。。。。。

（1）基本指令：

ng-app=”myApp”:程序运行的入口，通过名称绑定一个模块；

ng-init:用于在程序运行的过程中，初始化一些变量的数据的操作 ;

ng-model=”param”:数据绑定的指令，主要用于表单元素上的数据绑定；

ng-bind:数据绑定的指令，用于将变量的数据显示到页面上，用于替代mustache语法的；

ng-controller:控制器指令，用于在页面中指定控制器作用范围，通常作为属性出现；

ng-[event]:事件指令，用于在页面中发生某些事件时调用指令的函数；

控制指令：
>  ng-app
     用于定义Angular应用入口的指令，用于[自动引导]Angular程序的运行
     在定义应用程序运行入口的同时，可以绑定一个DOM元素
     DOM元素的开始标签和结束标签之间~就可以认为是模块的作用范围

     Angular通过ng-app指令，实现自动引导程序运行，底层是通过
     bootstrap()进行模块DOM元素加载，开始运行！

     ng-app 没有模块，可以引导Angular运行吗？
     <html ng-app>
         // angular引用可以运行吗？可以运行
         Angular会将页面中出现的支持的语法进行解释运行！
         >>但是不能使用模块控制器中定义的/挂载的数据，超出了作用范围！
     ng-app="模块名称"
         该模块就会作为Angular的根模块出现，整个作用范围中，页面View和数据Model可以进行无缝交互！

     </html>
>  ng-controller
     模块中，可以给模块挂载一个或者多个控制器
     挂载好的控制器在当前模块范围内，可以通过ng-controller指令来指定控制器的作用范围

   目前常规控制器的做法：
      先声明模块
         模块下挂载控制器>>> 控制器的作用范围仅限于当前模块！>>>局部控制器
   Angular1.2版本以前
     控制器的定义，是直接通过全局函数来实现的
     //控制器：全局控制器
     function ctrl($scope) {
         $scope.name = "tom";//挂载数据
     }
     全局控制器的意思，是可以在网页中任意地方通过ng-controller进行注册
     全局控制器造成了全局数据污染~！所以Angular在1.2版本以后进行了彻底修改
     废弃了全局控制器~ 而是提倡使用挂载在模块下的局部控制器！来更好的控制数据！
代码：
 
  1.  <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>  
  6.  <script src="js/lib/AngularJS/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <!-- 控制器 -->
  10. <div ng-app="myApp">
  11.     <div ng-controller="myCtrl">
  12.         <div>局部控制器范围：<span ng-bind="greeting"></span></div>
  13.     </div>
  14.     <div ng-controller="myCtrl2">
  15.         <div>局部控制器范围：<span ng-bind="greeting"></span></div>
  16.     </div>
  17. </div>
  18. <div id="myApp2">
  19.     <div ng-controller="myApp2Ctrl">
  20.         <div>局部控制器App2范围：<span ng-bind="hello"></span></div>
  21.     </div>
  22.     <div ng-controller="myCtrl2">
  23.         <div>局部控制器范围：<span ng-bind="greeting"></span></div>
  24.     </div>
  25. </div>
  26. <script>
  27.     var app = angular.module("myApp", []);
  28.  
  29.     app.controller("myCtrl" , ["$scope", function($scope){
  30.         $scope.greeting = "hello ng-app!"
  31.     }]);
  32.     app.controller("myCtrl2" , ["$scope", function($scope){
  33.         $scope.greeting = "hello ng-app!"
  34.     }]);
  35.  
  36.     var app2 = angular.module("myApp2", []);
  37.  
  38.     app2.controller("myApp2Ctrl", ["$scope",function($scope) {
  39.         $scope.hello = "my app2 ctrl value!";
  40.     }]);
  41.  
  42.     var _mp2 = document.getElementById("myApp2");
  43.     angular.bootstrap(_mp2, ["myApp2"]);
  44. </script>
  45. </body>
  46. </html>
渲染指令：
    指令的作用就是将数据，渲染展示到页面上【底层是封装了DOM操作】
* ng-repeat 循环渲染指令
* ng-bind 变量渲染指令，mustache语法的替代写法
ng-repeat循环渲染指令
    属性直接写在要循环的标签上！
    u in users u和users就会被Angular解释成变量，获取变量中的值进行处理

ng-bind-html
    这个指令，类似于原生JS的innerHTML
    但是使用的时候一定要慎重，对于它修饰的内容，必须确保安全性
    如果内容的来源不确定，不要使用编译html标签的属性或者函数>>>XSS攻击
ng-include 包含页面指令
    类似于JQuery 中的load()函数，用于加载其他页面

代码： 

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>渲染指令</title>
  6.     <script src="js/lib/AngularJS/angular.min.js"></script>
  7.     <script src="js/lib/AngularJS/angular-sanitize.min.js"></script>
  8. </head>
  9. <body>
  10. <div ng-controller="myCtrl">
  11.     <h3>ng-repeat</h3>
  12.     <ul>
  13.         <li ng-repeat="u in users">
  14.             <span ng-bind="$index+1"></span>****
  15.             <span ng-bind="$first"></span>****
  16.             <span ng-bind="$last"></span>****
  17.             <span ng-bind="$middle"></span>****
  18.             <span ng-bind="$even"></span>****
  19.             <span ng-bind="$odd"></span>****
  20.  
  21.             <span ng-bind="u.userID"></span>****
  22.             <span ng-bind="u.username"></span>****
  23.             <span ng-bind="u.nickname"></span>
  24.         </li>
  25.     </ul>
  26.     <hr/>
  27.     <!--
  28.         ng-bind
  29.     -->
  30.     <h3>ng-bind</h3>
  31.     <div ng-bind="content"></div>
  32.     <div ng-bind="12 * 12"></div>
  33.     <div ng-bind="true && false"></div>
  34.     <div ng-bind="12 > 10"></div>
  35.     <!--<div ng-bind="alert('这是一个JS代码')"></div>-->
  36.     <hr/>
  37.     <h3>ng-bind-html</h3>
  38.     <div ng-bind-html="content"></div>
  39.     <div ng-bind-html="12 * 12"></div>
  40.     <div ng-bind-html="true && false"></div>
  41.     <div ng-bind-html="12 > 10"></div>
  42.     <hr>
  43.     <div ng-include="/index2_xss.html"></div>
  44.     **
  45.     <ng-include src="/index2_xss.html"></ng-include>
  46. </div>
  47. </body>
  48. <script>
  49.     var app = angular.module("myApp", ['ngSanitize']);
  50.     app.controller("myCtrl", ["$scope", function ($scope) {
  51.         $scope.users = [
  52.             {userID: 10001, username: "cat", nickname: "tom"},
  53.             {userID: 10002, username: "mouse", nickname: "jerry"},
  54.             {userID: 10003, username: "mouse", nickname: "shuke"},
  55.             {userID: 10004, username: "mouse", nickname: "beita"}
  56.         ];
  57.         $scope.content = "<p>这是一段内容</p>";
  58.     }]);
  59. </script>
  60. </html>

节点指令：主要用于标签、样式、属性、内容的操作
代码： 

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/lib/AngularJS/angular.min.js"></script>
  7.     <style>
  8.         .default{
  9.             font-size:16px;
  10.             color:#888;
  11.         }
  12.         .sky {
  13.             font-size:18px;
  14.             color:#2aabd2;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. <div ng-controller="myCtrl">
  20.     <h2>ng-switch 请参考 js中的switch-case</h2>
  21.     <!--
  22.         ng-switch **> switch()
  23.             ng-switch-when  **> case:
  24.             ng-switch-default **> default
  25.     -->
  26.     <div>
  27.         <input type="text" ng-model="user"><!-- user变量 -->
  28.         <div ng-switch="user"><!-- user变量 -->
  29.             <div ng-switch-when="admin"><!-- admin字符串 -->
  30.                 管理员用户登录
  31.             </div>
  32.             <div ng-switch-when="user"><!-- user字符串 -->
  33.                 会员登录
  34.             </div>
  35.             <div ng-switch-default>
  36.                 游客登录
  37.             </div>
  38.         </div>
  39.     </div>
  40.     <h2>ng-show VS ng-hide 用于显示或者隐藏元素的指令</h2>
  41.     <div>
  42.         <input type="checkbox" ng-model="flagy">显示？{{flagy}}
  43.         <div ng-show="flagy">圆规为什么可以画圆，因为，脚在走，心不动</div>
  44.         <div ng-hide="flagy">你为什么不能圆梦，因为，心不定，脚不动！</div>
  45.     </div>
  46.     <h2>ng-if指令：用于判断输出</h2>
  47.     <div>
  48.         <input type="checkbox" ng-model="flagx">用户登录{{flagx}}
  49.         <div ng-if="flagx" ng-class="'sky'">
  50.             ng-if指令，会将DOM元素在DOM树上显示或者移除
  51.         </div>
  52.     </div>
  53.     <hr>
  54.     <h1>ng-class指令： {样式名称:布尔类型}[使用做多：掌握]</h1>
  55.     <div>
  56.         <div ng-class="{default:def,sky:s}">
  57.             天地不仁以万物为刍狗
  58.         </div>
  59.         <input type="checkbox" ng-model="def">使用default样式修饰{{def}}<br />
  60.         <input type="checkbox" ng-model="s">使用sky样式修饰{{s}}<br />
  61.     </div>
  62.     <div>
  63.         <!-- [样式class名称] [使用较多：熟悉]-->
  64.         <div ng-class="['sky']">
  65.             圣人不仁以百姓为刍狗
  66.         </div>
  67.     </div>
  68.     <div>
  69.         <!-- 通过flag为true/false来指定使用样式default/sky[使用不多：了解] -->
  70.         <div ng-class="{true:default,false:sky}[flag]">
  71.             道可道非常道，名可名非常名<br />
  72.             无名天地之始有名万物之母
  73.         </div>
  74.         <input type="checkbox" ng-model="flag">选中{{flag}}
  75.     </div>
  76.     <h2>ng-class-even/odd</h2>
  77.     <div>
  78.         <ul>
  79.             <li ng-repeat="u in users">
  80.                 <span ng-bind="u" ng-class-even="'default'" ng-class-odd="'sky'"></span>
  81.             </li>
  82.         </ul>
  83.     </div>
  84.     <h2>ng-style</h2>
  85.     <div>
  86.         <button ng-click="sty={color:'orange'}">点击</button>
  87.         <div ng-style="sty">
  88.             ng-style样式，主要用于自定义指令的时候进行样式的处理
  89.             常规使用方式和行内样式没有什么大区别
  90.         </div>
  91.     </div>
  92.     <h2>ng-src:用于在Angular应用中替代img标签的src属性</h2>
  93.     <h2>ng-href:用于在Angular应用中替代a标签的href属性</h2>
  94.  
  95. </div>
  96. <script>
  97.     var app = angular.module("myApp", []);
  98.  
  99.     app.controller("myCtrl", ["$scope", function($scope) {
  100.         $scope.users = [
  101.             "tom",
  102.  
  103.             "jerry",
  104.  
  105.             "shuke",
  106.  
  107.             "beita"
  108.         ]
  109.     }]);
  110. </script>
  111. </body>
  112. </html>

事件指令：Angular封装的用于操作事件的指令。通常是ng-[event]来命名指令，如ng-click表示单击
事件，Angular中的事件处理，需要将处理函数挂载到对应控制器的$scope上。
代码： 

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/lib/AngularJS/angular.min.js"></script>
  7. </head>
  8. <body>
  9.     <div ng-controller="myCtrl">
  10.         <button ng-click="fn1()">点击执行</button>
  11.         <button ng-click="fn2($event)">点击执行，附带事件对象$event</button>
  12.         <button ng-click="fn2($event, 'tom')">点击执行，多个参数</button>
  13.     </div>
  14. <script>
  15.     var app = angular.module("myApp", [])
  16.         .controller("myCtrl", ["$scope", function($scope) {
  17.             $scope.fn1 = function() {
  18.                 alert("事件执行");
  19.             }
  20.             $scope.fn2 = function(event,name) {
  21.                 console.log("事件执行了.", event, name);
  22.             }
  23.         }]);
  24. </script>
  25. </body>
  26. </html>
2>控制器：

<controller>

控制器：主要对于视图中的数据和事件处理函数进行挂载，同时进行一定的业务功能的底层封装和

处理。

控制器在AngularJS中的作用：

(1)通过$scope进行数据状态的初始化操作;

(2)通过$scope进行事件处理函数的挂载操作。

注意：不要使用控制器做下面的事情：

(1)DOM操作：使用AngularJS中的数据双向绑定和自定义指令执行操作

(2)表单处理：使用Angular中的form controls进行操作

(3)数据格式化展示：使用Angular中的过滤器Filter来进行操作

(4)不同控制器之间的数据共享：使用Angular中的自定义服务Service进行处理

(5)组件生命周期的操作：使用Angular中的自定义服务Service进行处理

定义控制器:

控制器的参数$scope 是不需要传递数据的，AngularJS会,自动给它赋值,$scope上可以挂在数据，

用于当前控制器的范围

 app.controller("myCtrl", function($scope) {

  // 控制器函数操作部分

     // 控制器主要进行数据的初始化操作和事件函数的定义


    });

多个控制器：

  为了方便多个控制器中的公共数据初始化，AngularJS提供了一个全局作用域对象$rootScope；

AngularJS应用中，仅有一个全局作用域，其他所有的$scope作用域都是$rootScope的子元素。

使用$rootScope，可以用于初始化全局变量和函数，但是存在一个问题: 因为控制器函数中可以直接

使用$rootScope，就有可能会造成全局数据污染 ，规范：$rootScope一般和Angular模块的run()方法

一起使用。来进行全局数据的初始化。

3>作用域：$scope作用域、$rootScope作用域

$scope作用域：

含义：

$scope 作为 控制器函数一个非常重要的参数， AngularJS通过 依赖注入的方式进行自动 赋值 ，

挂载数据完成控制器中的数据处理。每个$scope都拥有自己控制器的作用域，并且都独立于当前的控制器。


$rootScope作用域：AngularJS的根作用域/全局作用域

每一个AngularJS应用，都有唯一的一个全局作用域范围，也称为根作用域，Angular中其他的作用域都是

这个根作用域的后代/子作用域。

4>$watch()和apply:

$watch():$scope对象上，有一个$watch()函数，用于监听模型数据的变化。

$watch()作用：1. 监听单个普通变量；2. 监听多个变量，多个变量之间，通过+连接符连接起来；

3. 监听对象的数据；4. 监听对象的所有属性；5. 监听数组数据~而不监听数组中的对象数据；

6. 监听数据发生变化的细节：修改前 VS 修改后；7. $watch可以重复，不会被覆盖，都会执行！

$scope.$apply();// 重绘数据
5>组件化:

<component>

含义：AngularJS作为一个模块化组件开发的web前端框架，对于视图进行组件化封装以达到重用的目

的，是它非常优秀的一个亮点。

什么是组件化？组件化是将页面中一部分UI封装起来进行重复使用，UI中的数据可以是不同的，甚至

组件中可以对UI进行适当的业务逻辑处理，如链接跳转、数据运算等等。

组件选项：(1)template:组件替换模板字符串;

(2)templateUrl:组件替换html模板页面;

(3) controller:组件控制器。

代码：封装一个简单的组件

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/lib/AngularJS/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <my-comp></my-comp>
  10.  
  11. <my-comp></my-comp>
  12.  
  13. <my-comp></my-comp>
  14.  
  15. <my-comp></my-comp>
  16.  
  17. <script>
  18.     var app = angular.module("myApp", []);
  19.  
  20.     // 封装一个简单的组件
  21.     app.component("myComp", {
  22.         template:"<h1>组件化封装的内容<small>这是一个副标题</small></h1>"
  23.     });
  24. </script>
  25. </body>
  26. </html>
组件化的应用：
 
  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/lib/AngularJS/angular.min.js"></script>
  7. </head>
  8. <body>
  9.  
  10. <page-header></page-header>
  11. <page-slide></page-slide>
  12. <page-footer></page-footer>
  13.  
  14. <script>
  15.     var app = angular.module("myApp", []);
  16.  
  17.     app.component("pageHeader", {
  18.         template:"<h2>尊敬的用户{{username}}，欢迎访问本系统</h2>",
  19.         controller:function($scope) {
  20.             $scope.username = "tom";
  21.         }
  22.     });
  23.  
  24.     app.component("pageSlide", {
  25.         template:"<h2>这是一个侧边栏导航</h2>"
  26.     });
  27.  
  28.     app.component("pageFooter", {
  29.         template:"<h2>这是一个网页底部代码</h2>"
  30.     });
  31. </script>
  32. </body>
  33. </html>
组件化项目案列：

HTML页面：

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="css/index4.css">
  7.     <script src="js/lib/AngularJS/angular.min.js"></script>
  8.     <script src="js/app/index4/index4.js"></script>
  9. </head>
  10. <body>
  11.     <div class="container">
  12.         <page-header></page-header>
  13.  
  14.         <page-slide></page-slide>
  15.  
  16.         <div class="pageBody">
  17.             <!-- 网页中要展示的购物车内容 -->
  18.         </div>
  19.         <page-footer></page-footer>
  20.     </div>
  21. </body>
  22. </html>
js： 

  1. var app = angular.module("myApp", []);
  2.  
  3. app.component("pageHeader", {
  4.     templateUrl:"js/app/index4/pageHeader/pageHeader.html",
  5.     controller:function($scope) {
  6.  
  7.     }
  8. });
  9.  
  10. app.component("pageSlide", {
  11.     templateUrl:"js/app/index4/pageSlide/pageSlide.html",
  12.     controller:function($scope) {
  13.  
  14.     }
  15. });
  16.  
  17. app.component("pageFooter", {
  18.     templateUrl:"js/app/index4/pageFooter/pageFooter.html",
  19.     controller:function($scope) {
  20.  
  21.     }
  22. });
三个组件的HTML页面：

page-header:

  1. <div class="header-pageHeader">
  2.     页面头部
  3. </div>
  4. <style>
  5.     .header-pageHeader{
  6.         width:100%;
  7.         height:200px;
  8.         background:#069;
  9.         color:#fff;
  10.     }
  11. </style>
page-slide: 

  1. <div class="slide-pageSlide">
  2.     侧边栏
  3. </div>
  4. <style>
  5.     .slide-pageSlide{
  6.         float:left;
  7.         width:300px;
  8.         height:500px;
  9.         background:orange;
  10.     }
  11. </style>
page-footer:
 
  1. <div class="footer-pageFooter">
  2.     页面底部
  3. </div>
  4. <style>
  5.     .footer-pageFooter{
  6.         clear:both;
  7.         width:100%;
  8.         height:100px;
  9.         background:#888;
  10.         color:#fff;
  11.     }
  12. </style>

通过这个案例可以看出用组件化写项目，可以优化代码，使代码的格局看起来很平整，通过建立几个文件

，在使用外链式，使它们整合在一起，而且使用组件化可以一直重复利用。

组件化的编写步骤：


6>过滤器和自定义过滤器：
什么叫过滤器？
       过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。ng内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。总共九种。

代码：

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/lib/AngularJS/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-controller="myCtrl">
  10.     <div>
  11.         <h3>排序输出</h3>
  12.         排序关键词：<input type="text" ng-model="keyword">
  13.         排序顺序：<input type="checkbox" ng-model="sort">倒序
  14.         <br />
  15.         <ul>
  16.             <li ng-repeat="u in users | orderBy:keyword:sort">
  17.                 <span ng-bind="u.userID"></span>****
  18.                 <span ng-bind="u.username"></span>****
  19.                 <span ng-bind="u.nickname"></span>
  20.             </li>
  21.         </ul>
  22.     </div>
  23.     <div>
  24.         <h3>字符串大小写转换过滤器</h3>
  25.         <div ng-bind="name"></div>
  26.         <div ng-bind="name | uppercase"></div>
  27.         <div ng-bind="name | lowercase"></div>
  28.     </div>
  29.     <div>
  30.         <h3>长度限制过滤器</h3>
  31.         长度：<input type="text" ng-model="length"><br />
  32.         位置：<input type="text" ng-model="index">
  33.         <br />
  34.         <ul>
  35.             <li ng-repeat="u in users | limitTo:length:index">
  36.                 <span ng-bind="u.userID"></span>****
  37.                 <span ng-bind="u.username"></span>****
  38.                 <span ng-bind="u.nickname"></span>
  39.             </li>
  40.         </ul>
  41.     </div>
  42.     <div>
  43.         <h3>JSON过滤器</h3>
  44.         <p>
  45.             把数据中的对象，转换成JSON字符串的格式输出展示到页面上
  46.             经常能用于代码程序调试，使用较少！
  47.         </p>
  48.         <span ng-bind="users|json"></span>
  49.     </div>
  50.     <div>
  51.         <h3>过滤输出</h3>
  52.         关键词：<input type="text" ng-model="keyword">
  53.         <br />
  54.         <ul>
  55.             <li ng-repeat="u in users | filter:keyword">
  56.                 <span ng-bind="u.userID"></span>****
  57.                 <span ng-bind="u.username"></span>****
  58.                 <span ng-bind="u.nickname"></span>
  59.             </li>
  60.         </ul>
  61.     </div>
  62.     <div>
  63.         <h3>日期时间过滤器</h3>
  64.         <div>
  65.             原始输出：<span ng-bind="date"></span>
  66.         </div>
  67.         <div>
  68.             日期格式化：<span ng-bind="date | date"></span>
  69.         </div>
  70.         <div>
  71.             日期格式化：通常情况下，需要按照用户的要求进行输出，这时候就会附带参数
  72.             y/M/d/h/m/s/E 年/月/日/时/分/秒/星期
  73.             <br />
  74.             <span ng-bind="date | date:'yyyy年MM月dd日 hh:mm:ss'"></span><br />
  75.             <span ng-bind="date | date:'yyyy年MM月dd日'"></span><br />
  76.             <span ng-bind="date | date:'hh:mm:ss'"></span><br />
  77.         </div>
  78.     </div>
  79.     <hr>
  80.     <h3>货币格式过滤器</h3>
  81.     <div>
  82.         原始输出数据的方式：<span ng-bind="price"></span>
  83.     </div>
  84.  
  85.     <div>
  86.         通过拼接输出数据的方式：￥<span ng-bind="price"></span>.00
  87.     </div>
  88.     <hr/>
  89.     <div>
  90.  
  91.         <p>
  92.             对于要展示的货币数据【原始数据就是数字】
  93.             按照指定的货币格式进行输出
  94.         </p>
  95.         货币过滤器输出：<span ng-bind="price | currency"></span><br />
  96.         货币过滤器输出：<span ng-bind="price | currency:'人命币￥'"></span><br />
  97.         货币过滤器输出：<span ng-bind="price | currency:'￥':3"></span><br />
  98.     </div>
  99.  
  100. </div>
  101.  
  102. <script>
  103.     var app = angular.module("myApp", []);
  104.  
  105.     app.controller("myCtrl", ["$scope", function($scope) {
  106.         $scope.price = 499.1213;
  107.         $scope.date = new Date();
  108.         $scope.name = "John Smith";
  109.         $scope.users = [
  110.             {userID:1, username:"cat", nickname:"tom"},
  111.             {userID:2, username:"xiaofan", nickname:"张小凡"},
  112.             {userID:3, username:"biyao", nickname:"碧瑶"},
  113.             {userID:4, username:"luxueqi", nickname:"陆雪琪"},
  114.             {userID:5, username:"linjingyu", nickname:"林惊羽"},
  115.             {userID:6, username:"cengshushu", nickname:"曾书书"},
  116.             {userID:7, username:"zhuque", nickname:"朱雀"},
  117.             {userID:8, username:"qinglong", nickname:"青龙"},
  118.             {userID:9, username:"guiwang", nickname:"鬼王"},
  119.             {userID:10, username:"dushen", nickname:"赌神"},
  120.             {userID:11, username:"jinpiner", nickname:"金瓶儿"}
  121.         ]
  122.     }]);
  123. </script>
  124. </body>
  125. </html>
过滤器与自定义过滤器的区别： 自定义过滤器，不带参数， 过滤 带参数。

filter的两种使用方法:

1. 在模板中使用filter

我们可以直接在{{}}中使用filter，跟在表达式后面用 | 分割，语法如下：

1
{{ expression | filter }}

?

也可以多个filter连用，上一个filter的输出将作为下一个filter的输入（怪不得这货长的跟管道一个样。。）

?
1
{{ expression | filter1 | filter2 | ... }}

filter可以接收参数，参数用 : 进行分割，如下：

?
1
{{ expression | filter:argument1:argument2:... }}

除了对{{}}中的数据进行格式化，我们还可以在指令中使用filter，例如先对数组array进行过滤处理，然后再循环输出：

?
1
<span ng-repeat= "a in array | filter " >

2. 在controller和service中使用filter

我们的js代码中也可以使用过滤器，方式就是我们熟悉的依赖注入，例如我要在controller中使用currency过滤器，只需将它注入到该controller中即可，代码如下：

?
1
2
3
app.controller( 'testC' , function ($scope,currencyFilter){
$scope.num = currencyFilter(123534);
}

在模板中使用{{num}}就可以直接输出 $123,534.00了！在服务中使用filter也是同样的道理。

此时你可能会有疑惑，如果我要在controller中使用多个filter，难道要一个一个注入吗，这岂不太费劲了？小兄弟莫着急~ng提供了一个$filter服务可以来调用所需的filter，你只需注入一个$filter就够了，使用方法如下：

?
1
2
3
4
app.controller( 'testC' , function ($scope,$filter){
$scope.num = $filter( 'currency' )(123534);
　　$scope.date = $filter( 'date' )( new Date());
}

可以达到同样的效果。好处是你可以方便使用不同的filter了。

7>Angular服务与自定义服务： 

Angular服务与自定义服务
    Angular应用中：
        View视图~专门用于数据的展示和提取

        Controller控制器，主要用于数据的挂载【数据从哪里来？】

        |-- 自定义服务：用于从后端接口获取数据，然后将数据挂载到控制器中

        Model数据模型：应用中要使用的各种数据，一般从后端获取之后存储在控制器的变量中


   Angular的服务，主要从以下两方面来讲
   1.自定义服务
    Angular中自定义服务的实现方式有三种
    * factory工厂模式实现：比较常用，根据项目组规范进行确定是否使用
    * service对象方式：比较常用，根据项目组规范进行确定是否使用
    * provider代理方式：Angular框架中的使用方式，常规项目开发很少使用

   2.内置服务【$http服务，其他服务在使用的时候再进行讲解】

代码：

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/lib/AngularJS/angular.min.js"></script>
  7. </head>
  8. <body>
  9. <div ng-controller="myCtrl">
  10.     factory:<div ng-bind="value1"></div>
  11.     service:<div ng-bind="value2"></div>
  12.     provider:<div ng-bind="value3"></div>
  13. </div>
  14. <script>
  15.     var app = angular.module("myApp",[]);
  16.  
  17.     app.controller("myCtrl",["$scope","service1","service2","service3",function($scope,s1,s2,s3){
  18.       $scope.value1 = s1;//从自定义服务中获取数据
  19.       $scope.value2 = s2.v;
  20.       $scope.value3 = s3;
  21.     }]);
  22.  
  23.     //第一种实现方式：factory模式
  24.     /* 第一种实现方式，以其简洁的使用特色而流行于自定义服务行列
  25.      * 在处理返回数据的时候，可以返回字面量、数组、对象、复杂对象等等各种数据
  26.      * 极大的满足了我们项目的需要，所以使用较多，需要掌握！
  27.      * */
  28.     app.factory("service1",function(){
  29.         //从后端获取数据：模拟
  30.         var _v = "factory value";
  31.         //返回数据，返回的数据可以是字符串，可以是复杂对象
  32.         return _v;
  33.     });
  34.  
  35.     //第二种实现方式：service方法【熟练掌握】
  36.     /*
  37.      第二种实现方式，以其规范的返回数据而流行与自定义服务行列
  38.      service方式，只能返回对象，在某些项目组中，为了规范服务返回的数据~也就是强制指定
  39.      必须返回对象数据，才能正常解析，避免了出现大量的各种格式的数据：由于返回数据的标准化而流行！
  40.      */
  41.     app.service("service2",function(){
  42.        var _v = "service value";
  43.         return {v:_v};
  44.     });
  45.  
  46.     //第三种实现方式：provider方法
  47.     /*
  48.      第三种实现方式，要求处理的过程中必须通过this.$get()函数进行返回数据的处理
  49.      这种方式在Angular自己的内置服务和框架中使用较多，但是不推荐在项目开发中使用
  50.      因为操作的复杂性和代码的可读性无形中让开发人员掌握有一定的难度
  51.      */
  52.     app.provider("service3",function(){
  53.        this.$get = function(){
  54.            return "provider value";
  55.        }
  56.     });
  57. </script>
  58. </body>
  59. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Li_阴宅/article/detail/874534
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号