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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容