angularJs 常用方法
一、常用的设计原则和设计模式
1、设计原则（明确）
① YANGI（You aren't gonna need it） 不写不需要的代码
②KISS（Keep it simple and stupid） 代码越简单越好
③DRY（Don't Repeat Yourself）封装代码
④高内聚低耦合
内聚：一个模块内部的不同部分之间的关系
耦合：不同模块/组件的关系
⑤SRP(single responsibility principle) 单一责任原则
⑥OCP（open closed principle） 开闭原则
对扩展开放 对修改关闭
⑦LCP（least knownledge principle） 最少知识法则
2、设计模式（23种 了解）
总体来说设计模式分为三大类：
①创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。
②结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。
③行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。
经常用到的设计模式：
工厂方法模式、单例模式、适配器模式、解释器模式、观察者模式
MVC、MVVM、MVP。。。--》终极目标：模块化和复用
MVC：
Model（模型数据）、View（视图）、Controller（控制器）
遥控器--》控制器：数据的增删改查的操作
电视 --》View：展示数据
光缆 --》Model：模型数据
why MVC？
解耦（降低代码的耦合度）、职责的切分。。。。
工作原理：当对视图操作的时候，触发控制器中的一些方法，在这些方法中对于数据的增删改查的操作，借助一些绑定显示，更新到视图。
二、认识AngularJS
1、什么是AngularJS
ng是一个由Google维护的开源的框架，实现单页面应用程序，适用于数据操作比较频繁的场景
2、为什么AngularJS
四大特征：
①采用了MVC的设计模式
②双向数据绑定
③依赖注入
④模块化设计
3、怎么使用？
引入对应的js文件。
3.1 表达式
语法：{{表达式}}
作用：将表达式的结果输出到调用该表达式的元素的innerHTML中
练习：新建一个html文件，在文件中，通过双花括号语法执行算术运算、比较运算、逻辑运算、三目运算。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <title></title> 7 </head> 8 <body ng-app> 9 <h1>Hello AngularJs</h1> 10 <p>加：3+5 = {{3+5}}</p> 11 <p>减：3-5 = {{3-5}}</p> 12 <p>乘：3*5 = {{3*5}}</p> 13 <p>余：3/5 = {{3/5}}</p> 14 <p>比较：3>5 = {{3>5}}</p> 15 <p>比较：3>=5 = {{3>=5}}</p> 16 <p>比较：3<5 = {{3<5}}</p> 17 <p>比较：3<=5 = {{3<=5}}</p> 18 <p>三目：3<=5?3+5:3-5 结果为：{{3<=5?3+5:3-5}}</p> 19 <p>三目：3<=5 结果为：{{3<=5?'yes':'no'}}</p> 20 <p>逻辑：3<5 && 5<6 结果为：{{3<5 && 5<6}}</p> 21 <p>逻辑：3>5 && 5<6 结果为：{{3>5 && 5<6}}</p> 22 <p>逻辑：3<5 || 5<6 结果为：{{3<5 || 5<6}}</p> 23 <p>逻辑：3>5 || 5>6 结果为：{{3>5 || 5>6}}</p> 24 </body> 25 </html>
3.2 指令
ngApp指令：①指定angularJS的作用范围②自动载入并启动ng应用
ngInit指令：初始化一些变量（对象、数组。。。），注意：不需要写上var关键字
语法：<ANY ng-init=""></ANY>
练习：ngInit指令创建一个对象数组（学生数组），模拟4个对象，每个对象包含name、sex、score；将对象数组输出到一个table中。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <title></title> 7 <style> 8 table{ 9 width:80%; 10 border-collapse: collapse; 11 margin:0 auto; 12 } 13 h1,table>tbody>tr{ 14 text-align:center; 15 } 16 table tr,td,th{ 17 border:1px solid #ddd; 18 } 19 </style> 20 </head> 21 <body ng-app> 22 <span ng-init="name='angular'">{{name}}</span> 23 <p>{{name}}</p> 24 <span ng-init="name='angular';ages='18'">{{name}}</span> 25 <p>{{name}} {{ages}}123</p> 26 <sapn ng-init="heoro={name:'二狗子',age:'15'}"></sapn> 27 <p>{{heoro.name}}</p> 28 <p>name:{{heoro.name}} age:{{heoro.age}}</p> 29 <span ng-init="arr=[20,30,40,50,60]"></span> 30 <p>{{arr[2]}}</p> 31 <span ng-init="student=[ 32 {name:'二狗子',sex:'男',score:'80'}, 33 {name:'张三丰',sex:'男',score:'90'}, 34 {name:'孙悟空',sex:'雄',score:'60'}, 35 {name:'白骨精',sex:'女',score:'77'}, 36 {name:'琵琶精',sex:'女',score:'83'} 37 ]"></span> 38 <h1>学生信息表</h1> 39 <table> 40 <thead> 41 <tr> 42 <th>姓名</th> 43 <th>性别</th> 44 <th>成绩</th> 45 </tr> 46 </thead> 47 <tbody> 48 <tr> 49 <td>{{student[0].name}}</td> 50 <td>{{student[0].sex}}</td> 51 <td>{{student[0].score}}</td> 52 </tr> 53 <tr> 54 <td>{{student[1].name}}</td> 55 <td>{{student[1].sex}}</td> 56 <td>{{student[1].score}}</td> 57 </tr> 58 <tr> 59 <td>{{student[2].name}}</td> 60 <td>{{student[2].sex}}</td> 61 <td>{{student[2].score}}</td> 62 </tr> 63 <tr> 64 <td>{{student[3].name}}</td> 65 <td>{{student[3].sex}}</td> 66 <td>{{student[3].score}}</td> 67 </tr> 68 </tbody> 69 </table> 70 </body> 71 </html>
步骤：
①引入js文件，指定ngApp指令
②通过ngInit初始化数据
③将数据展示在table中。
ngApp/ngInit
注意事项：ngInit来初始化变量的时候，如果需要初始化多个变量，只需要通过‘；’来隔开
<span ng-init="name='lucy';age=20">{{name}}</span>
ngApp指令ng应用的作用范围，如果ngApp调用了多次，只有第一次是生效的。
三、ng常用的指令
ng中的指令：是由AngularJS提供的，可以将指令用在HTML中作为扩展属性、扩展标签
扩展属性用法：<ANY ng-xx=""></ANY>
扩展标签用法：<ngView></ngView>
1、ngBind
用法： <ANY ng-bind=“”></ANY>
双花括号 -》表达式的结果输出到调用元素的innerHTML中。
ngBind 将表达式的结果输出到调用元素的innerHTML中，但是相对于{{}}，解决在ng启动较慢时，{{}}闪烁的问题。
2、ngRepeat指令
为HTML添加循环功能
语法1：<ANY ng-repeat="临时变量 in 集合"></ANY>
语法2：<ANY ng-repeat="（下标变量名，值变量名） in 集合"></ANY>
用途：对于指定的集合的每个成员，依次赋值给临时变量，将当前元素循环输出一遍。
$index/$first/$middle...
练习：学生数组 ngInit初始化，通过ngRepeat遍历对象数组并显示在table中。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <title></title> 7 <style> 8 ul,ol{ 9 list-style: none; 10 } 11 table{ 12 width:80%; 13 border-collapse: collapse; 14 margin:0 auto; 15 } 16 h1,table>tbody>tr{ 17 text-align:center; 18 } 19 table tr,td,th{ 20 border:1px solid #ddd; 21 } 22 </style> 23 </head> 24 <body ng-app> 25 <h1>angular ng-repeat</h1> 26 <ul ng-init="list=[1,2,3,4,5,6,7,8,9]"> 27 <li ng-repeat="tmp in list">{{tmp}}</li> 28 </ul> 29 <ol> 30 <li ng-repeat="(key,value) in list">{{'key is '+key+' value is '+value}}</li> 31 </ol> 32 <hr/> 33 <span ng-init="student=[ 34 {name:'二狗子',sex:'男',score:'80'}, 35 {name:'张三丰',sex:'男',score:'55'}, 36 {name:'孙悟空',sex:'雄',score:'60'}, 37 {name:'白骨精',sex:'女',score:'50'}, 38 {name:'琵琶精',sex:'女',score:'83'} 39 ]"></span> 40 <h1>学生信息表</h1> 41 <table> 42 <thead> 43 <tr> 44 <th>姓名</th> 45 <th>性别</th> 46 <th>成绩</th> 47 </tr> 48 </thead> 49 <tbody> 50 <!--<tr ng-repeat="stu in student">--> 51 <!--<td>{{stu.name}}</td>--> 52 <!--<td>{{stu.sex}}</td>--> 53 <!--<td>{{stu.score}}</td>--> 54 <!--</tr>--> 55 <!--<tr ng-repeat="obj in student">--> 56 <!--<td ng-repeat="tmp in obj">{{tmp}}</td>--> 57 <!--</tr>--> 58 <tr ng-repeat="obj in student"> 59 <td ng-repeat="tmp in obj" ng-bind="tmp"></td> 60 </tr> 61 </tbody> 62 </table> 63 </body> 64 </html>
3、ngIf指令
为HTML添加选择功能
语法:<ANY ng-if="表达式"></ANY>
用途：表达式的结果为true，当前元素会挂到DOM树，否则删除。
练习：通过ngIf指令将对象数组中，成绩大于60分的显示在table中。
1 <!DOCTYPE html> 2 <html ng-app> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <title></title> 7 <style> 8 table{ 9 width:80%; 10 border-collapse: collapse; 11 margin:0 auto; 12 } 13 h1,table>tbody>tr{ 14 text-align:center; 15 } 16 table tr,td,th{ 17 border:1px solid #ddd; 18 } 19 </style> 20 </head> 21 <body> 22 <span ng-init="student=[ 23 {name:'二狗子',sex:'男',score:'80'}, 24 {name:'张三丰',sex:'男',score:'55'}, 25 {name:'孙悟空',sex:'雄',score:'60'}, 26 {name:'白骨精',sex:'女',score:'50'}, 27 {name:'琵琶精',sex:'女',score:'83'}, 28 {name:'猪八戒',sex:'男',score:'73'}, 29 {name:'沙悟净',sex:'男',score:'35'} 30 ]"></span> 31 <h1>学生信息表</h1> 32 <table> 33 <thead> 34 <tr> 35 <th>姓名</th> 36 <th>性别</th> 37 <th>成绩</th> 38 </tr> 39 </thead> 40 <tbody> 41 <tr ng-repeat="obj in student" ng-if="obj.score >= 60"> 42 <td ng-repeat="tmp in obj" ng-bind="tmp"></td> 43 </tr> 44 </tbody> 45 </table> 46 </body> 47 </html>
4、ngShow/ngHide
语法:<ANY ng-show="表达式"></ANY>
用途：根据表达式输出结果，true-》显示 false-》隐藏
ng-show
1 <!DOCTYPE html> 2 <html ng-app> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <title></title> 7 </head> 8 <body> 9 <span ng-init="hasmore=true"></span> 10 <button ng-show="hasmore">点我，加载更多</button> 11 </body> 12 </html>
ng-hide
1 <!DOCTYPE html> 2 <html ng-app> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <title></title> 7 </head> 8 <body> 9 <span ng-init="hasmore=false"></span> 10 <button ng-hide="hasmore">没有更多内容了</button> 11 </body> 12 </html>
语法:<ANY ng-hide="表达式"></ANY>
用途：根据表达式输出结果，true-》隐藏 false-》显示
5、ngSrc
语法：<img ng-src='{{url}}'/>
1 <!DOCTYPE html> 2 <html ng-app> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <title></title> 7 </head> 8 <body> 9 <span ng-init="url='img/1.jpg'"></span> 10 <img ng-src="{{url}}"/> 11 </body> 12 </html>
四、AngularJS如何实现MVC
M： model 模型数据：js定义的变量
V： view 视图：增强过后的html，显示数据
C： controller 控制器，负责数据的操作，function来处理
步骤：
①声明一个模块
var app = angular.module('模块名','依赖列表');
②注册模块：ng-app='模块名'
③声明控制器： app.controller('控制器名字'，function(){})
④调用控制器：ng-controller='控制器名字'
⑤操作：操作模型数据($scope.name='xiaofang'
⑥显示 （<p>{{name}}</p>）
在控制器的范围内，通过ng指令或者双花括号语法来显示数据
$scope是一个控制器的作用域对象，服务service，单例模式的对象)
事件：
单击事件 ngClick--》 <button ng-click='show()'></button>
ngDblClick
ngMouseEnter/Leave...
练习：
使用angularJS的MVC的设计模式，来实现一个加载更多的列表。
分析：
①创建模块、控制器、模型数据（对象数组）
②将模型数据通过ngRepeat显示在ul中
③按钮通过ng-click指定点击的回调：对象数组push两条数据
两种方法：①ngInit 耦合度比较高 ②$scope
初始化模型数据：通过控制器的$scope来实现。
1 <!DOCTYPE html> 2 <html ng-app="myMoudle"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <title></title> 7 <style> 8 div{ 9 width: 850px; 10 margin:0 auto; 11 } 12 table{ 13 width:60%; 14 border-collapse: collapse; 15 } 16 table td{ 17 18 text-align: center; 19 } 20 table tr,td,th{ 21 border:1px solid #ddd; 22 } 23 </style> 24 </head> 25 <body> 26 <div ng-controller="myCtrl"> 27 <p> 28 <button ng-click="addInput()">添加</button> 29 </p> 30 <div id="add" ng-show="isShow"> 31 <label for="price">单价：</label> 32 <input type="text" placeholder="请输入单价" id="price"/><br> 33 <label for="count">数量：</label> 34 <input type="text" placeholder="请输入数量" id="count"/><br> 35 <input type="button" value="确定" ng-click="addShopp()"/> 36 </div> 37 <table> 38 <thead> 39 <tr> 40 <th>单价</th> 41 <th>数量</th> 42 <th>小计</th> 43 <th>删除</th> 44 </tr> 45 </thead> 46 <tbody> 47 <tr ng-repeat="obj in shoppList"> 48 <td ng-repeat="tmp in obj" ng-bind="tmp"></td> 49 <td ng-bind="obj.price*obj.count"></td> 50 <td><button ng-click="deleteShopp()">删除</button></td> 51 </tr> 52 </tbody> 53 </table> 54 </div> 55 <script> 56 var app = angular.module('myMoudle',['ng']); 57 app.controller('myCtrl',function($scope){ 58 $scope.shoppList=[ 59 {price:3,count:3}, 60 {price:8,count:3}, 61 {price:1,count:3}, 62 {price:6,count:3} 63 ]; 64 $scope.isShow = false; 65 $scope.addInput=function(){ 66 $scope.isShow = true; 67 } 68 $scope.addShopp=function(){ 69 var pri = price.value; 70 var coun = count.value; 71 if(pri!='' && coun !=''){ 72 $scope.shoppList.push( 73 {price:pri,count:coun} 74 ); 75 $scope.isShow = false; 76 alert('添加成功！！！'); 77 } 78 else{ 79 alert("价格和数量不能为空！！！"); 80 } 81 } 82 $scope.deleteShopp=function(){ 83 console.log(this.$index); 84 $scope.shoppList.splice(this.$index,1); 85 } 86 }); 87 </script> 88 </body> 89 </html>
ngDisabled
ngChecked
ngStyle/ngClass...
ng-checked示例
1 <!DOCTYPE html> 2 <html ng-app="myModule"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js/angular.js"></script> 6 <title></title> 7 </head> 8 <body> 9 <div ng-controller="myCtrl"> 10 <input type="checkbox" ng-checked="checked"/>是否同意 11 </div> 12 <script> 13 var app = angular.module('myModule',['ng']); 14 app.controller('myCtrl',function($scope){ 15 $scope.checked=false; 16 }); 17 </script> 18 </body> 19 </html>
浙公网安备 33010602011771号