4、angular框架介绍、运用

angularJS 总结：

核心：只关心数据，完全不关心ui 的事

0、angularJS程序基本结构

– ng-app 确定angularJS 接管的范围（子元素）
– ng-model 数据模型（双向绑定）
– ng-bind 输出
– {{}} 输出

0.1、angularJS表达式

– {{表达式}} 是ng 自己的一套解析程序，不完全和js 一样
– ng 和 js 表达式 不 互通（ng 变量 都是 $scope 的一部分）
– 数据初始化：ng-init = “名字:值;名字:值”

1、class 两种写法

– 直接写：class = “{{xxx}}”
– 数组：ng-class = “arr”

<style>
    .class1{width:200px;height:30px;}
</style>
<div ng-app="" ng-init="class1='class1';arr=['class1'];">
  <p>名字 : <input class="{{class1}}" type="text" ng-model="name"></p>
  <p>名字 : <input ng-class="arr" type="text" ng-model="name"></p>
</div>

2、style 两种写法

– 直接写：style = “{{xxx}}”
– json：ng-style = “json”

<div ng-app="" ng-init="style = 'width:200px;height:30px;';json = {width:'100px',height:'100px'}">
  <p>名字 : <input style="{{style}}" type="text" ng-model="name"></p>
  <p>名字 : <input ng-style="json" type="text" ng-model="name"></p>
</div>

3、ng-if，ng-show，ng-hide

– ng-if 真正的删除元素
– ng-show 显示/隐藏元素
– ng-hide 显示/隐藏元素
– {{三目 ? 条件成立 : 条件不成立}}

4、事件 ng-xxx 例如：ng-click

5、循环

– ng-repeat = “value in arr/json”
– ng-repeat = “(key,value) in arr/json”
– ng-repeat 和 ng-事件、赋值，同时出现在同一元素上可能会出问题
e.g:

<input type = "button" ng-repeat = "v in arr" ng-click="a = a + 1">

解决办法为：ng-事件 中不要直接用表达式，而是用controller 中定义的函数
e.g:

<input type = "button" ng-repeat = "v in arr" ng-click="fn()">

6、$scope 作用域对象

可添加、可获取
可监视：

$scope.$watch("名称",function(){
    // 监视到数据变了，干什么
},深度监视)；

7、$http数据交互

$http.get(url,{params:{xxx:'yyy',aaa:'bbb'}})
.success(function(数据){})
.error(function(){});

$http.post....

$http.jsonp(url,{params:{...,cb:'JSON_CALLBACK'}})
.success(function(数据){})
.error(function(){});