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ù)碛刑囟ǖ男袨?。Angularjs 內(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)目中代碼冗余的情況。