anjularjs簡介
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. 何時該用AngularJS
AngularJS是一個 MV* 框架，最適於開發客戶端的單頁面應用。它不是個功能庫，而是用來開發動態網頁的框架。它專一於擴展HTML的功能，提供動態數據綁定（data binding），並且它能跟其它框架（如jQuery）合做融洽。若是你要開發的是單頁應用，AngularJS就是你的上上之選。Gmail、Google Docs、Twitter和Facebook這樣的應用，都很能發揮AngularJS的長處。可是像遊戲開發之類對DOM進行大量操縱、又或者單純須要 極高運行速度的應用，就不是AngularJS的用武之地了javascript
3.客服端模板
多頁面的web應用程序經過後臺服務器程序在HTML中填充數據，而後把結果返回給瀏覽器。單頁面應用程序也成爲AJAX應用程序也是這樣作的，可是作了一些拓展。anjularJS所不一樣的是它是在客戶端完成HTML模板和數據的組合工做。這樣，服務端就成了爲前端提供靜態資源的角色，並對這些資源進行維護。html
讓咱們舉個例子來看看anjularJS是如何在前端組合HTML模板和數據的。咱們來舉一個hello，word例子，但咱們並不把Hello，world寫在html裏，咱們把hello這個問候語寫成咱們能夠再之後更改的數據形式。前端
來看下代碼java
1 <html ng-app>
2 <head> 3 <script src="angular.js"></script> 4 </head> 5 <body> 6 <div ng-controller='HelloController'> 7 <p>{{greeting.text}}, World</p> 8 </div> 9 </body> 10 </html>
4.模型-視圖-控制器（MVC）
MVC應用程序架構是在19世紀70年代做爲Smalltalk的一部分提出來的。自從被提出以來。它就成爲了構建應用程序的流行架構。不管Java、c++仍是OC都能看到MVC的影子。可是MVC對於web應用構建仍是很不成熟。c++
MVC的核心就是處理數據、邏輯和界面的分開。web
視圖從模型中取得數據，展現給用戶。當用戶和應用程序交互的時候。控制器來負責相應。而後更新模型中的數據，模型通知視圖數據的改變而後展現給用戶。編程
在Anjular應用程序中，屬兔就是DOM，控制器是JavaScript的類，模型數據存儲在對象屬性中。瀏覽器
咱們承認MVC由於有這幾個緣由：首先，它給你一個元數據模型來讓你存數據，這樣你不用每次用的時候從新產生數據。你的項目會在理解你寫了什麼上有優點，當他們知道你在使用MVC結構來組織你的代碼。也許最重要的咱們要讓你的app易於拓展維護和測試。服務器
5.數據綁定
之前的AJAX單頁面應用程序很常見，這樣的平臺有Rails,PHP，JSP幫助咱們建立用戶界面經過拼湊html和數據的方式，而後再把這些送回客戶端展現出來。架構
相似於就Query這樣的庫拓展了這種方式到客戶端，而且使咱們以一種相同的方式。可是能單獨的更新DOM，而不是更新整個頁面。這裏，咱們組合HTML模版和數據，而後插入結果到DOM中經過設置某一元素的innerHtml。
這樣的方式很好。可是當你想插入新的數據到UI中，或者改變基於用戶輸入的數據到正確的狀態，在UI和JavaScript屬性裏。
可是若是咱們能完成這些而不用寫代碼。若是咱們只是生命那部分UI映射那部分JavaScript屬性。讓他嗯自動一步同步。這種編程的風格叫作數據綁定。咱們把這種方式包含在anjularJS中是引文他能與MVC協同工做的很好。這能減小代碼當你寫視圖和模型。把數據從一個地方移動到另外一個地方的工做是自動完成的。
咱們作一個例子解釋。hellocontroller設置了模型greeting.text一次，以後就沒再改變。咱們修改這個例子經過添加一個能改變greeting.text值的文本框使greeting.text可變。
<html ng-app>ng-app屬性告訴Anjular要管理頁面的那些部分。咱們把它加到了HTML元素上。咱們將桃酥Anjular咱們想要它管理整個頁面。這樣作是很常見的。可是你可能想把它放到一個div裏。在這個app裏若是你想用一個已經存在的使用特定方法的app使用集成Anjular來管理頁面<body ng-controller='CartController'>在Angular中，你管理頁面某一部分的javascript類叫作controller。經過包含控制器在body標籤，我就生命了CartController將要管理全部<body>標籤中的全部內容。<div ng-repeat='item in items'>ng-repeat屬性告訴這裏邊的東西是要循環顯示的，，本例中將會產生三個div，每一個都有產品題目，單位價格，總價，還有一個移除按鈕。<span>{{item.title}}</span>經過{{}}來進行數據綁定，咱們能從頁面的其餘部分插入數據，而後使他保持同步<input ng-model='item.quantity'>ng-model作了文本域和屬性之間的數據綁定。{{}}是一種單向數據綁定。咱們同步數據的改變經過使用ng-model。當用戶填寫了一個新值的時候，ng-model改變了item.quantity的值。<span>{{item.price | currency}}</span><span>{{item.price * item.quantity | currency}}</span>anjular提供了一種特性叫作過濾器，使咱們可以格式化文本。有這麼一些列過濾器叫作currency過濾器能格式化美圓。<button ng-click='remove($index)'>Remove</button>咱們傳入了一個$index參數，它表明了ng-repeat的序號，因此咱們知道要刪除的是誰。
- 1. anjularjs
- 2. anjularjs 過濾器
- 3. AnjularJs教程
- 4. AnjularJS 學習
- 5. Anjularjs基礎使用
- 6. 【AnjularJS系列5】scopes、module、controller
- 7. anjularjs彈出model（模態框）
- 8. 【AnjularJS系列6】過濾器
- 9. anjularjs-filter,directive,angular模塊化
- 10. AnjularJS 表單驗證(ng-form)
- 更多相關文章...
- • Scala 簡介 - Scala教程
- • AJAX 簡介 - PHP教程
- • Github 簡明教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。