Angularjs 有以下幾個(gè)關(guān)鍵的特性:
- MVC
- 數(shù)據(jù)雙向綁定
- 依賴注入
- 指令
接下來鳖轰,將給以上的特性進(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ù)獲得它的需要的依賴:
- 它的依賴是能被創(chuàng)建的测暗,一般用new操作符就行
- 能夠通過全局變量查找依賴
- 依賴能在需要時(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)目中代碼冗余的情況示辈。