AngularJS入門教程

jopen 9年前發布 | 25K 次閱讀 Web框架 angularjs

AngularJS是一個超棒的javascript框架，不單單對于開發人員來說非常有吸引力，對于UI設計師來說也同樣出色。在這篇教程中，我們將簡單的介紹AngularJS幾個重量級必備特性，并且介紹它如何能夠讓你的web應用更加強大！

AugularJS簡單介紹

AngularJS是一個新出現的強大客戶端技術，提供給大家的一種開發強大應用的方式。這種方式利用并且擴展HTML，CSS和javascript，并且彌補了它們的一些非常明顯的不足。本應該使用HTML來實現而現在由它開發的動態一些內容。

在這篇文章中，我們講述了一些最重要的AngularJS功能和特性。我們的目標在于閱讀后，你可以開始自己開發一些有趣的應用。

特性一：雙向的數據綁定

數據綁定可能是AngularJS最酷最實用的特性。它能夠幫助你避免書寫大量的初始代碼從而節約開發時間。一個典型的web應用可能包含了80%的代碼用來處理，查詢和監聽DOM。數據綁定是的代碼更少，你可以專注于你的應用。

我們想象一下Model是你的應用中的簡單事實。你的Model是你用來讀取或者更新的部分。數據綁定指令提供了你的Model投射到view的方法。這些投射可以無縫的，毫不影響的應用到web應用中。

傳統來說，當model變化了。開發人員需要手動處理DOM元素并且將屬性反映到這些變化中。這個一個雙向的過程。一方面，model變化驅動了DOM中元素變化，另一方面，DOM元素的變化也會影響到Model。這個在用戶互動中更加復雜，因為開發人員需要處理和解析這些互動，然后融合到一個model中，并且更新View。這是一個手動的復雜過程，當一個應用非常龐大的時候，將會是一件非常費勁的事情。

這里肯定有更好的解決方案！那就是AngularJS的雙向數據綁定，能夠同步DOM和Model等等。

這里有一個非常簡單的例子，用來演示一個input輸入框和<h1>元素的雙向綁定：

<!doctype html>
<html ng-app>
<head>
    <script src=" http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>
</head>
<body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello, {{yourName}}!</h1>
    </div>
</body>
</html>

特性二：模板

在AngularJS中，一個模板就是一個HTML文件。但是HTML的內容擴展了，包含了很多幫助你映射model到view的內容。

HTML模板將會被瀏覽器解析到DOM中。DOM然后成為AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板來生成一些指導，即，directive（指令）。所有的指令都負責針對view來設置數據綁定。

我們要理解AuguarJS并不把模板當做String來操作。輸入AngularJS的是DOM而非string。數據綁定是DOM變化，不是字符串的連接或者innerHTML變化。使用DOM作為輸入，而不是字符串，是AngularJS區別于其它的框架的最大原因。使用DOM允許你擴展指令詞匯并且可以創建你自己的指令，甚至開發可重用的組件。

最大的好處是為設計師和開發者創建了一個緊密的工作流。設計師可以像往常一樣開發標簽，然后開發者拿過來添加上功能，通過數據綁定將會使得這個過程非常簡單。

這里有一個例子，我們使用ng-repeat指令來循環圖片數組并且加入img模板，如下：

function AlbumCtrl($scope) {
    scope.images = [
        {"image":"img/image_01.png", "description":"Image 01 description"},
        {"image":"img/image_02.png", "description":"Image 02 description"},
        {"image":"img/image_03.png", "description":"Image 03 description"},
        {"image":"img/image_04.png", "description":"Image 04 description"},
        {"image":"img/image_05.png", "description":"Image 05 description"}
    ];
}

<div ng-controller="AlbumCtrl">
<ul>
    <li ng-repeat="image in images">
      <img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
    </li>
</ul>
</div>

這里還有一件事值得提一句，AngularJS并不強制你學習一個新的語法或者從你的應用中提出你的模板。

特性三：MVC

針對客戶端應用開發AngularJS吸收了傳統的MVC基本原則。MVC或者Model-View-Controll設計模式針對不同的人可能意味不同的東西。AngularJS并不執行傳統意義上的MVC，更接近于MVVM（Moodel-View-ViewModel）。

Model

model是應用中的簡單數據。一般是簡單的javascript對象。這里沒有必要繼承框架的classes，使用proxy對象封裝或者使用特別的setter/getter方法來訪問。事實上我們處理vanilla javascript的方法就是一個非常好的特性，這種方法使得我們更少使用應用的原型。

ViewModel

viewmodel是一個用來提供特別數據和方法從而維護指定view的對象。

viewmodel是$scope的對象，只存在于AnguarJS的應用中。$scope只是一個簡單的js對象，這個對象使用簡單的API來偵測和廣播狀態變化。

Controller

controller負責設置初始狀態和參數化$scope方法用以控制行為。需要指出的controller并不保存狀態也不和遠程服務互動。

View

view是AngularJS解析后渲染和綁定后生成的HTML 。這個部分幫助你創建web應用的架構。$scope擁有一個針對數據的參考，controller定義行為，view處理布局和互動。

特性四：依賴注入（Dependency Injection，即DI）

AngularJS擁有內建的依賴注入子系統，可以幫助開發人員更容易的開發，理解和測試應用。

DI允許你請求你的依賴，而不是自己找尋它們。比如，我們需要一個東西，DI負責找創建并且提供給我們。

為了而得到核心的AngularJS服務，只需要添加一個簡單服務作為參數，AngularJS會偵測并且提供給你：

function EditCtrl($scope, $location, $routeParams) {
// Something clever here...
}

你也可以定義自己的服務并且讓它們注入：

angular.
    module('MyServiceModule', []).
    factory('notify', ['$window', function (win) {
    return function (msg) {
        win.alert(msg);
    };
}]);

function myController(scope, notifyService) {
    scope.callNotify = function (msg) {
        notifyService(msg);
    };
}

myController.$inject = ['$scope', 'notify'];

特性五：Directives（指令）

指令是我個人最喜歡的特性。你是不是也希望瀏覽器可以做點兒有意思的事情？那么AngularJS可以做到。

指令可以用來創建自定義的標簽。它們可以用來裝飾元素或者操作DOM屬性。

這里是一個例子，它監聽一個事件并且針對的更新它的$scope ，如下：

myModule.directive('myComponent', function(mySharedService) {
    return {
        restrict: 'E',
        controller: function($scope, $attrs, mySharedService) {
            $scope.$on('handleBroadcast', function() {
                $scope.message = 'Directive: ' + mySharedService.message;
            });
        },
        replace: true,
        template: '<input>'
    };
});

然后，你可以使用這個自定義的directive來使用：

<my-component ng-model="message"></my-component>

使用一系列的組件來創建你自己的應用將會讓你更方便的添加，刪除和更新功能。

額外的特性：測試

AngularJS內含了測試用例可以幫助你更方便的執行測試。為什么不用呢？

JS是一個動態的解析性語言，而不是編譯類型的，因此非常的難寫測試。

AngularJS被開成一個可測試的框架。它甚至包含了點對點的單元測試runner。如果你喜歡這個特性，看看這個項目：https://github.com/angular/angular-seed

一但你運行這個項目，你可以看到如下輸出：

AngularJS入門教程

API文檔是完整的點對點測試，說明了整個架構師如何工作的。通過查看這些測試，你會對AngularJS有更深刻的了解。

總結

在這篇教程中，我們總結了6個AngularJS的關鍵特性。如果大家對于AngularJS有興趣，請訪問http://angularjs.org。

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1433554783250.html

Web框架 angularjs

AngularJS入門教程

相關經驗

相關資訊

相關文檔

目錄