摘要:在這樣的背景下,誕生了,它是一種模式的前端框架,為前后端的數(shù)據(jù)綁定提供了一套解決方案,并自定義了一套事件標(biāo)準(zhǔn),使得前后端的數(shù)據(jù)交互更加的合理化并且高效,利于管理。使得這個(gè)強(qiáng)大的框架終于將虛掩的門(mén)打開(kāi)。第二眼,就一探究竟吧。
AngularJS是個(gè)啥?
誕生于2009年,2012年被google收購(gòu),是一個(gè)適用于CRUD、SPA等類型應(yīng)用的前端MVC框架
為什么要使用AngularJS在涉及數(shù)據(jù)綁定的操作過(guò)程中,經(jīng)典的做法是用AJAX將數(shù)據(jù)從服務(wù)端取回,接著將數(shù)據(jù)解析成變量,然后在前端進(jìn)行字符串的拼接、嵌套,再插入到頁(yè)面。
低數(shù)據(jù)量的綁定這樣的操作的確無(wú)可厚非,但是在數(shù)據(jù)量龐大的時(shí)候(比如需要拼接成百上千行的字符串),這種方式就顯得難以執(zhí)行且不太科學(xué)了。
在這樣的背景下,AngularJS誕生了,它是一種MVC模式的前端框架,為前后端的數(shù)據(jù)綁定提供了一套解決方案,并自定義了一套事件標(biāo)準(zhǔn),使得前后端的數(shù)據(jù)交互更加的合理化并且高效,利于管理。
構(gòu)建第一個(gè)AngularJS應(yīng)用下載AngularJS
與大部分框架一樣,AngularJS有開(kāi)發(fā)版(可讀)和壓縮版(不可讀,用于生產(chǎn)環(huán)境),這里我們下載AngularJS的壓縮版
https://angularjs.org/
由于目前大部分應(yīng)用尚未進(jìn)行Angular2改造,因此這里使用第一代Angular,之后再對(duì)Angular2漸進(jìn)增強(qiáng)
引入AngularJS
初始化Angular應(yīng)用管理邊界
給元素加上一個(gè)屬性ng-app(其實(shí)是Angular定義的指令,它聲明一個(gè)angu的管理邊界)
調(diào)用Angular對(duì)象,管理ng-app
angular.module("app",[])//數(shù)組代表依賴注入的內(nèi)容
AngularJS將所有api封裝到angular對(duì)象中
使用angular對(duì)象管理邊界的時(shí)候,要先聲明一個(gè)angular模塊,對(duì)這個(gè)模塊的操作,即是對(duì)管理邊界的控制
在管理區(qū)域內(nèi)加入內(nèi)容
{{ "This is your first Angular App!" }}
Angular將頁(yè)面中所有的表達(dá)式進(jìn)行解析,并輸出里面的內(nèi)容
Angular不需要在js中聲明邊界管理模塊也可以在頁(yè)面顯示內(nèi)容
基本指令指令:帶有特定功能的自定義屬性
指令格式:ng-command
基本指令:
初始化應(yīng)用管理邊界——ng-app
定義Angular的應(yīng)用管理邊界,前面已經(jīng)使用到
初始化數(shù)據(jù)指令——ng-init
定義初始化的數(shù)據(jù)
{{ username }}
這個(gè)數(shù)據(jù)可以是除函數(shù)外的任意的js數(shù)據(jù)類型
{{ user.username }}
{{ user.sayHello }}
今天是星期{{ data[2] }}
動(dòng)態(tài)數(shù)據(jù)模型——ng-model
它接收頁(yè)面上動(dòng)態(tài)數(shù)據(jù)的變化
監(jiān)聽(tīng)到輸入框的變化{{ text }}
數(shù)據(jù)綁定——ng-bind
將數(shù)據(jù)綁定到當(dāng)前元素
{{ username }}
它與花括號(hào)表達(dá)式不同,它只能將數(shù)據(jù)綁定到html內(nèi)容中(類似innerHTML實(shí)現(xiàn)),而花括號(hào)表達(dá)式可以將數(shù)據(jù)綁定到任何地方
PS:ng-model也能實(shí)現(xiàn)數(shù)據(jù)的捆綁,但破壞了規(guī)范的分工機(jī)制,不提倡
遍歷——ng-repeat
遍歷datalist,根據(jù)遍歷的情況生成元素,并且可以在元素中使用遍歷到的數(shù)據(jù) 控制器 controller{{ $item }}
既然Angular是MVC模式的框架,那么一定有一個(gè)controller(C)層面
控制器的作用:
監(jiān)聽(tīng)頁(yè)面中的請(qǐng)求和行為
訪問(wèn)處理數(shù)據(jù)
將數(shù)據(jù)同步到view
控制器關(guān)注的部分
view
css
image
html
js
插個(gè)樓!——$scope
$scope是angular對(duì)象內(nèi)置服務(wù)對(duì)象,關(guān)聯(lián)當(dāng)前ng-app,是ng-controller實(shí)現(xiàn)內(nèi)部數(shù)據(jù)和事件方法綁定(可以說(shuō)是托管到$scope上,并通過(guò)$scope去調(diào)用)的核心對(duì)象
控制器實(shí)現(xiàn)步驟:
聲明控制器
通過(guò)應(yīng)用邊界管理模塊去監(jiān)聽(tīng)控制器
//在模塊 var app = angular("app",[]).controller("mycontroller", function() { //這里就要使用到$scope來(lái)進(jìn)行數(shù)據(jù)的控制 $scope.hostage = "I am a hostage, controlled by Samuel" $scope.something = "I am something." })AngularJS事件
AngularJS自己定義了一套事件標(biāo)準(zhǔn),通過(guò)指令的形式進(jìn)行監(jiān)聽(tīng)
示例:
單擊事件——ng-click
html:
I"m wating for message.
{{ message }}
js:
var app = angular.module("app", []).controller("mycontroller", function() { $scope.sendMessage = function() { $scope.message = "I"m message!"; } });
第一眼,我們看到了:
AngularJS的核心業(yè)務(wù)(優(yōu)勢(shì),解決的問(wèn)題)、使用方式、編程模式(MVC)、基本的數(shù)據(jù)交互。使得這個(gè)強(qiáng)大的框架終于將虛掩的門(mén)打開(kāi)。
第二眼,就一探究竟吧。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/80910.html
摘要:最近在看,打算跟著書(shū)中的代碼敲一遍,加深對(duì)的理解。在這里記錄過(guò)程中的問(wèn)題與心得。根據(jù)排查內(nèi)存耗盡應(yīng)該是這個(gè)版本的問(wèn)題,換成后問(wèn)題消失。因此認(rèn)為這種寫(xiě)法是有風(fēng)險(xiǎn)的,必須用頂上那一行注釋表明我確實(shí)要全局都的才行。不得不感嘆的嚴(yán)謹(jǐn)。 最近在看 build your own angularjs ,打算跟著書(shū)中的代碼敲一遍,加深對(duì)AngularJS的理解。在這里記錄過(guò)程中的問(wèn)題與心得。 Int...
摘要:客戶端框架的個(gè)痛點(diǎn)我們?cè)缰罆?huì)面臨很多的困難,但是不知道會(huì)有這么難。這是對(duì)的,但是總體上來(lái)說(shuō),客戶端框架降低了遲緩的開(kāi)銷。但是,這些問(wèn)題加在一起就是另一回事了,可以說(shuō),客戶端框架成為了我們開(kāi)發(fā)工作的一大負(fù)擔(dān)。 更新: 本文原本的標(biāo)題是為何我們棄用AngularJS:……,現(xiàn)在把它去掉了。因?yàn)檫@些痛點(diǎn)主要是針對(duì)單頁(yè)JS應(yīng)用框架的。有些人認(rèn)為本文是專門(mén)批判AngularJS的,這可不是我的...
摘要:首先,我們需要在入口頁(yè)面的中配置根路徑然后創(chuàng)建一個(gè)路由模塊路由配置在主模塊中導(dǎo)入配置好的路由模塊而在頁(yè)面中需要一個(gè)容器去承載上面代碼中的定義了用戶點(diǎn)擊后的路由跳轉(zhuǎn),定義該路由激活時(shí)的樣式類。 剛實(shí)習(xí)的時(shí)候用過(guò)AngularJS,那時(shí)候真的是連原生JavaScript都不會(huì)寫(xiě),依樣畫(huà)葫蘆做了幾個(gè)管理后臺(tái)。然后突然換項(xiàng)目了,AngularJS就不寫(xiě)了,感覺(jué)前前后后接觸了一年多的Angula...
摘要:通過(guò)加對(duì)應(yīng)的調(diào)整布局。這些類實(shí)際是通過(guò)使用選擇器為當(dāng)前元素增加了左側(cè)的邊距。簡(jiǎn)單說(shuō)兩種模式屬性為代表的框架自定義屬性為代表的框架我個(gè)人認(rèn)為過(guò)多導(dǎo)致布局和樣式混在一起不好分辨,后期維護(hù)較困難,決定采用框架的設(shè)計(jì)模式。 showImg(https://segmentfault.com/img/bVEeOl?w=1200&h=500); 本文作為 Flex 布局進(jìn)階,不對(duì)基礎(chǔ)做詳細(xì)介紹,關(guān)于...
流行框架 簡(jiǎn)介 angularjs是一款非常優(yōu)秀的前端高級(jí)JS框架,由谷歌團(tuán)隊(duì)開(kāi)發(fā)維護(hù),能夠快速構(gòu)建單頁(yè)web應(yīng)用,化繁為簡(jiǎn) 無(wú)論是angularjs還是jQuery都是用原生JS封裝的 庫(kù):對(duì)代碼進(jìn)行封裝,調(diào)用封裝的方法,簡(jiǎn)化操作 傳統(tǒng)方式是用get方式獲取元素,然后點(diǎn)方法 jQuery庫(kù)實(shí)現(xiàn)了對(duì)獲取方式的封裝,對(duì)方法的封裝 框架:提供代碼書(shū)寫(xiě)規(guī)則,按照規(guī)則去寫(xiě)代碼,框架會(huì)幫我們實(shí)現(xiàn)響應(yīng)的功能...
閱讀 3611·2021-11-15 11:38
閱讀 2807·2021-11-11 16:55
閱讀 2558·2021-11-08 13:22
閱讀 2633·2021-11-02 14:45
閱讀 1314·2021-09-28 09:35
閱讀 2589·2021-09-10 10:50
閱讀 468·2019-08-30 15:44
閱讀 2783·2019-08-29 17:06