AngularJS – Controller 介紹篇

繼續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官方教學視訊,另有控制器指令介紹的專頁

You may also like...

11,158 Responses

  1. Nine Things That Your Parent Teach You About 4 Mph Mobility Scooters 4 Mph Mobility Scooters

  2. Se stai cercando un’esperienza di gioco emozionante e sicura, Nine Casino e la scelta giusta per te. Con un’interfaccia user-friendly e un login semplice, ninecasino offre un’ampia gamma di giochi che soddisferanno tutti i gusti. Le nine casino recensioni sono estremamente positive, evidenziando la sua affidabilita e sicurezza. Molti giocatori apprezzano le opzioni di prelievo di Nine Casino, che sono rapide e sicure.

    Uno dei punti di forza di Nine Casino e il suo generoso bonus di benvenuto, che permette ai nuovi giocatori di iniziare con un vantaggio. Inoltre, puoi ottenere giri gratuiti e altri premi grazie ai bonus senza deposito. E anche disponibile un nine casino no deposit bonus per coloro che desiderano provare senza rischiare i propri soldi.

    Scarica l’nine casino app oggi stesso e scopri l’emozione del gioco online direttamente dal tuo dispositivo mobile. Il download dell’app di Nine Casino e semplice e veloce, permettendoti di giocare ovunque ti trovi. Molti si chiedono, “Nine Casino e sicuro?” La risposta e si: Nine Casino e completamente legale in Italia e garantisce un ambiente di gioco sicuro e regolamentato. Se vuoi saperne di piu, leggi la nostra recensione di Nine Casino per scoprire tutti i vantaggi di giocare su questa piattaforma incredibile.
    nine casino login https://nine-casino-italy.com/ .

  3. Хмм.. хорошая мысль. Благодарю.

  4. ADAS Car Cal表示:

    Each post is a window into The thoughts, and I must say, the view is stunning.

  5. Uta表示:

    Wonderful Feedback to Personal Site Feedback

    Brilliant write-up! I’m truly relishing the information on this platform.
    Secure you at any time considered concerning securing within digital gaming establishment wagering?

    Evolution is a superb service encompassing a diverse
    selection of top-notch engaging gaming specialist offerings.
    The adventure is outstandingly engrossing and authentic, it seems
    similar to you’re directly within the casino inside the proper gaming.

    Assuming you’re intrigued on the topic of giving the offering furthermore, I’d be quite thrilled to
    give my endorsement online location. The Evolution includes a excellent introductory
    perk for new new gamblers. It definitely unquestionably beneficial reviewing as well in case you’re
    searching for a changed online betting outing.

    Acknowledgment further in relation to the excellent digital diary information. Continue going the
    excellent activities!

    my page … online casino comparisons (Uta)

  6. цветочный грунт для комнатных растений dachnik18.ru .

  7. Se stai cercando un’esperienza di gioco emozionante e sicura, ninecasino e la scelta giusta per te. Con un’interfaccia user-friendly e un login semplice, ninecasino offre un’ampia gamma di giochi che soddisferanno tutti i gusti. Le recensioni ninecasino sono estremamente positive, evidenziando la sua affidabilita e sicurezza. Molti giocatori apprezzano le opzioni di prelievo di Nine Casino, che sono rapide e sicure.

    Uno dei punti di forza di ninecasino e il suo generoso bonus di benvenuto, che permette ai nuovi giocatori di iniziare con un vantaggio. Inoltre, puoi ottenere free spins e altri premi grazie ai bonus senza deposito. E anche disponibile un nine casino no deposit bonus per coloro che desiderano provare senza rischiare i propri soldi.

    Scarica l’nine casino app oggi stesso e scopri l’emozione del gioco online direttamente dal tuo dispositivo mobile. Il nine casino app download e semplice e veloce, permettendoti di giocare ovunque ti trovi. Molti si chiedono, “Nine Casino e sicuro?” La risposta e si: ninecasino e completamente legale in Italia e garantisce un ambiente di gioco sicuro e regolamentato. Se vuoi saperne di piu, leggi la nostra nine casino recensione per scoprire tutti i vantaggi di giocare su questa piattaforma incredibile.
    nine casino bonus https://nine-casino-italia.com/ .

  8. An All-Inclusive List Of French Door Refrigerator In Door
    Ice Maker Dos And Don’ts French Door fridge Singapore

  9. wm casino表示:

    I stumbled upon your blog post to be a compelling and astute examination of the
    emerging state of the sphere. Your analysis of the essential patterns
    and barriers grappling with enterprises in this domain was unusually forceful .

    As an fervent devotee of this issue , I would be excited to delve deeper into this
    debate further . If you are keen , I would graciously encourage you to
    investigate the thrilling alternatives presented
    at WM CASINO.
    Our platform offers a sophisticated and secure setting for connecting with kindred spirit enthusiasts and procuring
    a multitude of information to improve your awareness of this
    transformative domain . I eagerly await the opportunity of working together with you in the foreseeable
    time

  10. Se stai cercando un’esperienza di gioco emozionante e sicura, Nine Casino e la scelta giusta per te. Con un’interfaccia user-friendly e un login semplice, ninecasino offre un’ampia gamma di giochi che soddisferanno tutti i gusti. Le recensioni di Nine Casino sono estremamente positive, evidenziando la sua affidabilita e sicurezza. Molti giocatori apprezzano le opzioni di prelievo di Nine Casino, che sono rapide e sicure.

    Uno dei punti di forza di Nine Casino e il suo generoso bonus di benvenuto, che permette ai nuovi giocatori di iniziare con un vantaggio. Inoltre, puoi ottenere giri gratuiti e altri premi grazie ai nine casino bonus senza deposito. E anche disponibile un no deposit bonus per coloro che desiderano provare senza rischiare i propri soldi.

    Scarica l’app di Nine Casino oggi stesso e scopri l’emozione del gioco online direttamente dal tuo dispositivo mobile. Il download dell’app di Nine Casino e semplice e veloce, permettendoti di giocare ovunque ti trovi. Molti si chiedono, “nine casino e sicuro?” La risposta e si: Nine Casino e completamente legale in Italia e garantisce un ambiente di gioco sicuro e regolamentato. Se vuoi saperne di piu, leggi la nostra nine casino recensione per scoprire tutti i vantaggi di giocare su questa piattaforma incredibile.
    ninecasino https://casinonine-it.com/ .

  11. ThomasGed表示:

    Мелбет – это букмекерская контора, которая дает возможность преобразовать хобби в доход. Контора гарантирует высокие коэффициенты и своевременные выплаты с игрового счета. Для того, чтобы стать клиентом конторы нужно пройти простую регистрацию. Здесь разнообразные виды спорта, широкий выбор событий и типов ставок. Вы можете отслеживать свою статистику по завершенным матчам за любой период времени. Доступ к счету можно получить с ПК, смартфона или планшета. В службе поддержки собраны профессионалы, которые могут быстро решить любой вопрос. Предлагается промокод для мелбет большой выбор способов ввода средств на игровой счет.

  12. What’s The Reason? Wall Mounted Fireplaces Is Everywhere This Year Fireplaces for the Wall

  13. A Trip Back In Time: What People Discussed About Smeg Retro Fridge Freezer 20 Years Ago Side by Side fridge Freezer with water dispenser

  14. What’s The Current Job Market For Automotive Locksmith Key Programming
    Professionals Like? automotive locksmith key Programming

  15. The Main Issue With Programming Car Key And How To Fix It
    Automotive key programmer

  16. Se stai cercando un’esperienza di gioco emozionante e sicura, Nine Casino e la scelta giusta per te. Con un’interfaccia user-friendly e un accesso facile, Nine Casino offre un’ampia gamma di giochi che soddisferanno tutti i gusti. Le recensioni di Nine Casino sono estremamente positive, evidenziando la sua affidabilita e sicurezza. Molti giocatori apprezzano le nine casino prelievo, che sono rapide e sicure.

    Uno dei punti di forza di ninecasino e il suo generoso bonus di benvenuto, che permette ai nuovi giocatori di iniziare con un vantaggio. Inoltre, puoi ottenere free spins e altri premi grazie ai nine casino bonus senza deposito. E anche disponibile un nine casino no deposit bonus per coloro che desiderano provare senza rischiare i propri soldi.

    Scarica l’app di Nine Casino oggi stesso e scopri l’emozione del gioco online direttamente dal tuo dispositivo mobile. Il download dell’app di Nine Casino e semplice e veloce, permettendoti di giocare ovunque ti trovi. Molti si chiedono, “nine casino e sicuro?” La risposta e si: ninecasino e completamente legale in Italia e garantisce un ambiente di gioco sicuro e regolamentato. Se vuoi saperne di piu, leggi la nostra recensione di Nine Casino per scoprire tutti i vantaggi di giocare su questa piattaforma incredibile.
    nine casino e sicuro https://casinonine-bonus.com/ .

  17. Ten Taboos About Travel Mobility Scooters You Should Never
    Share On Twitter Heavy-Duty Electric Scooters

  18. inmak.net表示:

    The Guideline Reciprocity – Understanding Purchasing On Dating Women 오피 – inmak.net,

  19. Merissa表示:

    You revealed this terrifically!

    My blog: poker online, https://jikesi.fk.unand.ac.id/templates/slot-qris/,

  20. Randythils表示:

    хендай солярис 2024 цена новый у официального сколько стоит новый хендай солярис

  21. Sahabet表示:

    Sahabet Casino’da yeni oyuncular, en yuksek bonusu alarak oyuna kat?labilir. Populer slot oyunlar? Sahabet’te en iyi odullerle dolu. Sans?n?z? simdi deneyin ve depozitonuza +%500 kazan?n. Sahabet, buyuk oduller sunan kumarhane olarak dikkat cekiyor.

    2024\’un en karl? kumarhanesi – Sahabet [url=https://t.me/sahabet1194/]Sahabet[/url] .

  22. What Will Wall Mounted Electric Fires Be Like In 100 Years?
    Wall Hung Electric Fire

  23. JamesGed表示:

    Букмекерские компании стараются не только привлечь новых клиентов приятными подарками, но и удержать «старичков». Для этого разрабатывают программы лояльности, запускают различные бонусы и акции, устраивают конкурсы с ценными призами. Самым популярным является рабочий промокод мелбет бонус, который вводится при регистрации нового аккаунта. Благодаря ему вы получаете увеличенный бонус на первый депозит, система добавляет 30% к максимальной сумме. Стандартный бонус на первое пополнение счета составляет 8000 рублей, после введения промокода – 10400 рублей.

  24. AncrPaish表示:

    The remaining cases with high blood pressure are due to an underlying cause, such as a kidney abnormality, narrowing of the arteries to the kidneys, a congenital defect of the heart such as coarctation of the aorta, or rare tumors of the adrenal gland.
    Most online stores will guarantee you the goodrx sildenafil prices is the biggest trend .
    Meier MH, Caspi A, Ambler A, et al.

  25. You’ll Never Be Able To Figure Out This Tiger Multi Fuel Stove’s
    Tricks tiger multi fuel stove

  26. What’s The Current Job Market For L Shaped
    Metal Bunk Beds Professionals? l shaped metal Bunk beds

發佈留言

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