1.1.0 AngularJS前端框架学习-笔记

一、AngularJS的主要简介：

          AngularJS 把应用程序数据绑定到 HTML 元素

          AngularJS 可以克隆和重复 HTML 元素

          AngularJS 可以隐藏和显示 HTML 元素

          AngularJS 可以在 HTML 元素"背后"添加代码

          AngularJS 支持输入验证  

二、AngularJS 指令特点：

           ng-directives 扩展了 HTML

           ng-model 指令把元素值（比如输入域的值）绑定到应用程序，也就是为了传给后台【如：】

           ng-bind 指令把应用程序数据绑定到 HTML 视图，也就是将后台数据绑定到前台

           ng-init初始化页面中的变量

           AngularJS  模块（Module） 定义了 AngularJS 应用。

           AngularJS  控制器（Controller） 用于控制 AngularJS 应用。

三、AngularJS表达式：

            AngularJS 表达式写在双大括号内： {{ expression }}。

        AngularJS 表达式把数据绑定到 HTML，这与   ng-bind  指令有异曲同工之妙。

            AngularJS 将在表达式书写的位置"输出”数据。

四、AngularJS 表达式 与 JavaScript 表达式的区别

            类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量

            与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中

            与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常

            与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

五、AngularJS定义一个模块：

            var   app  =  angular . module ( ' myApp ' ,  [ ] ) ;

六、AngularJS指令学习：

• 【ng-init：数据初始化】

        1、初始化单一变量

                      < div   ng-app = " "   ng-init = " firstName='John';lastName='Doe' " > < p > 姓名：  < span   ng-bind = " firstName + ' ' + lastName " > </ span > </ p > </ div >【执行结果： 姓名：Doe】

        2、初始化Json对象

                      < div   ng-app = " "   ng-init = " person={firstName:'John',lastName:'Doe'} " >   < p > 姓为 {{ person.lastName }} </ p > </ div >【执行结果：姓为Doe】

        3、初始化数组对象(数组下标从0开始)

                       < div   ng-app = " "   ng-init = " points=[1,15,19,2,40] " >   < p > 第三个值为 {{ points[2] }} </ p > </ div >【执行结果: 第三个值为19】

•  【ng-model：数据同步】
  

        1、AngularJS利用ng-model进行数据绑定，同时向后台传递数据，在前台中只要两个相关联的数据，一方变化，另一方会立即变化

                      < div   ng-app = " "   ng-init = " quantity=1;price=5 ” >  

                              < h2 > 价格计算器 </ h2 >  

                                       数量：  < input   type = " number "   ng-model = " quantity ” >  

                                      价格：  < input   type = " number "   ng-model = " price ” >

                              < p > < b > 总价： </ b >  {{ quantity * price }} </ p>

                       </ div >

•  【ng-repeat：数据循环】
  

          1、AngularJS利用ng-repeat进行数据循环，循环的html标记是ng-repeat指令所在的标记

                         < div   ng-app = " "   ng-init = " names=['Jani','Hege','Kai'] ” >  

                                  < p > 使用 ng-repeat 来循环数组 </ p >  

                                  < ul >

                                          < li   ng-repeat ="x in names">  {{ x }}   </ li >

                                  </ ul >  

                        </div>【执行结果：li整一个标记和里面的内容进行循环重复】

• 【ng-app：应用程序】
  
  

  1、ng-app 指令定义一个 AngularJS 应用程序,ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS应用程序的"所有者"。

            < div   ng-app = " "   ng-init = " firstName='John’ " >

                       <p>姓名为 <span ng-bind=“firstName”></span></p>

           </ div >

  2、ng-app  指令指明了应用,  ng-controller 指明了控制器，放在一个div的属性中，指明这一段div都在AngularJS的控制范围内

  3、ng-app 指令定义了 AngularJS 应用程序的  根元素

  4、ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序 

  
  
•  【ng-bind：数据绑定】  
  

         1、绑定单一变量

                  < div   ng-app = " "   ng-init = " firstName='John';lastName='Doe' " > < p > 姓名：  < span   ng-bind = " firstName + ' ' + lastName " > </ span > </ p > </ div >【执行结果： 姓名：Doe】

        2、初始化Json对象

                 < div   ng-app = " "   ng-init = " person={firstName:'John',lastName:'Doe'} " > < p > 姓为 <span  ng-bind ="person.lastName"></span> </ p > </ div >【执行结果：姓为Doe】

        3、初始化数组对象(数组下标从0开始)

                < div   ng-app = " "   ng-init span class="hl-quotes">" points=[1,15,19,2,40] " > <p> 第三个值为 <span ng-bind="points[2]”></span> </ p > </ div >【执行结果: 第三个值为19】

• 【ng-show：数据展示】

          1、ng-show指令在ng-show属性的值为true的情况下就会展示ng-show指令所在的标记内容          

                     < form   ng-app= ""   name= "myForm" >

                                 Email:
                               < input   type= "email"   name= "myAddress"   ng-model= "text" >
                               < span   ng-show= "myForm.myAddress.$error.email" >不是一个合法的邮箱地址 < /span >
                     < /form >

             【 执行结果： 当myAddress这个输入框输入的值是一个合法邮箱地址的话，那么“不是一个合法的邮箱地址”就不会展示，否则，就会展示！】

               {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)

               {{myForm.myAddress.$dirty}} (如果值改变则为 true)

               {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)【 这些一般作为ng-show的判断条件】

•  【ng-options：下拉选择】
  

            1、创建代码

                       < select > < option   ng-repeat= "x in names" > {{x}} < /option > < /select >

                    【ng-repeat的样例】

                      <select ng-model="selectedSite" ng-options="x.site for x in sites"></select>

                    【ng-options的样例】

                二者的区别：

                                    ng-repeat 有局限性，ng-repeat选择的是一个字符串，而ng-options选择的是一个对象

•  【ng-disabled ：标示按钮属性是不是可用】

            1、true表示按钮不可用，false表示按钮可用

•  【ng-hide：标示着标记是否隐藏】
  

            1、true表示ng-hide所在的标记是隐藏的，false表示ng-hide所在的标记是显示的，和ng-show是相反的

•  【ng-click：AngularJS的点击事件】 
  

             1、ng-click指令定义了AngularJS点击事件

七、自定义指令的定义和使用

•  【.directive ：添加自定义指令】
  
  1、指令定义 

  app.directive("runoobDirective", function() {

  var app = angular.module("myApp", []);

   return {

          restrit:”A”,【限制该指令只能作为属性使用】

          template : "<h1>自定义指令!</h1>"

   };

  });

  2、指令的调用

               

       标记调用： < runoob-directive > < /runoob-directive >

       属性调用： < div  runoob-directive > < /div >

       类名调用：<div class="runoob-directive"></div>

       注释调用：<!-- directive: runoob-directive —> 【执行结果： 自定义指令！注意这执行结果不是注释】 
  

  
  

   3、限制指令使用范围(默认下是作为EA)

                  E：作为元素名使用

                  A：作为属性使用

                  C：作为类名使用

                  M：作为注释使用

【注意】1、type=“number”   表示此输入框是数字格式的，可以向上向下点击增加数字或者减少数字，但是允许输入非数字字符