Angular JS

特点:

1.双向绑定

2.支持表单和表单验证

3.使用DOM控制结构来实现迭代或隐藏DOM片段

4.将逻辑代码关联到DOM

5.把HTML元素分割成可重用的组件 最大优势:在构建 增删改查 的页面应用

 

Angular 最开始是MVC 然后又MVVM

应用:

1.首先导入angular.min.js文件      

2.在<html 后面加入 ng-app> 或者 放在body后或者 div 或其它标签后  不同的只是作用域不同     

3.{{  }}  中的是运算后的结果

eg:

<!--{{}}中的是运算后的结果-->

<p>{{ 1+1 }} </p>

<p>{{"你好"+"中国"}}</p>

<!--保留小数点后三位-->

<p>{{3.1415926 | number}}</p>

<!--保留小数点后两位-->

<p>{{3.1415926 | number:2}}</p>

<!--带美元符号,并保留小数点后两位-->

<p>{{100 | currency}}</p>

<!--带指定符号,并保留小数点后两位-->

<p>{{100 | currency:"¥"}}</p>

 

ng-model相当于输入框里的内容 ng-repeat 实现迭代效果  ng-repeat="role in roles" ng-bind 将值绑定到当前元素的 innerHTML ng-init 执行给定的表达式 $odd 集合中为奇数为true  $even偶数  ng-class="$odd ?  'odd' : 'even'"  样式。 $first 第一个时为true $last  最后一个为true

<!--startsWith('李') 首字为 李 的-->

<!--endsWith('李') 末尾为 李 的-->

ng-style="{color:'white'}"

 

ng-show 值为true或flase 显示或隐藏元素 ng-hide 值为true或flase 隐藏或显示元素 ng-if="true"  保留元素 ng-if="false" 删除元素,移除元素

ng-if、ng-repeat、ng-switch会创建新的一个作用域

ng-switch ng-switch-when ng-switch-default

ng-checked="true" 单选框 被选中

加载(切记:里面要加‘’引号 类似ng-class中的)  <ng-include src="'table.html'"></ng-include>

自定义指令: module.directive(" ",function(){         return function (scope,element,attrs) { //scope获得day属性的值  element绑定指令的元素  attrs取得元素指令的集合                     }     }); angular.element("<ul>"); //创建 ul

过滤:<tr ng-repeat="li in lis | filter:{ age:16,sex:'男' }" >       以升序降序排列 orderBy:‘score’

 

改变原本的内容要使用 $apply方法 才行 $timeout 定时器方法可直接改变原本的内容

表单: $pristine   -表单或控件内容是否未输入过  返回true 或false

$dirty        -表单或控件内容是否已输入过  返回true 或false

$valid        -表单或控件内容是否已验证通过  返回true 或false

$invalid     -表单或控件内容是否未验证通过  返回true 或false

$error       -表单或控件内容验证时的错误提示信息  返回错误对象

 

三种服务: 1.factory     定义一个简单的指令 2.service     用构造函数 3.provider    定义一个复杂的指令

 

posted @ 2016-10-19 10:11  萌芽儿  阅读(85)  评论(0编辑  收藏  举报