AngularJs 入門系列-1 使用 AngularJs 搭建頁面基本框架

每當看到前端程序員在腳本、樣式、表單處理邏輯中苦苦掙扎的時候，我就在想，爲何不用Angular Js 呢？

Angular Js 支持頁面前端的 MVC 模式開發，在 Angular JS 的支持下，咱們能夠將頁面前端處理的數據與頁面展現進行分離，實現優雅的代碼結構。

首先，咱們須要到 AngularJs 的官網下載這個腳本庫。

地址：https://angularjs.org/

不過，這個網站常常被封，你也能夠直接在這裏下載: http://files.cnblogs.com/haogj/AngularJs-1.3.10.zip

1. 在頁面引用 AngularJs 腳本

AngularJs 是一個獨立的腳本庫，許多人詢問是否還須要 jQuery，答案是不須要。你只須要在頁面引用 AngularJs 的腳本文件就能夠了，甚至，AngularJs 還實現了一個精簡版的 jQuery。不過它也能夠和 jQuery 一塊兒使用。

在 ASP.NET MVC 的頁面視圖中，能夠直接引用，也能夠經過 @section 將腳本放置到佈局 Layout 的 scripts 節中。

@section scripts {
    <script src="~/Scripts/angular-1.3.10.min.js"></script>
    <script>
    </script>
}

 

2. 建立 WebApp 和控制器

在 AngularJs 中，每一個頁面被看做一個獨立的 WebApp，每一個 WebApp 中能夠包括多個獨立的處理部分，咱們稱爲 Controller，每一個 Controller 有本身獨立的處理上下文和邏輯。

AngularJs 經過指令 ng-app 來劃定這個 WebApp 的做用域，一般能夠將這個 ng-app 直接寫在 html 標記之上，也能夠寫在一個元素之上，咱們這裏寫在這個視圖中的 div 標記之上。

ng-controller 用來劃定 WebApp 中的控制器的做用域，一般，咱們會給它起一個名字。

<div ng-app="myApp">
    <div ng-controller="myController">

    </div>
</div>

下面，在腳本中建立咱們的 WebApp 和控制器。

1 <script src="~/Scripts/angular-1.2.14.min.js"></script>
2 <script>
3     var app = angular.module("myApp", []);
4 
5     app.controller("myController", function ($scope, $http) {
6         $scope.message = "Hello, Angular JS.";
7     });
8 </script>

上面的第三行建立 WebApp，注意第一個參數是應用的名稱，須要與頁面指令中的 WebApp 名稱匹配，第二個參數數組是必須的。

第五行建立了應用中的控制器，特別須要注意的是控制器的匿名函數參數，這兩個參數的名稱不能夠修改，在 AngularJs 中，參數的名稱用來進行依賴注入。

第一個參數 $scope 就是這個控制器的上下文對象，經過它咱們將模型，視圖，和處理邏輯粘合在一塊兒。

3. 建立視圖

在 AngularJs 中，視圖是經過標準的 HTML 實現的。

注意，咱們上面代碼的第 6 行，咱們在上下文對象上保存了一個 message ，這就是咱們的模型，咱們但願這個模型中的數據，能夠在頁面展現出來。

在 Controller 的元素內部，建立一個新的 div 來容納咱們的內容，咱們準備使用 h2 標記將這個 message 的內容顯示出來。

視圖怎樣與咱們的模型綁定在一塊兒呢？各類模板都有本身的綁定語法，AngularJs 的方式是 {{ }}。其中能夠寫一個表達式。

<div ng-app="myApp">

    <div ng-controller="myController">

        <div>
            <h2>{{message}}</h2>
        </div>

    </div>

</div>

如今運行一下程序，你應該已經在頁面看到輸出結果了。

 

4. 實現模型和視圖的雙向綁定

若是咱們須要編輯這個 message 呢？編輯以後如何獲取編輯以後的內容呢？angularjs 支持雙向綁定，也就是說既能夠從咱們的模型獲取數據，若是數據被編輯了，編輯以後的內容也經過能夠被 angularjs 同步到模型上。

雙向綁定其實是 angularjs 內部支持的，咱們並不須要特別的編碼。在這裏咱們添加一個編輯框來支持編輯。

<div ng-app="myApp">

    <div ng-controller="myController">

        <div>
            <h2>{{message}}</h2>
            <input type="text" ng-model="message" />
        </div>

    </div>

</div>

注意 input 元素的 ng-model 屬性，它表示咱們須要雙向綁定 message 到這個編輯元素上。

從新運行程序，你看到 message 的內容也同步出如今編輯框中，若是你修改編輯框中的內容，標題中的內容也將會同步變化。你的編輯結果已經同步到了模型上。

總結

 angularJs 是一個比較重的腳本庫，雖然內部高度複雜，注意關鍵的使用細節，使用起來其實很是簡單。