Your posts match “ AngularJS ” tag:

AngularJS初體驗

趁著沒什麼事情,來好好玩一下AngularJS,這個東西最近很火紅,當我一開始看到它的能力時眼睛是凸出來的 ...

在使用之前,先到AngularJS的官方網站按下Download按鈕,會跳出CDN網址,複製起來之後就可以另外開一個網頁進行編輯了。如果覺得麻煩也沒關係,可以到 http://jsbin.com 內建立一份空白的內容來開始測試AngularJS的能力。

好,首先我們來建立一個初稿:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  </head>
  <body>
    {{100}}
  </body>
</html>

然後來看看JSBin或你剛剛儲存的HTML頁面結果,我想畫面上顯示的應該是{{100}}對不對?但是照理說應該要顯示的是100才對 ... 這是怎麼回事呢?

因為,在<html>標籤上我們少加了一個宣告,所以基本上要用到AngularJS的頁面的話,該頁的<html>應該要寫成<html ng-app>這樣才能正常運作,所以請嘗試動手修改上面的code吧。

修改好後應該可以看到頁面上是顯示100而不再是{{100}}了吧?在AngularJS中要render在HTML上的東西,是用{{}}包住的,就有點像是寫Rails的時候會用的<%= %>一樣。

好,我們來寫一個簡單的金額計算小程式吧,假設我們有一個slider叫做price,另外一個叫做amount,拉動slider的時候可以更新金額的結果,這個部分該怎樣寫呢?

<!DOCTYPE html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  </head>
  <body>
    <p>
        價格:
        <input type="range" ng-model="price" />
    </p>
    <p>
        數量:
        <input type="range" ng-model="amount" />
    </p>
    <p>總價格:{{price * amount}}</p>
  </body>
</html>

拉動兩個slider看看,會發現底下會自動計算總價格,但是在沒有拉動之前那個地方會顯示null,實在不是很美觀,這個情況下就有兩種作法可以用。

第一種

在第一種作法中,我們可以把輸出的{{price * amount}}改成{{price * amount || 0}}這種寫法,如果前面為null則後面會回傳。

第二種

另外一種作法就是我們預設slider的預設值,我拿價格來舉例:

原本的寫法是:<input type="range" ng-model="price" />

我們改成:<input type="range" ng-model="price" ng-init="price = 100" />

如此一來,我們就可以設定初始值,預設結果就會計算出來顯示在前端了。

Okay,大致上就這樣吧。

AngularJS - Controller亂亂玩

其實我就只是隨便寫了一個小東西,順便練習所謂的ng-repeat,發現到其實很容易使用。

AngularJS是一個MVC framework,而在AngularJS中可以透過ng-controller這個屬性來指定要採用的Controller,所以直接來看code吧,或是在JSBin上閱讀也可以。

HTML

<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-controller="PhonesController">
  <ul>
    <li ng-repeat="phone in phones">
      <span class="name">{{phone.name}}</span> made by <span class="brand">{{phone.brand}}</span>
    </li>
  </ul>
</body>
</html>

Controller

function PhonesController($scope){
  $scope.phones = [
    {name: "iPhone",     brand: "Apple"},
    {name: "iPhone 3G",  brand: "Apple"},
    {name: "iPhone 3Gs", brand: "Apple"},
    {name: "iPhone 4",   brand: "Apple"},
    {name: "iPhone 4s",  brand: "Apple"},
    {name: "iPhone 5",   brand: "Apple"},
  ];
  
}

我們在<body></body>中宣告了採用PhonesController這個Controller,然後AngularJS會把整個body給當做是一個scope,這樣一來這個scope就會跟$scope這個變數有關係。

然後我們在這個scope上綁了一個叫做phones的變數,然後在HTML中我們用很神奇的ng-repeat這個參數來進行iterator的行為,把它給render到前端去 ...

至於,一個HTML文件內可以有多少個Controller呢?這個我還要再測一下就是了 ...

AngularJS - order by

這次的code底加啦

我們常會有個需求,就是根據某種條件進行排序,譬如說:最新資訊、根據名稱排序、根據製造日期 ... etc

那麼,在AngularJS下該怎樣做到同樣的事情呢?這個時候,orderBy:就是你的救星,讓我們直接來看code。

HTML

  <div id="phones" ng-controller="PhonesController">
    <input type="text" ng-model="query" /><br />
    <select ng-model="orderBy">
      <option value="age">依照年齡</option>
      <option value="name">依照名稱</option>
    </select>
    <br />
    <ul>
      <li ng-repeat="phone in phones | filter:query | orderBy:orderBy">
        <p>{{phone.name}}</p>
      </li>
    </ul>
  </div>

這次我們設定了一個ng-model叫做orderBy,當然這名稱你自己自訂就好,只不過我們透過這個orderBy所回傳的值可以影響到ng-repeat的排序設定,至於該怎樣影響呢?在過濾器之後加上orderBy:orderBy字樣就好。後面的orderBy就是我們自己自訂的名字。

如此一來,我們就可以用這樣的方式進行簡單的資料排序,沒有問題的 (Y)

AngularJS - working with Ajax

真的沒想到在AngularJS內套用居然這麼簡單= =... 這次我只需要貼Controller的變化就好了 ...

function DataController($scope, $http){
  $http.get('/home/data').success(function(data){
    $scope.phones = data;
  });
}

這次,我們的Controller不再只有把$scope給傳進去而已,還加入了$http,用來負責Ajax的部分。看到$http.get('/home/data')了嗎?我在寫這個範例的時候用的是Ruby on Rails當Backend,然後code是

class HomeController < ApplicationController
  def data
    render json: [{name: "iPhone", age: 6}, {name: "iPhone 3G", age: 5}, {name: "iPhone 3Gs", age: 4}, {name: "iPhone 4", age: 3}, {name: "iPhone 4s", age: 2}, {name: "iPhone 5", age: 1}]
  end
end

所以它回傳給AngularJS的時候丟的是JSON,如此一來它就能直接處理然後塞進變數裡面。