Angular中的常用方法

作者：jiangwen

2016-06-30 09:11:37

287

AngularJs核心特性

双向数据绑定 model变化，view也变化
模版将html文件解析到DOM中
MVVM Model-View-ViewModel
模块化与依赖注入
指令可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性。

为什么用angular

前后端分离,后端提供数据接口
html和js分离
减少js代码,减少DOM元素查找，事件绑定等代码

AngularJs的使用

引入angularJs
- 通过npm进行下载
```
npm install angular
```
- 使用bower下载angular.js
```
bower install angular
```
ng-app(rootScope->ngapp)
ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序

初识ng-model

ng-app里面的所有的内容都归angular来管
将ng-model生成数据模型然后挂在rootScope上
实现model和view的双向绑定(变量和视图进行绑定)

表达式

{{}} 两个花括号{{}}组成，可以把数据绑定到HTML
可以用来做表达式结果
可以使用三元表达式

数据绑定

ng-bind 显示数据类似于 {{}} 防止用户看到被渲染之前的样子
ng-non-bindable 取消绑定html
ng-bind-template 解决 ng-bind 中只能绑定一个的问题
```
  <div ng-bind-template="{{name}} {{age}}"></div>
```

ng-init

ng-init 指令为 AngularJS 应用程序定义了初始值。
不仅可以赋值字符串,也可以赋值数字,数组,对象

通常情况下,不使用 ng-init。使用一个控制器或模块来代替它。

data-指令

data-ng-init 与 ng-init 等价

ng-repeat遍历

会创建自己的作用域

不仅能遍历数组还能遍历对象

<div ng-init="phones=[{name:[{a:1}]},{name:[{a:1}]}]">
  <div ng-repeat="phone in phones" ng-init="c=$index">
      <div ng-repeat="a in phone.name" ng-init="b=$index">
         {{c}}{{b}}
      </div>
  </div>
</div>

遍历数组需注意track by $index

ng-click

显示隐藏/效果

ng-hide/ng-show/ng-if

布尔类型为true执行内部指令，为false时不执行内部指令
ng-if为false时候内部节点消失

ng-switch

<input type="text" ng-model="name">
<div ng-switch="name">
    <p ng-switch-when="by">123</p>
    <p ng-switch-when="hello">456</p>
    <p ng-switch-when="girl">789</p>
    <p ng-switch-default>10000</p>
</div>

增加class值

ng-class ="{true:'',false:''}[isActive]";
ng-class ="{'selected':isSelected}";
ng-style ="{color:'red'}";

示例1 弹出框

<div class="alert" ng-class="{'alert-success':success=='alert-success','alert-info':success=='alert-info'}">...</div>

示例2 导航切换

<ul class="nav nav-tabs">
  <li role="presentation" ng-click="click='Home'" ng-class="{active:click=='Home'}"><a href="">Home</a></li>
  <li role="presentation" ng-click="click='Profile'" ng-class="{active:click=='Profile'}"><a href="">Profile</a></li>
  <li role="presentation" ng-click="click='Messages'" ng-class="{active:click=='Messages'}"><a href="">Messages</a></li>
</ul>

引入页面

ng-include 加载外部页面

currency 货币过滤器

{{100 | currency:'￡' }}

lowercase & uppercase 大小写转换过滤器

{{'abc' | uppercase }}

{{'ABC' | lowercase }}

limitTo 限制位数

{{123456 | limitTo:5}}

number 数字过滤器

{{1234.2345|number:2}}

json 对象过滤器

<pre>
{{{aa:123,bb:456} | json}}
</pre>

date 日期过滤器

{{1654325689063 | date:'yyyy-MM-dd hh:mm:ss'}}

orderBy

    <div ng-repeat="p in phones | orderBy:'-age':'reverse'">
        {{p.name}}
    </div>

filter 查询过滤器

<div ng-repeat="p in phones | filter:{age:query}">
    {{p.name}}
</div>

angular工具方法

angular.uppercase
angular.lowercase
angular.equals
angular.extend
angular.fromJson
angular.toJson
angular.copy
angular.forEach
angular.bind

angular.uppercase&&angular.lowercase

var abc = angular.uppercase("aaaa");
console.log(abc);
var abc = angular.lowercase("aaaa");
console.log(abc);

angular.equals

var a = angular.equals(NaN,NaN);
console.log(a);

angular.extend

var obj = {a:123},obj1 = {b:456};
angular.extend(obj,obj1);
console.log(obj);

angular.fromJson&&angular.toJson

var obj = '{"aa":123,"bb":456}';
var a =angular.fromJson(obj);
a = angular.toJson(a);
console.log(a);

angular.copy

var obj = {a:123},obj1 = {b:456};
angular.copy(obj,obj1);
console.log(obj1);

angular.forEach

var arr = [{name:1},{name:2},{name:3}];
var result = [];
angular.forEach(arr,function (item) {
    this.push(item.name);
},result);

angular.bind

var obj = {name:2};
function arr(who){console.log(this.name+who);}
var newArr =  angular.bind(obj,arr,1);
newArr();

seajs

Angular MVC