AngularJs基础

AngularJs核心特性

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

1.AngularJs的使用

@H_301_14@ 1.1 安装angular

1.1.1 通过npm进行下载

$ npm install angular

1.1.2 使用bower下载

$ bower install angular

@H_301_14@ 1.2 引入angularjs

@H_301_14@ 1.3 安装扩展程序ng-inspector @H_301_14@ 1.4 启动angular程序

在指定标签上添加跟作用域

ng-app(rootScope->ngapp)

ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序

2.初识ng-model

在ng-app下的内容都归angular所管理

@H_301_14@ 2.1 数据模型的挂载

将ng-model生成数据模型然后挂在当前作用域上

@H_301_14@ 2.2 实现model和view的双向绑定

变量和视图进行绑定，取出模型上的数据

3.表达式

@H_301_14@ 3.1 表达式的组成

两个花括号{{}}组成，可以把数据绑定到HTML

@H_301_14@ 3.2 表达式结果

用来做表达式结果

@H_301_14@ 3.3 三元表达式

4.数据绑定

@H_301_14@ 4.1 ng-bind

显示数据等同于{{}}

防止用户看到被渲染之前的样子

@H_301_14@ 4.2 ng-non-bindable

取消绑定数据

@H_301_14@ 4.3 ng-bind-template

绑定多个模板

解决 ng-bind 中只能绑定一个的问题

5.初始化数据

@H_301_14@ 5.1 ng-init

ng-init在当前作用域下定义初始值。

多组值用分号;隔开

@H_301_14@ 5.2 赋值对象和数组

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

6.data-指令

data-ng-init 与 ng-init 等价

<div data-ng-init="name=[{age:7},{age:8}]"></div>
<div ng-init="name=[{age:7},{age:8}]"></div> 

7.ng-repeat遍历

@H_301_14@ 7.1 遍历对象

初始化对象

<div ng-init="phones={age:7,sex:2,name:'zfpx'}">
</div> 

遍历对象

@H_301_14@ 7.2 遍历数组

初始化数组

<div ng-init="phones=[{name:'苹果',age:7},{name:'华为',{name:'htc',age:7}]">
</div> 

遍历数组

<div ng-repeat="(key,phone) in phones">
    {{key}}{{phone.name}}
</div> 

@H_301_14@ 7.3 嵌套循环数组

内部获取外部索引
方法1：

方法2：

遍历数组需注意track by $index

<div ng-init="phones=['苹果','苹果','苹果']">
    <div ng-repeat="phone in phones  track by $index" >
        {{phone}}
    </div>
</div> 

8.ng-click

显示隐藏/效果

@H_301_14@ 8.1 增加样式

<style>
    .block{
        display: block;
    }
    .none{
        display: none;
    }
</style> 

@H_301_14@ 8.2 增加ng-click

<div ng-init="flag=false" ng-click="flag=!flag"> {{!flag?'显示':'隐藏'}} </div> <div class=" {{flag?'block':'none'}}">content</div>

9.ng-hide/ng-show/ng-if

@H_301_14@ 9.1 ng-hide/ng-show

简单的操作css样式

<div ng-init="flag=false" ng-click="flag=!flag"> {{!flag?'显示':'隐藏'}} </div> <div ng-show="flag">content</div>

@H_301_14@ 9.2 ng-if

ng-if为false时候内部节点消失，内部指令不执行

<div ng-init="flag=false" ng-click="flag=!flag"> {{!flag?'显示':'隐藏'}} </div> <div ng-if="flag">content</div>

ng-if不停的修改dom性能消耗较大,使用ng-show,ng-if与ng-repeat经常连用

@H_301_14@ 9.3 ng-switch

<input type="text" ng-model="sex">
<div ng-switch="sex">
    <p ng-switch-when="boy">boy</p>
    <p ng-switch-when="girl">girl</p>
    <p ng-switch-default>no person</p>
</div> 

@H_301_14@ 9.4增加class值

9.4.1 写法1:

9.4.2 写法2:

9.4.3 行内样式

9.4.4 class使用场景

bootstrap导航切换

<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> 

10.引入页面

加载外部模板

11.内置过滤器

@H_301_14@ 11.1 currency

货币过滤器

@H_301_14@ 11.2 lowercase & uppercase

大小写转换过滤器

{{'abc' | uppercase }}
{{'ABC' | lowercase }} 

@H_301_14@ 11.3 limitTo

限制位数

@H_301_14@ 11.4 number

数字过滤器

@H_301_14@ 11.5 json

对象过滤器

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

@H_301_14@ 11.6 date

日期过滤器

@H_301_14@ 11.7 orderBy

排序orderBy:’字段名字’:’正反序'(true/false)

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

@H_301_14@ 11.8.filter

查询过滤器

11.8.1 查询全部值

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

11.8.2 查询全指定字段

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

12.angular常用工具方法

@H_301_14@ 12.1 uppercase&&lowercase

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

@H_301_14@ 12.2 equals

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

@H_301_14@ 12.3 extend

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

@H_301_14@ 12.4 fromJson&&toJson

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

@H_301_14@ 12.5 copy

301_14@ 12.6 forEach

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

@H_301_14@ 12.7 bind

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

上一篇：angularjs – 当angular.js完成加载下一篇：angularJS与后台连接方法