你的位置:首页 > Java教程

[Java教程]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的核心服务之一,它帮助我们通过$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 ></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->ng-style测试</div>
<div ng->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 。