Angularjs 特性介紹

Angularjs 有以下幾個(gè)關(guān)鍵的特性:

  1. MVC
  1. 數(shù)據(jù)雙向綁定
  2. 依賴注入
  3. 指令

接下來鳖轰,將給以上的特性進(jìn)行簡(jiǎn)單的介紹:

MVC

MVC 大家應(yīng)該都比較熟悉了清酥,M即模型model,V即視圖view脆霎,C即控制器controller总处。這背后的核心理念是:

把管理數(shù)據(jù)的代碼(model),應(yīng)用邏輯代碼(controller)睛蛛,以及向用戶展示數(shù)據(jù)的代碼(view)清晰的分離開鹦马。

在 Angular 應(yīng)用中,視圖就是 Document Object Model (DOM忆肾,文檔對(duì)象模型)荸频,控制器就是 javascript 類,而模型數(shù)據(jù)則被存儲(chǔ)在對(duì)象的屬性中客冈。

如以下簡(jiǎn)單的 App旭从,
視圖代碼:

<!DOCTYPE html>
<html ng-app="firstApp">

<head>
  <meta charset="utf-8" />
  <title>first app</title>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <input ng-model="name">
  <p>Hello {{name}}!</p>
</body>

</html>

控制層:

var app = angular.module('firstApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

模型層:
即控制器里的 $scope.name即 name 便是模型,這只是一個(gè)簡(jiǎn)單的模型场仲。
Angular 中有一個(gè)插件 js-data和悦,可以為每一個(gè)對(duì)象定義一個(gè)相應(yīng)的 factory,就像 java 中得持久層對(duì)象一樣渠缕。然后可以進(jìn)行注入鸽素,并可以進(jìn)行數(shù)據(jù)的獲取。

數(shù)據(jù)雙向綁定

Angular實(shí)現(xiàn)了雙向綁定機(jī)制亦鳞。所謂的雙向綁定馍忽,是從界面的操作能實(shí)時(shí)反映到數(shù)據(jù),數(shù)據(jù)的變更能實(shí)時(shí)展現(xiàn)到界面燕差。

一個(gè)最簡(jiǎn)單的示例就是這樣:

<body ng-controller="MainCtrl">
  <label>名稱:</label>
  <input ng-model="name" name="name" id="name">
  <p>Hello {{name}}!</p>
</body>
app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

這個(gè)實(shí)例便是在名稱的輸入框中遭笋,無論輸入什么,下面的 p 標(biāo)簽便會(huì)動(dòng)態(tài)的顯示輸入的內(nèi)容徒探。

依賴注入

依賴注入是一種軟件設(shè)計(jì)模式瓦呼,用來處理代碼的依賴關(guān)系。
簡(jiǎn)單說說依賴注入
一般來說有三種方法讓函數(shù)獲得它的需要的依賴:

  1. 它的依賴是能被創(chuàng)建的测暗,一般用new操作符就行
  1. 能夠通過全局變量查找依賴
  2. 依賴能在需要時(shí)被導(dǎo)入

前兩種方式都不是很好央串,因?yàn)樗鼈冃枰獙?duì)依賴硬編碼谎替,使得修改依賴的時(shí)候變得困難。特別是在測(cè)試的時(shí)候不好辦蹋辅,因?yàn)閷?duì)某個(gè)部分進(jìn)行孤立的測(cè)試常常需要模擬它的依賴。
第三種方式是最好的挫掏,因?yàn)樗槐卦诮M件中去主動(dòng)需找和獲取依賴侦另,而是由外界將依賴傳入。

function helloCtrl($scope) { 
  var vm = $scope;
}

如上例所示尉共,只需要把 $scope 對(duì)象放在 helloCtrl 的構(gòu)造函數(shù)里面褒傅,然后就可以后去它。
其他的 angular 的 service 如:$location袄友,$http殿托,$local 等也是可以通過放在構(gòu)造函數(shù)里獲得。同時(shí)剧蚣,你自定義的 service支竹、factory,也可以通過依賴注入獲得鸠按。

指令

指令是所有AngularJS 應(yīng)用最重要的部分礼搁。指令是DOM元素上的標(biāo)記,使元素?fù)碛刑囟ǖ男袨槟考狻ngularjs 內(nèi)置了一些指令馒吴,比如 ng-mode, ng-repeat, ng-show等。這些指令都賦予DOM元素特定的行為瑟曲。例如饮戳,ng-repeat 重復(fù)特定的元素,ng-show 有條件地顯示一個(gè)元素洞拨。

你可以通過自定義一個(gè)指令扯罐,來實(shí)現(xiàn)自己想要達(dá)到的效果。例如你想讓一個(gè)元素支持拖拽扣甲,你可以創(chuàng)建一個(gè)指令來實(shí)現(xiàn)它篮赢;你也可以創(chuàng)建一個(gè)指令顯示時(shí)間選擇器。

指令背后基本的想法很簡(jiǎn)單琉挖。它通過對(duì)元素綁定事件監(jiān)聽或者改變DOM而使HTML擁有真實(shí)的交互性启泣。這個(gè)功能讓我們可以創(chuàng)建更多有價(jià)值的插件進(jìn)行開源共享,也可以解決項(xiàng)目中代碼冗余的情況示辈。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末寥茫,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子矾麻,更是在濱河造成了極大的恐慌纱耻,老刑警劉巖芭梯,帶你破解...
    沈念sama閱讀 222,104評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異弄喘,居然都是意外死亡玖喘,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門蘑志,熙熙樓的掌柜王于貴愁眉苦臉地迎上來累奈,“玉大人,你說我怎么就攤上這事急但∨烀剑” “怎么了?”我有些...
    開封第一講書人閱讀 168,697評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵波桩,是天一觀的道長(zhǎng)戒努。 經(jīng)常有香客問我,道長(zhǎng)镐躲,這世上最難降的妖魔是什么储玫? 我笑而不...
    開封第一講書人閱讀 59,836評(píng)論 1 298
  • 正文 為了忘掉前任,我火速辦了婚禮萤皂,結(jié)果婚禮上缘缚,老公的妹妹穿的比我還像新娘。我一直安慰自己敌蚜,他們只是感情好桥滨,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,851評(píng)論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著弛车,像睡著了一般齐媒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上纷跛,一...
    開封第一講書人閱讀 52,441評(píng)論 1 310
  • 那天喻括,我揣著相機(jī)與錄音,去河邊找鬼贫奠。 笑死唬血,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的唤崭。 我是一名探鬼主播拷恨,決...
    沈念sama閱讀 40,992評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼谢肾!你這毒婦竟也來了腕侄?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,899評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎冕杠,沒想到半個(gè)月后微姊,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,457評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡分预,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,529評(píng)論 3 341
  • 正文 我和宋清朗相戀三年兢交,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片笼痹。...
    茶點(diǎn)故事閱讀 40,664評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡魁淳,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出与倡,到底是詐尸還是另有隱情,我是刑警寧澤昆稿,帶...
    沈念sama閱讀 36,346評(píng)論 5 350
  • 正文 年R本政府宣布纺座,位于F島的核電站,受9級(jí)特大地震影響溉潭,放射性物質(zhì)發(fā)生泄漏净响。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,025評(píng)論 3 334
  • 文/蒙蒙 一喳瓣、第九天 我趴在偏房一處隱蔽的房頂上張望馋贤。 院中可真熱鬧,春花似錦畏陕、人聲如沸配乓。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)犹芹。三九已至,卻和暖如春鞠绰,著一層夾襖步出監(jiān)牢的瞬間腰埂,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工蜈膨, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留屿笼,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,081評(píng)論 3 377
  • 正文 我出身青樓翁巍,卻偏偏與公主長(zhǎng)得像驴一,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子灶壶,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,675評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容