個人AngularJS 學習之旅

時間 2019-12-13

標籤個人 angularjs 學習之旅欄目 AngularJS 简体版

原文原文鏈接

個人AngularJS 學習之旅php

基礎篇html

一、Angular的起源

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

三、一些基本術語

四、Angular與其餘框架的兼容性

五、總結

六、綜合實例

很早以前就聽朋友提及AngularJs，但因爲各類緣由，一直沒去研究。最近正好有同事也對這個框架比較感興趣，你們一塊兒討論，因而終於「名正言順」地開始研究了。angularjs

本文的目的是記錄一下本身這兩週的學習點滴，算是學習筆記吧，若是對初學的朋友有一點幫助，那也算是一件好事。嘿嘿web

一、Angular的起源ajax

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

二、比較幾種不一樣的Web 實現 api

我相信你們使用過不少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呈現和業務邏輯隔離開的。

三、一些基本術語

在建立第一個應用程序以前，你須要理解Angular中的一些概念。稍後，經過一個簡單的例子，你能夠快速接觸Angular中全部重要的部分。可是，我不會花時間去解釋細節，而是着重於幫助你創建一個全局性的「概觀」。

3.1 MVC

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

視圖會從模型中獲取數據，而後展現給用戶。當用戶經過鼠標點擊或者鍵盤輸入與應用進行交互的時候，控制器會作出相應並修改模型中的數據。框架

最後，模型會通知視圖數據已經發生了變動，這樣視圖就能夠刷新其中顯示的內容。

在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>標籤中,以下: