AngularJS 于 09年开发,后来成为Google公司的项目。
AngularJS弥补了HTML在构建应用方面的不足,其通过使用标识符(directives)结构,来扩展Web应用中HTML词汇使开发者可以使用HTML来声明动态内容。从而使得WEB开发和测试工作变得更加容易。
AngularJS功能
AngularJS是专门为应用程序设计的HTML
AngularJS使得开发现代的单一页面应用程序(SPAs:single page application)变得更加容易
1、AngularJS把应用程序数据绑定到HTML元素
2、AngularJS可以克隆和复制HTML元素
3、AngularJS可以隐藏和显示HTML元素
4、AngularJS在HTML元素“背后”添加代码
5、AngularJS支持输入验证
AngularJS号称下一代WEB应用 主要特性如下:
1、MVC
2、模块化和依赖注入
3、双向数据绑定
4、指令与UI控件
学AngularJS之前为什么要学ionic
1、AngularJS integrate-整合了AngularJS
2、URL routing , use AngularUI Router
url路由使用AngularUI Router 可以指定不同的路由,方便集成和开发
3、AngularJS Extensions & Directives 扩展了AngularJS指令
ion-tab, ion-content, ion-nav-view, ion-header
$ionicPopup, $ionicLoading, $ionicModal...
学习AngularJS 的资源
http://Angularjs.org 正常情况打不开
Angularjs下载:
通过nodejs下载:npm install angular
为了使用AngularJS我们需要做什么事?
1、下载加载AngularJS库
2、使用ng-app指令告诉angular应该管理DOM中的哪些部分?
AngularJS中常用名词 也就是所说的常用指令
HTML5允许扩展的(自制的)属性,以data-开头。
AngularJS属性以ng-开头,但是您可以使用data-ng-来让网页对HTML5有效
俗话说,下面的指令可以在开头加上data-
例如:ng-app等同于 data_ng_app
ng-app(指令) | 定义应用程序的根元素 | |
ng-bind | 绑定HTML元素到应用程序数据 | |
ng-click | 定义元素被单击时的行为 | |
ng-controller | 为应用程序定义控制器对象 | |
ng-disabled | 绑定应用程序数据到HTML的disabled属性 | |
ng-init | 为应用程序定义初始值 | |
ng-model | 绑定应用程序数据到HTML元素 | |
ng-repeat | 为控制器中的每个数据定义一个模板 | |
ng-show | 隐藏或显示HTML元素 |
1、ng_app ng_bind ng_model {{}}
ng_app:
ng_app指令定义了AngularJS应用程序的 根元素
ng_app 指令在网页加载完毕时会自动初始化应用程序
例如通过一个值(ng-app="myModule"连接到代码模块)
ng-model指令:
ng-model绑定HTML元素到应用程序数据。
ng-model指令也可以:
为应用程序数据提供类型验证(number email required)
为应用程序数据提供状态(invalid dirty touched error)
为HTML元素提供CSS类
绑定HTML元素到HTML表单。
ng-bind指令等同于{{}}
绑定HTML元素到应用程序数据
ng-init指令
ng-init指令为AngularJS应用程序定义了 初始值
通常,不使用ng-init 您将使用一个控制器或模块来代替它。
<div ng-app="" ng-init="firstName='John'">
<p>姓名为:<span ng-bind="firstName"></span></p>
</div>
|
data-指令 data-ng-init 与 ng-init等价
<div data-ng-app="" data-ng-init="firstName='John'">
<p> 姓名为 <span data-ng-bind="firstName"></span></p>
</div>
|
实例
<!doctype html>
<html>
<body>
<div ng-app="">
<p>在输入框中尝试输入:</p>
<p>姓名:<input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
<script src="angular.min.js"></script>
</body>
</html>
|
<!doctype html>
<html>
<body>
<div ng-app="">
<p>在输入框中尝试输入:</p>
<p>姓名:<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
<script src="angular.min.js"></script>
</body>
</html>
|
当页面加载完毕,AngularJS自动开启
ng-app指令告诉AngularJS <div>元素是AngularJS应用程序的“所有者”
ng-model指令把输入域的值绑定到应用程序变量name
ng-bind指令把应用程序变量name绑定到某个段落的innerHTML
AngularJS表达式
AngularJS表达式卸载双大括号内:{{expression}}
AngularJS表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之妙
AngularJS将在表达式书写的位置“输出”数据
AngularJS表达式很像JavaScript表达式,他们可以包含文字、运算符和变量
<!doctype html>
<html>
<body>
<div ng-app="">
<p>我的第一个表达式:{{ 5+5 }} </p>
</div>
<script src="angular.min.js"></script>
</body>
|
AngularJS控制器
AngularJS控制器是控制AngularJS应用程序的数据
AngularJS控制器是常规的JavaScript对象
AngularJS应用程序被控制器控制
ng-controller指令定义了应用程序控制器
控制器是JavaScript对象,由标准的JavaScript对象的构造函数 创建
控制器的$scope是控制器所指向的应用程序HTML文件
angular中$scope是连接controllers(控制器)和 templates(模板 view/视图)的主要胶合体,我们可以把我们的model存放在scope上,来达到双向绑定,