我的AngularJS 學習之旅

本文轉載自查看原文 2014-08-19 23:42 1625 C#/ AngularJs/ 學習筆記

我的AngularJS 學習之旅

基礎篇

1、Angular的起源

2、比較Web 頁面實現的幾種方式

3、一些基本術語

4、Angular與其他框架的兼容性

5、總結

6、綜合實例

很早之前就聽朋友說起AngularJs，但由於各種原因，一直沒去研究。最近正好有同事也對這個框架比較感興趣，大家一起討論，於是終於“名正言順”地開始研究了。

本文的目的是記錄一下自己這兩周的學習點滴，算是學習筆記吧，如果對初學的朋友有一點幫助，那也算是一件好事。嘿嘿

1、Angular的起源

關於Angular 的起源，可以追溯到2009 年的Google Feedback 項目。當時,團隊中的一個成員Misko Hevery 做出了一個大膽的宣言：利用他自己業余時間所開發的一個開源庫，他可以在兩周之內把目前所有東西重寫一遍。三個星期之后,他所開發的新應用的代碼量從原來的17000 行壓縮到了1500 行。是的,Misko Hevery 就是Angular之父.他和他的同事決定，圍繞他所提倡的理念組建一個團隊，這個簡單的理念就是：簡化對web 開發者的經驗要求。最后,越來越多的開發者在他們的日常生活中以來Angular，並且發展成了一個優質的支持者網絡。

2、比較幾種不同的Web 實現

我相信大家使用過很多Js庫,如JQuery庫，Extjs之類的JS庫,把Html模板字符串和數據混合起來，然后把獲得的結果插入Dom中。

代碼片段:

   <tr>
            <td>
                <input id="Access" type="button" value="Access" />
            </td>
            <td>
                <div id="browser">
                </div>
            </td>
    </tr>

$.ajax({type: 'GET',url: '/Home/Get_Page',success: function (data) {$("#browser").text(data);}});

View Code

類似Rails,PHP,JSP和ASP等之類的Html字符串和數據混合起來，然后再發給用戶並顯示

代碼片段：

<html><head><title>First program</title></head><body><?php  echo "hello, worldn";?></body>
</html>

View Code

AngularJS等數據綁定方式

代碼片段:

<div class="row-fluid">
        <input type="text" ng-model="query" class="form-control" placeholder="請輸入標題" />
        <input type="button" ng-click="search()" value="Search" class="btn btn-primary" />
 </div>

View Code

當然幾種方式各有千秋,但是相信各位看官也能看出來，Angular Web呈現上的獨特之處,沒有對於的東西,后面還會看到它是怎么講UI呈現和業務邏輯隔離開的。

3、一些基本術語

在創建第一個應用程序之前，你需要理解Angular中的一些概念。稍后，通過一個簡單的例子，你可以快速接觸Angular中所有重要的部分。但是，我不會花時間去解釋細節，而是着重於幫助你建立一個全局性的“概觀”。

3.1 MVC

MVC背后的核心理念是：你應該把管理數據的代碼(model)、應用邏輯代碼(controller)、以及向用戶展示數據的代碼(view)清晰的分離開。

視圖會從模型中獲取數據，然后展示給用戶。當用戶通過鼠標點擊或者鍵盤輸入與應用進行交互的時候，控制器會做出相應並修改模型中的數據。

最后，模型會通知視圖數據已經發生了變更，這樣視圖就可以刷新其中顯示的內容。

在Angular應用中，視圖就是Document Object ModelO(DOM,文檔對象模型),控制器就是JavaScript類,而模型數據則被存儲在對象的屬性中。

3.2 $scope

何為作用域(Scope)?

作用域 (Scope)

是一個存儲應用數據模型的對象,為表達式提供了一個執行上下文,作用域的層級結構對應於 DOM 樹結構。

作用域可以監聽表達式的變化並傳播事件

注：其實可以很簡單地理解為有以下兩個鏈條關系：

控制器 --> 作用域 --> 視圖（DOM）

指令 --> 作用域 --> 視圖（DOM）

先來看一個例子吧

工欲善其事,必先利器,我們需要從官網下載Angular包,這里使用的是AngularJS v1.1.4

如上圖,普通的使用只,需引入這個庫就可以了.

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html ng-app>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/angular/angular.min.js"></script>
    <script src="~/Scripts/app/hello2/hello.js"></script>
</head>

<body>
    <div ng-controller="Ctrl">
        Your name:
        <input type="text" ng-model="customer.name">
        <button ng-click='sayHello()'>greet</button>
        <p>{{ greeting | titleCase}}</p>
        <div my-customer></div>
    </div>
</body>
</html>

View Code

當前Angular應用的Controller，

function MyController($scope) {

    $scope.username = 'World!';
    $scope.sayHello = function () {
        $scope.greeting = 'Hello,' + $scope.username;
    };
}

這里需要解釋一下,ng-app指令告訴Angular應用管理頁面中的那一塊.如果你正在構建一款純Angualr應用,

那么你該把 ng-app指令寫在<html>標簽中,如下: