: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中的user,View也會自動更新。
4.2 scopes、module、controller
4.2.1 scopes
$scope是一個把view(一個DOM元素)連結到controller上的物件。在我們的MVC結構裡,這個 $scope 將成為model,它提供一個繫結到DOM元素(以及其子元素)上的excecution context。
儘管聽起來有點複雜,但 $scope 實際上就是一個JavaScript物件,controller和view都可以訪問它,所以我們可以利用它在兩者間傳遞資訊。在這個 $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的AJAX與jquery等框架的AJAX基本一致,這裡就不多說了。
4.4表示式
ng中的表示式與javascript表示式類似但是不可以劃等號,它是ng自己定義的一套模式。表示式可以作為指令的值,如
1 前言
前端技術的發展是如此之快,各種優秀技術、優秀框架的出現簡直讓人目不暇接,緊跟時代潮流,學習掌握新知識自然是不敢怠慢。
AngularJS是google在維護,其在國外已經十分火熱,可是國內的使用情況卻有不小的差距,參考文獻/網路文章也很匱乏。這裡便將
Cookie介紹
cookie的起源
早期Web開發面臨的最大問題之一是如何管理狀態。簡言之,伺服器端沒有辦法知道兩個請求是否來自於同一個瀏覽器。那時的辦法是在請求的頁面中插入一個token,並且在下一次請求中將這個token返回(至伺服器)。這就需要在form中插入一個包含toke
1 前言
前端技術的發展是如此之快,各種優秀技術、優秀框架的出現簡直讓人目不暇接,緊跟時代潮流,學習掌握新知識自然是不敢怠慢。
AngularJS是google在維護,其在國外已經十分火熱,可是國內的使用情況卻有不小的差距,參考文獻/網路文章也很匱乏。這裡 解決 配置管理 基本 關系型 class mysq 不能 lamp nosql 作者:李小翀鏈接:https://www.zhihu.com/question/22764869/answer/31277656來源:知乎著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載
我覺得學習github的人基本上已經快要脫離了小白的標籤,雖然我一直喜歡自稱為小白。對於程式設計師原來說應該都聽說過GitHub,GitHub有許多開源的的專案和一些前沿的技術。因為自己在第一次使用過Git和github時遇到過不少的坑,所以,想對第一次使用Gi
Matlab繪圖
強大的繪圖功能是Matlab的特點之一,Matlab提供了一系列的繪圖函式,使用者不需要過多的考慮繪圖的細節,只需要給出一些基本引數就能得到所需圖形,這類函式稱為高層繪圖函式。此外,Matlab還提供了直接對圖形控制代碼進行操作的低層繪圖操作。這類操作將圖
五四青年節,福利大奉送,10G大資料學習視訊免費領取! 隨著網際網路時代的迅猛發展,大資料全面融入了現代社會的生產、生活中,並將大大改變全球的經濟。大資料,它其實不僅僅是一種技術,更是戰略資源。 大資料是網際網路發展的方向,大資料人才是未來的高薪貴族。隨著大資料人才
一、前言
最近在NG專案做介面中,需要實現一個省市區的三級聯動,這個東西拿到手,想想是很簡單的,網上有大量關於
的三級聯動JS或者JQuery程式碼實現,但其實大部分實現的有點複雜,也不適於移植到NG的前端專案,本文章介紹NG的實現方式,一如既然的簡單暴力。
二
一,隱式轉換函式
1, 格式,
implicit def 函式名(引數):返回值型別={
//函式體
//返回值
} 2,例子://匯入對應的規則類,以免出現警告
scala> import scala.l
Matlab繪圖
強大的繪圖功能是Matlab的特點之一,Matlab提供了一系列的繪圖函式,使用者不需要過多的考慮繪圖的細節,只需要給出一些基本引數就能得到所需圖形,這類函式稱為高層繪圖函式。此外,Matlab還提供了直接對圖形控制代碼進行操作的低層繪圖操作。這類操作將圖形的每個圖形元素(如座標軸、曲線、
初始階段 的小型系統 應用程式、資料庫、檔案等所有的資源都在一臺伺服器上通俗稱為LAMP
特徵:
應用程式、資料庫、檔案等所有的資源都在一臺伺服器上。
描述:
通常伺服器作業系統使用linux,應用程式使用PHP開發,然後部署在Apache上,資料庫使用Mysql,彙集各種免費開源軟體以及一臺廉價伺服器就
點贊再看,養成習慣,微信搜尋【三太子敖丙】關注這個網際網路苟且偷生的工具人。
本文 GitHub https://github.com/JavaFamily 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。
前言
這期我想寫很久了,但是因為時間的原因一直拖到了現在,我以為一兩天就寫完了,結果 sco runt util 註意細節 服務 private tin 多行 cnblogs 一,JSP基礎語法
1,JSP模板元素
JSP頁面中的HTML內容稱之為JSP模版元素。
JSP模版元素定義了網頁的基本骨架,即定義了頁面的結構和外觀。
2,JSP腳本
如在文件中遇到什麼問題請聯絡作者 QQ:1172796094 本人正在找深圳Java實習工作,求大佬帶飛 ——————————————————————————————————————
認識微服務
系統架構演變
集中式架構/單體應用
垂直拆分
1:基金會的名稱注意這裡不是普通的公司普通公司以(PTE LTD 私人有限公司)公眾非盈利基金會為(FOUNDATION LTD)
2:提供至少3位成員,其中一人為新加坡籍(思一獨角獸 Setting IT Unicorn可提供)
3:非盈利機構註冊資金1新幣
Analysis of the open sourceXMPP server project
Three popular XMPP servers
Ratio of the XMPP server
我對248個XMPP server伺服器所使用的open source進 指標 string 好友 資料 edi back cor 簡單 over 在我的第四篇文章斷路器講述了如何使用斷路器,並簡單的介紹了下Hystrix Dashboard組件,這篇文章更加詳細的介紹Hystrix Dashboard。
一、Hystrix Dashboard
在Java開發中,有時遇到多執行緒的開發時,直接使用Thread操作,對程式的效能和維護上都是一個問題,使用Java提供的執行緒池來操作可以很好的解決問題,於是找了下API看到Java提供四種執行緒池使用,Java通過Executors提供四種執行緒池,分別為:
1、newCachedThrea
swagger,中文“拽”的意思。它是一個功能強大的api框架,它的整合非常簡單,不僅提供了線上文件的查閱,而且還提供了線上文件的測試。另外swagger很容易構建restful風格的api,簡單優雅帥氣,正如它的名字。
一、引入依賴
<depend
來自:36氪連結:http://36kr.com/p/5093721.html原文:https: 相關推薦
:angularjs學習總結(~~很詳細的教程) 很不錯的一篇帖子 適合快速瞭解angularjs整體結構 有個整體印象
Cookie介紹及在Android中的使用總結超詳細,看這一篇就夠了
angularjs學習總結 詳細教程
分布式架構的演進,分析的很詳細,很到位
第一次使用Git上傳本地專案到github上,下載、安裝、上傳(很詳細,很全面)
Matlab繪圖-很詳細,很全面
免費領取 | 10G大資料學習視訊和詳細教程大綱
Angularjs 學習總結 -- 實現省市的三級聯動
scala的隱式轉換學習總結(詳細)
Matlab繪圖-很詳細,很全面(包含各種標示符的輸入方法)
分散式架構的演進,分析的很詳細,很到位
【2020Java最新學習路線】寫了很久,這是一份最適合普通大眾、科班、非科班的路線
Java Web學習總結(7)JSP(一)
微服務Springcloud超詳細教程+實戰(一)
新加坡區塊鏈專案ICO的法律意見書,流程及費用詳細教程。思一獨角獸 Setting IT Unicorn為您解答
很久以前寫的一篇關於幾個常用XMPP server的比較文件
業余草 SpringCloud教程 | 第十一篇: 斷路器監控(Hystrix Dashboard)(Finchley版本)
#一篇文章讓你瞭解四種執行緒池,學習Java不在困惑
轉載:SpringBoot非官方教程 | 第十一篇:springboot整合swagger2,構建優雅的Restful API
機器學習到底是什麼?一篇文章帶你瞭解透徹