AngularJS是个啥?
诞生于2009年,2012年被google收买,是一个适用于CRUD、SPA等范例运用的前端MVC框架
为何要运用AngularJS
在触及数据绑定的操纵过程当中,典范的做法是用AJAX将数据从效劳端取回,接着将数据剖析成变量,然后在前端举行字符串的拼接、嵌套,再插进去到页面。
低数据量的绑定如许的操纵确实无可厚非,但是在数据量巨大的时刻(比方须要拼接成百上千行的字符串),这类体式格局就显得难以实行且不太科学了。
在如许的背景下,AngularJS诞生了,它是一种MVC情势的前端框架,为前后端的数据绑定供应了一套处理方案,并自定义了一套事宜范例,使得前后端的数据交互越发的合理化而且高效,利于治理。
构建第一个AngularJS运用
下载AngularJS
与大部份框架一样,AngularJS有开辟版(可读)和压缩版(不可读,用于临盆环境),这里我们下载AngularJS的压缩版
https://angularjs.org/
因为如今大部份运用还没有举行Angular2革新,因而这里运用第一代Angular,以后再对Angular2渐进加强
引入AngularJS
<script src="./lib/angular.min.js"></script>
初始化Angular运用治理边境
给元素加上一个属性ng-app
(实际上是Angular定义的指令,它声明一个angu的治理边境)
<div ng-app="app"></div>
<!--此div如今遭到AngularJS束缚-->
挪用Angular对象,治理ng-app
angular.module('app',[])//数组代表依靠注入的内容
AngularJS将一切api封装到angular对象中
运用angular对象治理边境的时刻,要先声明一个angular模块,对这个模块的操纵,等于对治理边境的掌握
在治理区域内到场内容
<div ng-app="app">
{{ 'This is your first Angular App!' }}
</div>
Angular将页面中一切的表达式举行剖析,并输出内里的内容
Angular不须要在js中声明边境治理模块也能够在页面显现内容
基础指令
指令:带有特定功用的自定义属性
指令花样:ng-command
基础指令:
初始化运用治理边境——
ng-app
定义Angular的运用治理边境,前面已运用到初始化数据指令——
ng-init
定义初始化的数据
<div ng-app="app" ng-init="username='Hello U!'">
{{ username }}
</div>
这个数据能够是除函数外的恣意的js数据范例
<div ng-app="app" ng-init="user={ username: 'Samuel', sayHello: 'Samuel say hello to you!' }; date=[1,2,3,4,5,6,7]">
{{ user.username }}
<br>
{{ user.sayHello }}
<br>
今天是礼拜{{ data[2] }}
</div>
动态数据模型——
ng-model
它吸收页面上动态数据的变化
<div ng-app="app">
<input ng-model="text" />
<span>监听到输入框的变化{{ text }}</span>
</div>
数据绑定——
ng-bind
将数据绑定到当前元素
<div ng-app="app" ng-init="username='Samuel'">
<span ng-bind:"username">
{{ username }}
</span>
</div>
它与花括号表达式差别,它只能将数据绑定到html内容中(相似innerHTML完成),而花括号表达式能够将数据绑定到任何地方
<div ng-app="app" ng-init="username='Samuel'>
<p id="{{ username }}"></p>
</div>
PS:ng-model
也能完成数据的绑缚,但破坏了范例的分工机制,不首倡
遍历——
ng-repeat
<div ng-app="app" ng-init="datalist=[1,2,3,4]">
<p ng-repeat="$item in datalist">{{ $item }}</p>
</div>
遍历datalist,依据遍历的状况天生元素,而且能够在元素中运用遍历到的数据
掌握器 controller
既然Angular是MVC情势的框架,那末一定有一个controller(C)层面
掌握器的作用:
监听页面中的请乞降行动
接见处置惩罚数据
将数据同步到view
掌握器关注的部份
view
css
image
html
js
插个楼!——$scope
$scope是angular对象内置效劳对象,关联当前ng-app,是ng-controller完成内部数据和事宜要领绑定(能够说是托管到$scope上,并经由过程$scope去挪用)的中心对象
掌握器完成步骤:
声明掌握器
<div ng-app="app" ng-controller="mycontroller"></div>
经由过程运用边境治理模块去监听掌握器
//在模块
var app = angular('app',[]).controller('mycontroller', function() {
//这里就要运用到$scope来举行数据的掌握
$scope.hostage = "I am a hostage, controlled by Samuel"
$scope.something = "I am something."
})
AngularJS事宜
AngularJS本身定义了一套事宜范例,经由过程指令的情势举行监听
示例:
单击事宜——
ng-click
html:
<div ng-app="app" ng-controller="mycontroller">
<button ng-click="sendMessage()">sendMessage</button>
<span>I'm wating for message.</span>
<br>
<span>{{ message }}</span>
</div>
js:
var app = angular.module('app', []).controller('mycontroller', function() {
$scope.sendMessage = function() {
$scope.message = "I\'m message!";
}
});
第一眼,我们看到了:
AngularJS的中心营业(上风,处理的题目)、运用体式格局、编程情势(MVC)、基础的数据交互。使得这个壮大的框架终究将虚掩的门翻开。
第二眼,就一探终究吧。