1.AngularJs 五大核心
-
双向数据绑定 —— 实现了把model与view完全绑定在一起,model变化,view也变化,反之亦然。
-
模板 —— 在AngularJS中,模板相当于HTML文件被浏览器解析到DOM中,AngularJS遍历这些DOM,也就是说AuguarJS把模板当做DOM来操作,去生成一些指令来完成对view的数据绑定。
-
MVVM —— 吸收了传统的MVC设计模式针但又并不执行传统意义上的MVC,更接近于MVVM(Moodel-View-ViewModel)。
-
依赖注入 —— AngularJS拥有内建的依赖注入子系统,可以帮助开发人员更容易的开发,理解和测试应用。
-
指令 —— 可以用来创建自定义的标签,也可以用来装饰元素或者操作DOM属性
Angular.js应用的动态性和响应能力,都要归功于指令属性,常见的有:ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。a.指令:ng-app
ng-app指令来标明一个AngularJS应用程序,并通过AngularJS完成自动初始化应用和标记应用根作用域,同时载入和指令内容相关的模块,并通过拥有ng-app指令的标签为根节点开始编译其中的DOM。
引用方法很简单,如下所示:
b. 指令:ng-init
- <div ng-app="">
- </div>
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>