流行框架.angularJS

Posted 2020-08-16 type_Y

AngularJS 是比较新的技术，版本 1.0 是在 2012 年发布的。
 AngularJS 是由 Google 的员工 Mi?ko Hevery 从 2009 年开始着手开发。
这是一个非常好的构想，该项目目前已由 Google 正式支持，有一个全职的开发团队继续开发和维护他。AngularJS的设计初衷是为了克服html在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事其核心就是通过指令扩展了 HTML，通过表达式绑定数据到 HTML。

Angular对比JS\jquery同时做一个计算器的时候Angular比较擅长做大量计算的处理

Angular的特性:双向数据绑定,指令系统,MVVM设计模式(加快工作的效率),多模块开发,系统的依赖注入.

"{{}}"作为Angular的表达式,可以写在HTML中,里面可以包括:字符串,数字,布尔,三元表达式,数组,对象.

指令:所有NG-开头的全部是Angular自带的一些指令:
ng-bind　　　　 :绑定,类似于innhtml
ng-bind-html　 :和ng-bind差不多
ng-repeat　　　 :ng-repeat="a in b" b为数组 a放在表达式里可以数组,类似于for in
ng-class　　　　:做类的时候
ng-if　　　　　　:如果是true是显示出来的,false就会自动被注释
ng-hide　　　　　:是true的时候是不显示,false的时候显示
ng-show　　　　　:和hide相反　
ng-switch　　　　:对应的cars时就会显示
ng-src　　　　　 :用于给图片的来源地址
ng-href　　　　　:用于A标签的来源地址
ng-focus　　　　:用于获取焦点的时候获得的效果
ng-blur　　　　　:用于失去焦点的时候
ng-dblclick　　 :用于双击,用在标签里:<a ng-click="名字()!!注意这里要写的是一个方法"></a>


自定义指令
由于官方给的指令不一定够用所以我们需要自己设置一些自定义指令:
通过diretive来给module设置,注意.这是给模块添加的方法.

app.directive(‘指令的名字‘,第二个参数是个数组，写法类似于controller第二个参数) 
如果指令的名字用驼峰命名法,在使用的时候需要把所有的大小写全部转换成小写,并且在原先大小之间加上"-",

template:‘指定一个html字符串，最终angular会把这个字符串渲染到页面上，我们书写自定义指令所在标签的innerHTML位置‘

templateUrl:也是指定一个字符串，只是这个字符串是一个路径，最终angular会帮助我们去请求这个文件，然后把这个文件的内容当作模板字符串插入到页面中。

angular优先会把对应的属性值当作script标签的id来识别，如果没有这个id,就会把这个属性值当作一个路径去请求.
+ restrict : 指定angualr自定义指令的使用方式
   - ‘C‘ : 表示只能以类样式的形式使用 ng-cloak
   - ‘A‘ : 表示只能以属性的形式使用
   - ‘E‘ : 表示只能以自定义标签的形式使用   <my-Btn></my-Btn>

 replace: 需要一个布尔值：当为true时表示，angular会用tempate所指定的模板字符串替换自定义指令所在标签。
(去外壳).

transclude: 转置，需要一个布尔值，为true时，会将自定义指令所在标签的innerHTML位置的字符串添加到模板字符串中拥有ng-trasclude指令的标签的innerHTML位置,
- scope: 需要提供一个对象,用来获取自定义指令所在标签的属性值,
      `{
          tmp:‘@,获取自定义指令所在标签的名为tmp的的属性值 
      }`
- link:需要提供一个function,这个function有三个参数
      + scope,可以暴露一些属性给模板字符串使用，与控制器里的$scope有点类似
        但是，它暴露的属性只能在模板字符串中使用，不能在整个视图使用。
      + element: 就是angular为我们获取的自定义指令所在标签的jqLite对象
      + atrriubtes: 这是一个object对象，里面包含了所有自定义指令所在标签的属性值。 

过滤器:

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

- 什么是过滤器
   + 过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。ng内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。
- Angular官方的过滤器
   +  currency(货币)
      - {{1000 | currency:"USD$":0}} 
   +  date(日期)
      - {{‘1288323623006‘ | date:"MM/dd/yyyy ‘at‘ h:mma"}}
   +  json(格式化json对象)
      -  ` <pre >{{ {‘name‘:‘value‘} | json }}</pre>  `
   +  limitTo(限制个数)
      -  {{ numbers | limitTo:numLimit }}
   +  lowercase(小写)
      -  {{ lowercase_expression | lowercase}}
   +     uppercase(大写)
      -  {{ uppercase_expression | uppercase}}
   +  number(数字)
      -  {{1234 | number:0}}
   +  orderBy(排序)
   +  filter(子串匹配)
-  自定义过滤器
   + ` app.filter("myUpperCase",function () {
        return function (data) {
            return data.toUpperCase();
        }
    }); `