AngularJS入門筆記

標籤：des   style   http   java   使用   io   檔案   資料   ar   

原文：AngularJS入門筆記

前端時間在網上看技術文檔時，無意間就發現了它——Angularjs，隨後看了一些與之相關的資料，然後就深深的被它吸引了。研究至今，我所認為的angularjs最奇妙之處在於它的自動化資料雙向繫結功能。資料繫結能夠協助你避免書寫大量的初始化代碼從而節約開發時間，也讓開發人員從頻繁的操作DOM的痛苦深淵中解脫出來。無論是模型改變視圖，還是視圖影響模型，angularjs無疑都為靜態HTML網頁技術增添了不少色彩。當然其核心功能還包括模組化，MVC，語義化標籤和依賴注入等。

與傳統的jQuery等類庫不同的是，angularjs更注重於我們想要什麼（what），讓機器想出如何去做（how），即聲明式編程。Angularjs也是建立在這樣的信念上的：即聲明式編程應該用於構件使用者介面以及編輯軟體構件，而命令式編程適合表示商務邏輯。

Angularjs適合用來構建CRUD應用，而不適合用來開發遊戲、圖形介面編輯器等類型的應用。

廢話這麼多，大家也不能馬上理解，下面就通過樣本講解的方式帶領大家走進angularjs的奇妙世界。

要使用angularjs就需要在頁面引入angualr.min.js檔案。檔案地址傳送門：https://angularjs.org/。

 

Html代碼如下：

<!DOCTYPE HTML ><html ng-app="Store">         <head>                   <title>App</title>                   <script type="text/javascript" src="angularjs/angular.min.js"></script>                   <script type="text/javascript" src="angularjs/js/app.js"></script>         </head>         <body>                   <div ng-controller="StoreController as store">                            <ul ng-repeat="product in store.products">                                     <li>                                               <h1>{{product.name}}</h1>                                               <h2>{{product.price|currency}}</h2>                                               <p>{{product.description}}</p>                                               <button ng-show="product.canPurchase">Add to Cart</button>                                     </li>                            </ul>                   </div>         </body></html>

 

app.js代碼如下：

(function(){         var app = angular.module(‘Store‘,[]);         app.controller(‘StoreController‘,function($scope){                   this.products = gem;         });                 var gem =[{                   name:‘西瓜‘,                   price:2.95,                   description:‘不甜不要錢哦‘,                   canPurchase:false,         },{                   name:‘香蕉‘,                   price:3.95,                   description:‘香蕉個巴拉‘,                   canPurchase:true,         },{                   name:‘桃子‘,                   price:2.95,                   description:‘吃個桃子，偷的浮生半日閑‘,                   canPurchase:true,         },{                   name:‘蘋果‘,                   price:2.95,                   description:‘青苹果，酸酸甜甜就是我‘,                   canPurchase:false,         }]})();

首先在html頁面的html標籤裡有ng-app標記，ng-app標記的是angularjs應用的邊界，告訴angularjs應該管理那一塊。一個ng-app範圍可以理解為一個模組，一個頁面可以包含多個ng-app標記。

js建立模組方式如下：

var app = angular.module(‘Store’,[]);

如上我們建立了一個名為Store的模組，在頁面中我們就可以用ng-app標記來引用。接下來我們看到了ng-controller控制器標記，一個ng-controller就是一個js函數。在ng-controller裡我們可以注入$scope對象，$scope為內容物件，其範圍只在當前controller裡有效。$scope對象的頂層對象是根$rootScope，定義在$rootScope的屬性和方法為全域的屬性和方法。

上面例子中，我們在controller裡定義了變數products對象，在頁面中我們是通過ng-repeat、ng-show和運算式輸出products的詳細資料。ng-repeat標記用來迴圈遍曆數組或對象數組。ng-show標記表示是否顯示該元素，與之對應的標記是ng-hide標記，表示是否隱藏元素。在angularjs中使用雙大括弧來輸出運算式的值，例如｛｛product.name｝｝。

以上就是angularjs的基本使用，就是如此的簡單，簡單的標記組合就能創造出富態的頁面。

 

推薦：

圖靈教程：http://www.ituring.com.cn/article/13471

         Google教程，入口由官網進：https://angularjs.org/

AngularJS入門筆記