• Angular.js


    架构思想:MVVM
    视图和模型绑定可把MV加到VM中
    ng-app:主模块
    ng-repeat:重复循环

    服务和依赖注入
    AngularJS服务其作用就是对外提供某个特定的功能。
    AngularJS拥有内建的依赖注入(DI)子系统,可以帮助开发人员更容易的开发,理解和测试应用。
    DI允许你请求你的依赖,而不是自己找寻它们。比如,我们需要一个东西,DI负责找创建并且提供给我们。

    指令(Directives)
    指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。可以作为标签、属性、注释和类名使用。
    (ng-)指令内部自带
    ($)是angularjs的内制服务
    有一个根作用域root全局
    子元素设置自己的属性不然父元素会把子元素影响。

    数据绑定
    AngularJS的双向数据绑定,意味着你可以在Mode(JS)中改变数据,而这些变动立刻就会自动出现在View上,反之亦然。即:一方面可以做到model变化驱动了DOM中元素变化,另一方面也可以做到DOM元素的变化也会影响到Model。

    ng-controller
    要明确创建一个$scope 对象,我们就要给DOM元素安上一个controller对象,使用的是ng-controller 指令属性

    ajax
    $http 服务是AngularJS的核心服务之一,它帮助我们通过XMLHttpRequest对象或JSONP与远程HTTP服务进行交流。
    $http 服务是这样一个函数:它接受一个设置对象,其中指定了如何创建HTTP请求;它将返回一个承诺,其中提供两个方法: success方法和error方法。

    过滤器
    过滤器(filter),作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果。主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等。过滤器通常是伴随标记来使用的,将你model中的数据格式化为需要的格式。表单的控制功能主要涉及到数据验证以及表单控件的增强。ng内置了一些过滤器,它们是:
    currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。

    ng的内置过滤器
    ng内置了九种过滤器
    currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)

    currency (货币处理)
      使用currency可以将数字格式化为货币,默认是美元符号,你可以自己传入所需的符号,例如我传入人民币:{{num | currency : '¥'}}

      date (日期格式化)
      原生的js对日期的格式化能力有限,ng提供的date过滤器基本可以满足一般的格式化要求。用法如下:
    {{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}  


    指令(directive)
      通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的。
         模板中可以使用的东西包括以下四种:
    1.指令(directive):ng提供的或者自定义的标签和属性,用来增强HTML表现力;
    2.标记(markup):即双大括号{{}},可将数据单向绑定到HTML中;
    3.过滤器(filter):用来格式化输出数据;
    4.表单控制:用来增强表单的验证功能。
    其中,指令无疑是使用量最大的,ng内置了很多指令用来控制模板,如ng-repeat,ng-class,也有很多指令来帮你完成业务逻辑,如ng-controller,ng-model。
    指令的几种使用方式如下:
    作为标签:<my-dir></my-dir>
    作为属性:<span my-dir="exp"></span>
    作为注释:<!-- directive: my-dir exp -->
    作为类名:<span class="my-dir: exp;"></span>
    其实常用的就是作为标签和属性。


    样式相关的指令
      既然模板就是普通的HTML,那我首要关心的就是样式的控制,元素的定位、字体、背景色等等如何可以灵活控制。下面来看看常用的样式控制指令。
    1. ng-class
          ng-class用来给元素绑定类名,其表达式的返回值可以是以下三种:
    类名字符串,可以用空格分割多个类名,如’redtext boldtext’;
    类名数组,数组中的每一项都会层叠起来生效;
    一个名值对应的json对象,其键值为类名,值为boolean类型,当值为true时,该类会被加在元素上。
      下面来看一个使用map的例子:
    ng-class测试
    红色 加粗 删除线 
    <div ng-class=”{redtext:{{red}}, boldtext:{{bold}}, striketext:{{strike}}}” ></div>
      如果你想拼接一个类名出来,可以使用插值表达式,如:
      <div class=”{{style}}text”>字体样式测试</div>
      然后在controller中指定style的值:
      $scope.style = ‘red’;
      与ng-class相近的,ng还提供了ng-class-odd、ng-class-even两个指令,用来配合ng-repeat分别在奇数列和偶数列使用对应的类。这个用来在表格中实现隔行换色再方便不过了。
    2. ng-style
      ng-style用来绑定元素的css样式,其表达式的返回值为一个js对象,键为css样式名,值为该样式对应的合法取值。用法比较简单:
    <div ng-style="{color:'red'}">ng-style测试</div>
    <div ng-style="style">ng-style测试</div>
    $scope.style = {color:'red'};  
    3. ng-show,ng-hide
       对于比较常用的元素显隐控制,ng也做了封装,ng-show和ng-hide的值为boolean类型的表达式,当值为true时,对应的show或hide生效。框架会用display:block和display:none来控制元素的显隐。


    表单控件功能相关指令
      对于常用的表单控件功能,ng也做了封装,方便灵活控制。
      ng-checked控制radio和checkbox的选中状态
      ng-selected控制下拉框的选中状态
      ng-disabled控制失效状态
      ng-multiple控制多选
      ng-readonly控制只读状态
      以上指令的取值均为boolean类型,当值为true时相关状态生效,道理比较简单就不多做解释。注意: 上面的这些只是单向绑定,即只是从数据到模板,不能反作用于数据。要双向绑定,还是要使用 ng-model 。

  • 相关阅读:
    顺序的分数 Ordered Fractions
    容易的网络游戏
    Linux常用命令大全(share)
    Linux和UNIX监控
    Linux命令汇总
    优秀员工的10个修养
    ibatis使用--SqlMapClient对象
    一个男人关心的东西 决定了他的层次
    Linux下vi命令大全
    Linux中图形界面和文本模式相互切换
  • 原文地址:https://www.cnblogs.com/miaozhicheng/p/4984610.html
Copyright © 2020-2023  润新知