1. 程式人生 > >:angularjs學習總結(~~很詳細的教程) 很不錯的一篇帖子 適合快速瞭解angularjs整體結構 有個整體印象

:angularjs學習總結(~~很詳細的教程) 很不錯的一篇帖子 適合快速瞭解angularjs整體結構 有個整體印象

1 前言

前端技術的發展是如此之快,各種優秀技術、優秀框架的出現簡直讓人目不暇接,緊跟時代潮流,學習掌握新知識自然是不敢怠慢。

AngularJS是google在維護,其在國外已經十分火熱,可是國內的使用情況卻有不小的差距,參考文獻/網路文章也很匱乏。這裡便將我學習AngularJS寫成文件,一方面作為自己學習路程上的記錄,另一方面也給有興趣的同學一些參考。

首先我自己也是一名學習者,會以學習者的角度來整理我的行文思路,這裡可能只是些探索,有理解或是技術上的錯誤還請大家指出;其次我特別喜歡編寫小例子來把一件事情說明白,故在文中會盡可能多的用示例加程式碼講解,我相信這會是一種比較好的方式;最後,我深知AngularJS的使用方式跟jquery的使用方式有很大不同,在大家都有jquery、ext經驗的條件下對於angular的學習會困難重重,不過我更相信在大家的堅持下,能夠快速的學好AngularJS,至少咱也能深入瞭解到AngularJS的基本思想,對咱們以後自己的外掛開發、專案開發都會有很大的啟示。

2 AngularJS概述

2.1 AngularJS是什麼?

AngularJs(後面就簡稱ng了)是一個用於設計動態web應用的結構框架。首先,它是一個框架,不是類庫,是像EXT一樣提供一整套方案用於設計web應用。它不僅僅是一個javascript框架,因為它的核心其實是對HTML標籤的增強。

何為HTML標籤增強?其實就是使你能夠用標籤完成一部分頁面邏輯,具體方式就是通過自定義標籤、自定義屬性等,這些HTML原生沒有的標籤/屬性在ng中有一個名字:指令(directive)。後面會詳細介紹。那麼,什麼又是動態web應用呢?與傳統web系統相區別,web應用能為使用者提供豐富的操作,能夠隨使用者操作不斷更新檢視而不進行url跳轉。ng官方也宣告它更適用於開發CRUD應用,即資料操作比較多的應用,而非是遊戲或影象處理類應用。

為了實現這些,ng引入了一些非常棒的特性,包括模板機制、資料繫結、模組、指令、依賴注入、路由。通過資料與模板的繫結,能夠讓我們擺脫繁瑣的DOM操作,而將注意力集中在業務邏輯上。

  另外一個疑問,ng是MVC框架嗎?還是MVVM框架?官網有提到ng的設計採用了MVC的基本思想,而又不完全是MVC,因為在書寫程式碼時我們確實是在用ng-controller這個指令(起碼從名字上看,是MVC吧),但這個controller處理的業務基本上都是與view進行互動,這麼看來又很接近MVVM。讓我們把目光移到官網那個非醒目的title上:“AngularJS — Superheroic JavaScript MVW Framework”。

2.2 AngularJS簡單介紹

AngularJS 重新定義了前端應用的開發方式。面對HTML和JavaScript之間的界線,它

非但不畏縮不前,反而正面出擊,提出了有效的解決方案。

很多前端應用的開發框架,比如Backbone、EmberJS等,都要求開發者繼承此框架特有的一些JavaScript物件。這種方式有其長處,但它不必要地汙染了開發者自己程式碼的物件空間,還要求開發者去了解記憶體裡那些抽象物件。儘管如此我們還是接受了這種方式,因為網路最初的設計無法提供 我們今天所需的互動性,於是我們需要框架,來幫我們填補JavaScript和HTML之間的鴻溝。而且有了它,你不用再“直接”操控DOM,只要給你的DOM註上metadata(即AngularJS裡的directive們),然後讓AngularJS來幫你操縱DOM。同時,AngularJS不依賴(也不妨礙)任何其他的框架。你甚至可以基於其它的框架來開發AngularJS應用。

2.3 什麼時候該用AngularJS

AngularJS是一個 MV* 框架,最適於開發客戶端的單頁面應用。它不是個功能庫,而是用來開發動態網頁的框架。它專注於擴充套件HTML的功能,提供動態資料繫結(data binding),而且它能跟其它框架(如jQuery)合作融洽。

如果你要開發的是單頁應用,AngularJS就是你的上上之選。Gmail、Google Docs、Twitter和Facebook這樣的應用,都很能發揮AngularJS的長處。但是像遊戲開發之類對DOM進行大量操縱、又或者單純需要 極高執行速度的應用,就不是AngularJS的用武之地了。

3 AugularJS特性

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

AngularJS有五個最重要的功能和特性:

3.1 特性一:雙向的資料繫結

資料繫結可能是AngularJS最酷最實用的特性。它能夠幫助你避免書寫大量的初始程式碼從而節約開發時間。一個典型的web應用可能包含了80%的程式碼用來處理,查詢和監聽DOM。資料繫結是的程式碼更少,你可以專注於你的應用。

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

傳統來說,當model變化了。 開發人員需要手動處理DOM元素並且將屬性反映到這些變化中。這個一個雙向的過程。一方面,model變化驅動了DOM中元素變化,另一方面,DOM元素的變化也會影響到Model。這個在使用者互動中更加複雜,因為開發人員需要處理和解析

這些互動,然後融合到一個model中,並且更新View。這是一個手動的複雜過程,當一個應用非常龐大的時候,將會是一件非常費勁的事情。

這裡肯定有更好的解決方案!那就是AngularJS的雙向資料繫結,能夠同步DOM和Model等等。

這裡有一個非常簡單的例子,用來演示一個input輸入框和<h1>元素的雙向繫結(例01):

<!doctype html>

<html ng-app="demoApp">

  <head>

    <script src="./js/angular.min.js"></script>

  </head>

  <body>

    <div>

      <label>Name:</label>

      <input type="text" ng-model="user.name" placeholder="請輸入名字">

      <hr>

      <h1>Hello, {{user.name}}!</h1>

    </div>

  </body>

</html>

說明:實際效果請大家看AngularJS/demo/index.html

3.2 特性二:模板

在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並不強制你學習一個新的語法或者從你的應用中提出你的模板。

3.3 特性三: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處理佈局和互動。

3.4 特性四:服務和依賴注入

AngularJS服務其作用就是對外提供某個特定的功能。

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

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']; 

3.5 特性五:指令(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>

使用一系列的元件來建立你自己的應用將會讓你更方便的新增,刪除和更新功能。

4 功能介紹

4.1資料繫結

AngularJS的雙向資料繫結,意味著你可以在Mode(JS)中改變資料,而這些變動立刻就會自動出現在View上,反之亦然。即:一方面可以做到model變化驅動了DOM中元素變化,另一方面也可以做到DOM元素的變化也會影響到Model。

在我們使用jQuery的時候,程式碼中會大量充斥類似這樣的語句:var val = $(#id).val(); $(#id).html(str);等等,即頻繁的DOM操作(讀取和寫入),其實我們的最終目的並不是要操作DOM,而是要實現業務邏輯。ng的繫結將讓你擺脫DOM操作,只要模板與資料通過宣告進行了繫結,兩者將隨時保持同步,最新的資料會實時顯示在頁面中,頁面中使用者修改的資料也會實時被記錄在資料模型中。

從View到Controller再到View的資料互動(例01):

<html ng-app="demoApp">

……

<input type="text" ng-model="user.name" placeholder="請輸入名稱"/>

Hello, {{ user.name }}

……

關鍵: ng-app 、 ng-model 和 { {user.name } } 

首先: <html>元素的ng-app屬性。標識這個DOM裡面的內容將啟用AngularJS應用。

其次:告訴AngularJS,對頁面上的“user.name” 這個Model進行雙向資料繫結。

第三:告訴AngularJS,在“{{ user.name}}”這個指令模版上顯示“user.name”這個Model的資料。

從Server到Controller再到View的資料互動(例02):

<html ng-app="demoApp">

……

<div  ng-controller="demoController">

<input type="text" ng-model="user.name" disabled="disabled"/>

<a href="javascript:void(0);" ng-click="getAjaxUser()">AJAX獲取名字</a>

……

demoApp.controller("demoController", function($http, $scope){

$scope. getAjaxUser = function(){

// $http.get({url:"../xxx.action"}).success(function(data){

// $scope.user= data;

// });

$scope.user = {"name":"JOSN中獲取的名稱","age":22};

};

});

改變$scope中的userView也會自動更新。

4.2 scopes、module、controller 

4.2.1 scopes

$scope是一個把view(一個DOM元素)連結到controller上的物件。在我們的MVC結構裡,這個 $scope 將成為model,它提供一個繫結到DOM元素(以及其子元素)上的excecution context

儘管聽起來有點複雜,但 $scope 實際上就是一個JavaScript物件,controllerview都可以訪問它,所以我們可以利用它在兩者間傳遞資訊。在這個 $scope 物件裡,我們既儲存資料,又儲存將要執行在view上的函式。

每一個Angular應用都會有一個 $rootScope。這個 $rootScope 是最頂級的scope,它對應著含有 ng-app 指令屬性的那個DOM元素。

app.run(function($rootScope) { $rootScope.name = "張三"; });

如果頁面上沒有明確設定 $scope Angular 就會把資料和函式都繫結到這裡, 第一部分中的例子就是靠這一點成功執行的。

這樣,我們就可以在view的任何地方訪問這個name屬性,使用模版表示式{{}},像這樣:

{{ name }}  

4.2.2 module

首先需要明確一下模板的概念。在我還不知道有模板這個東西的時候,曾經用js拼接出很長的HTML字串,然後append到頁面中,這種方式想想真是又土又笨。後來又看到可以把HTML程式碼包裹在一個<script>標籤中當作模板,然後按需要取來使用。

ng中,模板十分簡單,它就是我們頁面上的HTML程式碼,不需要附加任何額外的東西。在模板中可以使用各種指令來增強它的功能,這些指令可以讓你把模板和資料巧妙的繫結起來。

<html>標籤上多了一個屬性ng-app=MyApp”,它的作用就是用來指定ng的作用域是在<html>標籤以內部分。在js中,我們呼叫angular物件的module方法來宣告一個模組,模組的名字和ng-app的值對應。這樣宣告一下就可以讓ng執行起來了。

示例:

<html ng-app="demoApp">

var demoApp = angular.module('demoApp', []);

4.2.3 ng-controller

要明確建立一個$scope 物件,我們就要給DOM元素安上一個controller物件,使用的是ng-controller 指令屬性:

<div ng-controller="MyController"> {{ person.name }} </div>  

ng-controller指令給所在的DOM元素建立了一個新的$scope 物件,並將這個$scope 物件包含進外層DOM元素的$scope 物件裡。在上面的例子裡,這個外層DOM元素的$scope 物件,就是$rootScope 物件。這個scope鏈是這樣的:

所有scope都遵循原型繼承(prototypal inheritance),這意味著它們都能訪問父scope們。對任何屬性和方法,如果AngularJS在當前scope上找不到,就會到父 scope上去找,如果在父scope上也沒找到,就會繼續向上回溯,一直到$rootScope 上。即如果controller是多層巢狀的,就會從最裡面一直往外找,這個scope鏈是這樣的:

唯一的例外:有些指令屬性可以選擇性地建立一個獨立的scope,讓這個scope不繼承它的父scope們,這個會在指令詳解中說明。

4.3 ajax

$http 服務是AngularJS的核心服務之一,它幫助我們通過XMLHttpRequest物件或JSONP與遠端HTTP服務進行交流。

$http 服務是這樣一個函式:它接受一個設定物件,其中指定了如何建立HTTP請求;它將返回一個承諾(*參考JavaScript非同步程式設計的promise模式),其中提供兩個方法: success方法和error方法。

demoApp.controller("demoController", function($http, $scope){

$scope. getAjaxUser = function(){

$http.get({url:"../xxx.action"}).success(function(data){

alert(data);

}).error(function(){

Alert(“出錯了!”);

});

};

});

AngularJS的AJAXjquery等框架的AJAX基本一致,這裡就不多說了。

4.4表示式

ng中的表示式與javascript表示式類似但是不可以劃等號,它是ng自己定義的一套模式。表示式可以作為指令的值,如

相關推薦

:angularjs學習總結(~~詳細教程) 不錯帖子 適合快速瞭解angularjs整體結構 整體印象

1 前言 前端技術的發展是如此之快,各種優秀技術、優秀框架的出現簡直讓人目不暇接,緊跟時代潮流,學習掌握新知識自然是不敢怠慢。 AngularJS是google在維護,其在國外已經十分火熱,可是國內的使用情況卻有不小的差距,參考文獻/網路文章也很匱乏。這裡便將

Cookie介紹及在Android中的使用總結詳細,看這就夠了

Cookie介紹 cookie的起源 早期Web開發面臨的最大問題之一是如何管理狀態。簡言之,伺服器端沒有辦法知道兩個請求是否來自於同一個瀏覽器。那時的辦法是在請求的頁面中插入一個token,並且在下一次請求中將這個token返回(至伺服器)。這就需要在form中插入一個包含toke

angularjs學習總結 詳細教程

1 前言 前端技術的發展是如此之快,各種優秀技術、優秀框架的出現簡直讓人目不暇接,緊跟時代潮流,學習掌握新知識自然是不敢怠慢。 AngularJS是google在維護,其在國外已經十分火熱,可是國內的使用情況卻有不小的差距,參考文獻/網路文章也很匱乏。這裡

分布式架構的演進,分析的詳細到位

解決 配置管理 基本 關系型 class mysq 不能 lamp nosql 作者:李小翀鏈接:https://www.zhihu.com/question/22764869/answer/31277656來源:知乎著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載

第一次使用Git上傳本地專案到github上,下載、安裝、上傳(詳細全面)

我覺得學習github的人基本上已經快要脫離了小白的標籤,雖然我一直喜歡自稱為小白。對於程式設計師原來說應該都聽說過GitHub,GitHub有許多開源的的專案和一些前沿的技術。因為自己在第一次使用過Git和github時遇到過不少的坑,所以,想對第一次使用Gi

Matlab繪圖-詳細全面

Matlab繪圖 強大的繪圖功能是Matlab的特點之一,Matlab提供了一系列的繪圖函式,使用者不需要過多的考慮繪圖的細節,只需要給出一些基本引數就能得到所需圖形,這類函式稱為高層繪圖函式。此外,Matlab還提供了直接對圖形控制代碼進行操作的低層繪圖操作。這類操作將圖

免費領取 | 10G大資料學習視訊和詳細教程大綱

  五四青年節,福利大奉送,10G大資料學習視訊免費領取!   隨著網際網路時代的迅猛發展,大資料全面融入了現代社會的生產、生活中,並將大大改變全球的經濟。大資料,它其實不僅僅是一種技術,更是戰略資源。  大資料是網際網路發展的方向,大資料人才是未來的高薪貴族。隨著大資料人才

Angularjs 學習總結 -- 實現省市的三級聯動

 一、前言 最近在NG專案做介面中,需要實現一個省市區的三級聯動,這個東西拿到手,想想是很簡單的,網上有大量關於 的三級聯動JS或者JQuery程式碼實現,但其實大部分實現的有點複雜,也不適於移植到NG的前端專案,本文章介紹NG的實現方式,一如既然的簡單暴力。  二

scala的隱式轉換學習總結詳細

一,隱式轉換函式      1, 格式,            implicit def 函式名(引數):返回值型別={ //函式體 //返回值 }     2,例子://匯入對應的規則類,以免出現警告 scala> import scala.l

Matlab繪圖-詳細全面(包含各種標示符的輸入方法)

Matlab繪圖 強大的繪圖功能是Matlab的特點之一,Matlab提供了一系列的繪圖函式,使用者不需要過多的考慮繪圖的細節,只需要給出一些基本引數就能得到所需圖形,這類函式稱為高層繪圖函式。此外,Matlab還提供了直接對圖形控制代碼進行操作的低層繪圖操作。這類操作將圖形的每個圖形元素(如座標軸、曲線、

分散式架構的演進,分析的詳細到位

初始階段 的小型系統 應用程式、資料庫、檔案等所有的資源都在一臺伺服器上通俗稱為LAMP 特徵: 應用程式、資料庫、檔案等所有的資源都在一臺伺服器上。 描述: 通常伺服器作業系統使用linux,應用程式使用PHP開發,然後部署在Apache上,資料庫使用Mysql,彙集各種免費開源軟體以及一臺廉價伺服器就

【2020Java最新學習路線】寫了久,這是份最適合普通大眾、科班、非科班的路線

點贊再看,養成習慣,微信搜尋【三太子敖丙】關注這個網際網路苟且偷生的工具人。 本文 GitHub https://github.com/JavaFamily 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。 前言 這期我想寫很久了,但是因為時間的原因一直拖到了現在,我以為一兩天就寫完了,結果

Java Web學習總結(7)JSP(

sco runt util 註意細節 服務 private tin 多行 cnblogs 一,JSP基礎語法 1,JSP模板元素 JSP頁面中的HTML內容稱之為JSP模版元素。 JSP模版元素定義了網頁的基本骨架,即定義了頁面的結構和外觀。 2,JSP腳本

微服務Springcloud超詳細教程+實戰(

如在文件中遇到什麼問題請聯絡作者 QQ:1172796094 本人正在找深圳Java實習工作,求大佬帶飛 —————————————————————————————————————— 認識微服務 系統架構演變 集中式架構/單體應用 垂直拆分

新加坡區塊鏈專案ICO的法律意見書,流程及費用詳細教程。思獨角獸 Setting IT Unicorn為您解答

1:基金會的名稱注意這裡不是普通的公司普通公司以(PTE LTD 私人有限公司)公眾非盈利基金會為(FOUNDATION LTD) 2:提供至少3位成員,其中一人為新加坡籍(思一獨角獸 Setting IT Unicorn可提供) 3:非盈利機構註冊資金1新幣

久以前寫的關於幾常用XMPP server的比較文件

Analysis of the open sourceXMPP server project Three popular XMPP servers Ratio of the XMPP server 我對248個XMPP server伺服器所使用的open source進

業余草 SpringCloud教程 | 第十: 斷路器監控(Hystrix Dashboard)(Finchley版本)

指標 string 好友 資料 edi back cor 簡單 over 在我的第四篇文章斷路器講述了如何使用斷路器,並簡單的介紹了下Hystrix Dashboard組件,這篇文章更加詳細的介紹Hystrix Dashboard。 一、Hystrix Dashboard

#文章讓你瞭解四種執行緒池,學習Java不在困惑

在Java開發中,有時遇到多執行緒的開發時,直接使用Thread操作,對程式的效能和維護上都是一個問題,使用Java提供的執行緒池來操作可以很好的解決問題,於是找了下API看到Java提供四種執行緒池使用,Java通過Executors提供四種執行緒池,分別為: 1、newCachedThrea

轉載:SpringBoot非官方教程 | 第十:springboot整合swagger2,構建優雅的Restful API

swagger,中文“拽”的意思。它是一個功能強大的api框架,它的整合非常簡單,不僅提供了線上文件的查閱,而且還提供了線上文件的測試。另外swagger很容易構建restful風格的api,簡單優雅帥氣,正如它的名字。 一、引入依賴 <depend

機器學習到底是什麼?文章帶你瞭解透徹

來自:36氪連結:http://36kr.com/p/5093721.html原文:https: