歡迎轉載(註明出處)或直接轉貼網址也ok,但是請不要直接把內容摳走貼在別的地方~

廢話前言:

說教學有點那個,但是它的確可以幫助跟我一樣的初學者慢慢進入AngualrJS的世界

因為我就是初學者啊

然後這篇實在是寫超久的....

因為開發時程的關係,而且jQuery 還是比較熟,所以工作上還沒辦法改用AngularJS

然後就斷斷續續的有空玩一下玩一下,轉眼間就已經是去年五月的事了,已經八個月 = =

去年五月就開始寫了啊~~~難產到這個地步

然後官方網站在此 https://angularjs.org/

裡面有些學習資源可以方便學習

 

正文開始

==================================================

AngularJS 不詳細說明了(因為我也不太瞭)

只要知道他就是眾多 js framework 繁星中的那麼一顆 (比小指

主要是由程式之神 Google 來負責維護

但他與jQuery 等 framework 眾不同的地方是,在上面運作的是一個 MVC 的框架

Model 用來存放資料與邏輯,邏輯不包含UI互動與顯示畫面

View 就是HTML DOM

Controller 用來處理 View 跟 Model 間的互動關係 

然後打開 AngularJS 的 HTML 會看到很多 ng- 開頭的屬性

如下圖 : 

Clipboard03  

ng-  是啥啊!!!

AngularJS 設置HTML標籤的屬性都是 ng- 開頭,例如 : <html ng-app>

可以把它當成是 AngularJS 的命名空間,而 - 之後的代表命令 

而標籤中有了ng- 的屬性,則表示標籤內容區塊中都是 AngularJs 應用程式範圍

但是 ng-app 這種設定方式在某些HTML驗證器上並不是有效的

所以為了讓其他驗證方式能夠順利且正確的檢查,所以AngularJS也支援以下幾種寫法

Clipboard02  

資料來源 : 

https://github.com/MrOrz/angularjs-tw/blob/master/Chapter6.markdown

and 這資料非常棒,尤其是翻譯成繁體中文之後

 

除了是運作在 MVC 框架上之外,他還有一個非常吸引人的特點就是資料的雙向繫結

意思就是你如果改了某輸入框的值,有利用那輸入值運算的地方也會同步改變

下面這個 run 一下就知道什麼意思,請自己切換HTML 或 Result 頁簽看結果

 

第一步 - 設定與使用

首先要使用AngularJS之前,除了引用他的 js之外,必須要在你的HTML中設定ng-app屬性

例如:<html ng-app>  (當然不一定要寫在html 標籤裡面)

AngularsJS 看到 ng-app 後就會自動初始化該標籤範圍內的程式

正常來說一個頁面只能有一個 ng-app,而且可以在啟用時順便指定要使用哪個模組

而模組中可能還會有多個 controller

例如 : <html ng-app="ModuleA">

上面指的就是要使用模組ModuleA,關於模組的建立之後會提到

 

第二步 - 開始玩幾個簡單的例子

設定完 ng-app 之後,來試試看一個簡單的例子

透過這例子可以稍微了解 AngularJS 運作的方式

首先會用到幾個屬性叫 ng-model、ng-init

ng-model:View 對應 module 的名稱

ng-init:指定初始值

要注意的是一個元素中只能有一個 ng-model

如以下的例子,ng-init 指定了price 初始值為 300,amt 為 1

HTML:

<body ng-app>

金額:<input type="text" ng-model="price" ng-init="price=300" /><br />

數量:<input type="number" ng-model="amt" ng-init="amt=1" /><br />

總金額:{{ price * amt }}

</body>

可以嘗試看看修改數量與金額會發生什麼事

 

上面範例中的 {{ price * amt }} 代表了AngularJS 的表達式

表達式中的內容由於AngularJS會自動綁定的關係,所以 model 的改變會直接反應到頁面上的 view

而AngularJS的表達式也含有 filter 的特性

例如以下範例 :

用以上幾個例子,應該可以稍微了解表達式這東西了

接下來是學著建立 controller

 

第三步 - 建立 Module 與 Controller

有時候可能有些複雜的功能,無法像上面幾個例子一樣透過自動繫結綁定來完成

這個時候就需要另外建立 controller 來做為 model 與view 間的溝通橋梁

然後我們將運作的邏輯寫在 controller 中

為了之後能方便管理與利用,也可以建立一個 Module 來放置 Controller

Controller 的幾種建立方式可以參考保哥這篇

關於 AngularJS 控制器 (ngController) 的多種宣告方法

這邊來用其中的兩種方法try try

一、直接建立函式

這應該是最簡單直接的了

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>

<script type="text/javascript" src="js/controller.js"></script>

<body ng-app>

<div ng-controller="MsgController">

 {{ Message  }}

</div>

</body>

controller.js:

function MsgController($scope) {

$scope.Message = "測試一下";

}

 可以切換以下的HTML、JS、Result 看一下結果

說明:

首先 HTML 除了放上ng-app

也多了一個 ng-controller 來指定要使用的 controller,名稱叫 MsgController

然後 controller.js 中寫了一個函數宣告式叫做 MsgController,就只是一般的函數 (這就是 controller)

這個 controller 傳入了一個參數叫 $scope

$scope 代表了 AngularJS MVC 架構中的M:Model,是AngularJS 應用程式所產生的

如果把 $scope 列出來看,會發現他是個物件,用來將 controller 與 view 連結

Clipboard02  

然後我們在 controller 當中設定了 $scope 有個 Message 屬性,並給於值

就可以反應到前面 View 層的 表達式之中了

感覺一切如此簡單

 

二、將 controller 建立在自訂的模組中

第二種寫法比較模組化,所以比較推薦用這種方法

相關的 js 可以被整理在一個模組中,日後會變得比較好維護

首先先寫完再來解釋

HTML:

<!-- 指定使用 ModuleA 的模組 -->

<body ng-app="ModuleA">

<div ng-controller="MsgController">

 {{ Message  }}

</div>

</body>

JS:

var moduleA = angular.module("ModuleA", []);

moduleA.controller("MsgController", function ($scope) {

$scope.Message = "測試一下";

});

說明:

首先建立一個自訂的 module 叫做 ModuleA

var moduleA = angular.module("ModuleA", []);

angular.module 的第二個參數是一個陣列,你可以傳入你會用到的其他 module

例如:

// 建立一個 moduleB的模組

var moduleB = angular.module("ModuleB", []);

// moduleA 中可能也會用到 moduleB 的功能,所以透過第二個參數設定後使用

var moduleA = angular.module("ModuleA", ["moduleB "]);

 

再來幫 moduleA 建立一個 controller

第一個參數是 controller 名稱,第二個參數是 controller 的本體

最後在 HTML 的 ng-app 當中指定要使用的模組名稱為 ModuleA 就完成了

範例如下:

 

2015.5.13 更新 

-----------------------------------------------

AngularJS 1.2之後的版本可以改用以下方法,會優於使用 $scope 注入的方式

HTML : 

<body ng-app="ModuleA">

<div ng-controller="MsgController as ctrl">

{{ ctrl.Message }}

</div>

</body>

JS : 

angular.module("ModuleA", []).

controller("MsgController", [function() {

this.Message = "測試一下";

}]);

原本的 controller 第二個參數改為陣列,值為實際要執行的方法

然後使用1.2之後的新語法 controllerAs,裡面的方就可以使用 this 關鍵字來定義實質的變數

並透過 html controller 引用到這些變數

優點是可以一看就知道提供方法與屬性的是哪個 controller 

 

第四步 - 進階一點的練習

官網上有個範例拿來 try try 看看

功能是有一堆手機的介紹,然後可以在頁面上透過輸入框來過濾

以下是原汁原味的官方範例

JS:

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

phonecatApp.controller('PhoneListCtrl',function($scope) {
   $scope.phones = [
{'name':'Nexus S','snippet':'Fast just got faster with Nexus S.'},
{'name':'Motorola XOOM™ with Wi-Fi','snippet':'The Next, Next Generation tablet.'},
{'name':'MOTOROLA XOOM™','snippet':'The Next, Next Generation tablet.'}
];
});

HTML:

<div class="container-fluid">
<div class="row">
<div class="col-md-2"><!--Sidebar content--> Search: <input ng-model="query">
</div>
<div class="col-md-10">
<ul class="phones">
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p>{{phone.snippet}}
</p>
</li>
</ul>
</div>
</div>
</div>

說明:

上面 JS 的 controller 中設定了$scope.phones,內容是陣列,其中包含一堆物件實字

主要是描述了手機的名稱與描述片段

然後在 HTML 使用了 ng-repeat 的疊代器,它的功用就類似 for each 只是他還可以設定過濾條件

ng-repeat="phone in phones | filter:query"

如上就代表指定了過濾條件是 ng-model="query" 的這個輸入框

然後再設定一下 ng-app 與 ng-controller 之後既可以得到如下的功能了

這個如果要用 jQuery 寫應該不止這幾行.... 

再來試試看一個官網上的範例,展示了 AngularJS 強大的雙向資料繫結

一樣是剛剛的手機名稱與資料,但加上了這支手機出廠幾年了

然後由 HTML  中的下拉選單決定要排序的方式是手機名稱還是年份

JS:

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

phonecatApp.controller('PhoneListCtrl',function($scope){
  $scope.phones =[
{'name':'Nexus S','snippet':'Fast just got faster with Nexus S.','age':1},
{'name':'Motorola XOOM™ with Wi-Fi','snippet':'The Next, Next Generation tablet.','age':2},
{'name':'MOTOROLA XOOM™','snippet':'The Next, Next Generation tablet.','age':3}
]; $scope.orderProp ='age';
});

JS 沒多大改變,但是多了 age 這個屬性

然後預設是用 age 排序

HTML:

Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>

<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>

這個好像不用什麼解釋,看一下應該就很好懂

短短的幾行 code 就可以做到過濾 + 排序了

結果如下:

 

第一篇寫了8個月後終於結束

 

整理一下重點

這篇學到了Model、View、Controller 之間的運作方式

然後可以自訂一個 Module 去管理放置 controller ,方便日後好維護

還有 AngularJS 的表達式與 filter、orderBy 的用法

AngularJS 命令的命名都是駝峰式的,記住這點比較就不會打錯了

 

第二篇打算寫其他常用到的 ng- 命令與應用

再來則是單元測試,AngularJS 另一個強打特色就是可以簡單的做測試

所以官網每一個範例結束都會有 Test 項目

等之後有學到再來補充

 

 

AngularJS 學習筆記系列 : (依本人的上進心持續增加)

AngularJS 初學者筆記與教學 (一) - 使用方式、Expression、Controller、Module

AngularJS 初學者筆記與教學 (二) 內建的簡單指令之1 ng-click、ng-show、ng-hide

AngularJS 初學者筆記與教學 (三) - AngularJS 的載入流程與 ng-cloak 運作原理 

AngularJS 初學者筆記與教學 (四) - 如何動態改變 CSS 樣式,使用 ng-class、ng-style

AngularJS 初學者筆記與教學 (五) - 繼續深入學習常用的 ng-repeat

AngularJS 初學者筆記與教學 (六) - 單元測試

AngularJS 初學者筆記與教學 (新手入門課程 - 課後心得篇)

AngularJS 初學者筆記與教學 (七) - FormController 的表單驗證與資料檢查

 

 

創作者介紹
創作者 小雕 的頭像
小雕

小雕雕的家

小雕 發表在 痞客邦 留言(5) 人氣()


留言列表 (5)

發表留言
  • 阿智
  • 講解的很詳盡!!! 感謝~
  • 阿惠
  • 您好,想詢問版主,若完全沒有程式基底的人,直接學習AngularJS會不會太困難?還是先學PHP或Javascript會比較好一點?
  • hi 你好啊!

    php是伺服器端的語言,angularjs是client的javascript framework,兩個是不一樣的東西了,可能要看你未來想要走哪個方面再來決定比較好,不過建議是學好javascript,因為這語言的cp值太高了,如果要學 angularjs js 也要有基本的底子才行~

    小雕 於 2016/01/14 17:13 回覆

  • Andy
  • 超詳盡的教學日記! 加速我學 AngularJS 的速度 謝謝
  • 悄悄話
  • Eason
  • 文章寫得很好! 想請問,第一步設定與使用,這段話 :
    " 如:<html ng-app> (當然不一定要寫在html 標籤裡面) " ,因為我目前有維護到前人的code ,我看他沒有定義 ng-app="xxx",一樣可以var module = ng.module("xxx",[]) ,請問他會是定義在哪呢 ?
  • hi 你好啊,
    ng-app 可以放在任何標籤中,在angular1.x 沒有這個應該無法運作才對,但在angular 2.x ~ 4.x呈現方式應該不同,你可能要看一下你維護的版本是多少

    小雕 於 2017/07/05 15:02 回覆