特点:
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 定义一个复杂的指令