馬老師 雲端研究室

Passion inspires professional

馬老師 雲端研究室

AngularJS – Controller 介紹篇

by · 2015-02-06

繼續AngularJS的介紹，接下來我們看看controller的應用，以商品介紹的頁面為例，來看看這些資料要如何呈現在頁面上，想要呈現的資料有產品名稱、價格以及描述。

為了方便文章閱讀，本篇將application翻譯成應用程式；controller翻譯成控制器

AngularJS Part2 Slide1

控制器負責定義函數和值來決定整個應用程式的行為，同樣我們把Javascript和HTML分開來開發，在app.js內定義應用程式名稱和控制器的名稱、函數與值，在這次的案例中也提到利用(function(){})()包裝整個javascript是一種好習慣，有關於函式的基本觀念，大家可以閱讀一下這篇文章，介紹的還蠻詳細的！包裝部分的概念可參考其中介紹的立即函示（IIFE – Immediately Invoked Function Expression）。

AngularJS Part2 Slide2

定義好之後可以開始定義該控制器內的值，其中this.product=gem的意思是指未來在輸出時可以利用product.name去取得Dodecahedron；product.price去取得2.95…等等。

AngularJS Part2 Slide3

接下來就是把這些值顯示在網頁上，首先可以在div標籤內加上ng-controller=”StoreController as store”的屬性，其中ng-controller是去指定StoreController為該div內的控制器名稱；store是別名（類似綽號）未來呼叫store時就是在呼叫StoreController這個控制器。

AngularJS Part2 Slide5

在HTML標籤內開始輸出該控制器內的值，分別是：store.product.name、store.product.price、store.product.description三個項目，而在頁面上就會看到這三個值被顯示出來了。

AngularJS Part2 Slide6

需要注意的是，如果我們把輸出值部分的程式碼放在div外側的話，會沒有辦法順利的顯示值，因為我們的控制器是指定於div標籤內，離開了div標籤就無法取得該控制器了。

AngularJS Part2 Slide7

本篇的教學就到這邊，大家也可以透過JS Bin來測試或閱讀本次案例的程式碼。

<!DOCTYPE html>
<html ng-app="store">
<head>
<meta name="description" content="controllerExample">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>controllerExample</title>
</head>
<body>
  
  <div ng-controller="StoreController as store">
    <h1>{{ store.product.name }}</h1>
    <h2>{{ store.product.price }}</h2>
    <p>{{ store.product.description }}</p>
  </div>
  
</body>
</html>
(function(){
  var app = angular.module('store',[]);
  
  app.controller('StoreController',function(){
    this.product = item;
  });
  
  var item = {
    name:"馬老師雲端研究室 滑鼠墊",
    price:"350",
    description:"有些人認為滑鼠墊就只是種簡單的產品。無非是將滑鼠放於上方並將之滑來拖去。 “表面”上來說確實如此（一語雙關）。但實際上，製造能帶來卓越遊戲體驗的滑鼠墊卻需要結合眾多科學、技術和工藝。身為遊戲滑鼠技術的世界領先者，對如何使滑鼠感測器高效運作我們獨樹一幟。運用專門知識來製造適合的滑鼠墊表面，讓滑鼠感測器得以作出高效而精確的反應。",    
  };
  
})();

※以上截圖部分為AngularJS官方教學視訊，另有控制器指令介紹的專頁。

Tags:

You may also like...

9,318 Responses

  1. Https://themalleablemom.com/表示:
    2022-10-1919:59:06

    %%

    Also visit my blog; gambler (https://themalleablemom.com/)

    回覆
  2. larina hintze表示:
    2022-10-1908:20:05

    Hi, do have a e-newsletter? In the event you don’t definately should get on that piece…this web site is pure gold!

    回覆
  3. FrancisSmeds表示:
    2022-10-1812:18:32

    https://datingtopreview.online/# free dating online chat

    回覆
  4. best social media marketing agency in Malaysia表示:
    2022-10-1809:17:39

    Thanks for posting this. Looking for these resources 😀

    回覆
  5. marina dhow cruise表示:
    2022-10-1800:02:41

    Luxury glass cruise Dubai most famous trip with buffet dinner for tourist in Dubai, it is luxury marina glass cruise. We are Dubai based company offering best glass cruise dinner trips with luxurious facilities. The trip will start at 8:00 pm with or without pickup from your Home/Hotel.

    回覆
  6. OABAKAWLBIXfi表示:
    2022-10-1523:10:44

    pregabalin 75 mg oral order lyrica 75 mg online cost of pregabalin

    回覆
  7. Executive Business Australia表示:
    2022-10-1519:12:39

    Dude.. I am not much into reading, but somehow I got to read lots of articles on your blog. Its amazing how interesting it is for me to visit you very often. –

    回覆
  8. attincife表示:
    2022-10-1510:36:45

    For lunch and dinner I eat meat and salad buy cialis online canadian pharmacy

    回覆
  9. attincife表示:
    2022-10-1504:18:15

    Prognostic significance of expression of eukaryotic initiation factor 4E and 4E binding protein 1 in patients with pathological stage I invasive lung adenocarcinoma cialis buy

    回覆
  10. Excenejer表示:
    2022-10-1403:24:34

    generic cialis online pharmacy lol And the added extra was that hubby had a nightmare or something last night too which I think he s had 3 times in 15 years

    回覆
  11. PoemywomY表示:
    2022-10-1400:53:58

    Abraham, USA 2022 06 27 21 23 23 cialis on line Berberine may reduce how quickly the liver breaks down some medications

    回覆
  12. Easterpisn表示:
    2022-10-1323:37:14

    essay writers for pay
    college application essay service
    help in essay writing

    回覆
  13. PABAKAWLBIXuj表示:
    2022-10-1323:08:15

    how to get lyrica buy generic pregabalin without a prescription generic lyrica

    回覆
  14. Easterpisn表示:
    2022-10-1322:21:06

    college essay helper
    hire essay writer
    customized essay writing

    回覆
  15. skemnag表示:
    2022-10-1316:09:11

    cialis 5 mg More recently, another approach to organometallic anticancer agents was proposed

    回覆
  16. skemnag表示:
    2022-10-1315:49:26

    buying cialis online Mouse cervical tissues, CVSCs, and spheroids were analyzed by bulk RNA sequencing

    回覆
  17. skemnag表示:
    2022-10-1307:54:50

    cialis cost Macroscopic findings of the chest

    回覆
  18. Magda表示:
    2022-10-1306:03:44

    %%

    Here is my site :: gambling (Magda)

    回覆
  19. Enummap表示:
    2022-10-1305:29:40

    Chamomile has a very ancient reputation for wound healing cialis no prescription

    回覆
  20. skemnag表示:
    2022-10-1220:51:50

    The standoff began Monday when the troops blocked the rebels from marching into the City Hall where they plan to hoist their flag to declare independence 36 hour cialis online

    回覆
  21. Vivienepisn表示:
    2022-10-1208:36:21

    academic essay writer
    buy essays cheap
    need help in writing an essay

    回覆
  22. Vivienepisn表示:
    2022-10-1207:28:45

    college essays help
    assignment essay help
    essay writing service law school

    回覆
  23. baccaratcommunity表示:
    2022-10-1116:36:25

    Your article has answered the question I was wondering about! I would like to write a thesis on this subject, but I would like you to give your opinion once 😀 baccaratcommunity

    回覆
  24. AABAKAWLBIXsf表示:
    2022-10-1108:58:57

    where can i get generic lyrica where buy generic lyrica price where buy lyrica no prescription

    回覆
  25. Adhd sleep medication表示:
    2022-10-1013:36:20

    %%

    Look into my homepage Adhd sleep medication

    回覆
  26. marizonilogert表示:
    2022-10-1007:58:19

    Your place is valueble for me. Thanks!…

    回覆
  27. Ginniepisn表示:
    2022-10-1002:16:56

    essay writers online
    cheap essay help online
    help writing a argumentative essay

    回覆
  28. Ginniepisn表示:
    2022-10-1001:05:12

    buy an essay paper
    online essay writing service
    admission essay editing service

    回覆
  29. Antika Padişah Fermanı表示:
    2022-10-0918:44:02

    have already been reading ur blog for a couple of days. really enjoy what you posted. btw i will be doing a report about this topic. do you happen to know any great websites or forums that I can find out more? thanks a lot.

    回覆
  30. ascetacle表示:
    2022-10-0915:25:28

    lasix tinnitus For example, in some embodiments, therapeutic agents will include plant fungus or bacteria derived toxin, such as an A chain toxins, a ribosome inactivating protein, О± sarcin, aspergillin, restrictocin, a ribonuclease, diphtheria toxin or pseudomonas exotoxin, to mention just a few examples

    回覆

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。