AngularJs基本篇 一 (简介+基本指令)

1.AngularJs 五大核心

• 双向数据绑定 —— 实现了把model与view完全绑定在一起，model变化，view也变化，反之亦然。

• 模板 —— 在AngularJS中，模板相当于HTML文件被浏览器解析到DOM中，AngularJS遍历这些DOM，也就是说AuguarJS把模板当做DOM来操作，去生成一些指令来完成对view的数据绑定。

• MVVM —— 吸收了传统的MVC设计模式针但又并不执行传统意义上的MVC，更接近于MVVM(Moodel-View-ViewModel)。

• 依赖注入 —— AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。

• 指令 —— 可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性

2.AngularJs 基本指令

Angular.js应用的动态性和响应能力，都要归功于指令属性，常见的有：ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。

a.指令：ng-app

ng-app指令来标明一个AngularJS应用程序，并通过AngularJS完成自动初始化应用和标记应用根作用域，同时载入和指令内容相关的模块，并通过拥有ng-app指令的标签为根节点开始编译其中的DOM。

引用方法很简单，如下所示：

<div ng-app=""> 
</div>    

b.指令：ng-init

ng-init指令初始化应用程序数据，也就是为AngularJS应用程序定义初始值，通常情况下，我们会使用一个控制器或模块来代替它，后面我们会介绍有关控制器和模块的知识。

我们不仅可以赋值字符串，也可以赋值为数字、数组、对象，而且可以为多个变量赋初始值，如下所示：

<div ng-app="" ng-init="test1=1;test2=5"> 
</div>
//或者
<div ng-app="" ng-init="names=['1','2','3']"> 
</div>

c.AngularJS表达式

输出数字，如下示例：

<div ng-app="" ng-init="test1=12;test2=5">
 
Price： {{ test1* test2}}
 
</div>

输出对象，如下示例：

<div ng-app="" ng-init="names=['1','2','3']">
 
Name： {{ names[0] }}
 
</div>

d.指令：ng-model

在AngularJS中，只需要使用ng-model指令就可以把应用程序数据绑定到HTML元素，实现model和view的双向绑定。

如下示例，使用ng-model指令对数据进行绑定。

<div ng-app="">
 
input value：<input type="text" ng-model="test" />
 
your value： {{ test}}
 
</div>

e.指令：ng-bind

指令ng-bind和AngularJS表达式{{}}有异曲同工之妙，但不同之处就在于ng-bind是在angular解析渲染完毕后才将数据显示出来的。

如下使用ng-bind指令绑定把应用程序数据。

<div ng-app="">
    input your name：<input type="text" ng-model="test" />
    Hello Your Name : <span ng-bind="test"></span>
</div>

f.指令：ng-click

AngularJS也有自己的HTML事件指令,比如说通过ng-click定义一个AngularJS单击事件。

对按钮、链接等，我们都可以用ng-click指令属性来实现绑定，如下简单示例：

<div ng-app="" ng-init="isshow=false">
    <button ng-click="isshow= !isshow">隐藏/显示</button>
    <div ng-hide="isshow">
        input your name：<input type="text" ng-model="test" />
        Hello Your Name : <span ng-bind="test"></span>
    </div>
</div>