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,140 Responses

  1. I have thoroughly enjoyed the insights provided in this reflective
    blog piece . The penman has eloquently conveyed several
    salient propositions that reverberate with me significantly .

    As an enthusiastic promoter of pioneering entrepreneurial initiatives
    , I would yearn to tender an entreaty to you to
    examine the exceptional prospects available
    at Pragmatic Play .

    This vibrant business is at the forefront of digital breakthroughs
    , delivering a lively and rewarding realm for aficionados who exhibit a
    enthusiasm for excellence and a resolve to heighten
    the frontiers of what is viable .

    I urge you to contemplate this entreaty and examine
    the cornucopia of possibilities that beckon .

    Graciously feel free to get in touch if you have any
    doubts or would intend to mull over more extensively .

    Most respectful compliments ,

    my blog online casino regulations

  2. What Is Everyone Talking About Spare Car Keys Cut Right Now spare keys for Cars

  3. Лучший выбор для азартных игроков | Наслаждайтесь азартом на Casino Kometa com | Испытайте свою удачу прямо сейчас | Увеличьте свои шансы на победу с Casino Kometa com | Азартные игры в любое удобное время | Легальное игорное заведение с безопасными условиями | Играйте в любимые игры и открывайте новые возможности на Casino Kometa com | Попробуйте разнообразные игры и наслаждайтесь азартом вместе с нами | Играйте с комфортом и уверенностью в своей поддержке | Система быстрых депозитов и выводов средств | Легко и удобно управляйте финансами в игровом процессе | Играйте и выигрывайте с выгодой на Casino Kometa com | Без лишних сложностей начните играть на Casino Kometa com | Зарегистрируйтесь и начните играть в один клик | Бонусы за регистрацию и перв
    kometa casino онлайн kometa casino официальный .

  4. marketing表示:

    Why London SEO Is Everywhere This Year marketing

  5. Abrahamwarne表示:

    best online pharmacy generic viagra: provigil mexican pharmacy – publix pharmacy lisinopril

  6. You’ll Never Guess This Auto Folding 4 Wheel Mobility Scooter’s Secrets Auto Folding 4 Wheel Mobility Scooter

  7. Private Psychiatrist Diagnosis Isn’t As Difficult As You Think Private Psychologist Near Me
    (Sjbdirectory.Com)

  8. Consuelo表示:

    I came across your blog post to be a engaging and wise examination of the
    up-to-date state of the domain . Your analysis of the
    critical movements and obstacles dealing with establishments in this sphere was remarkably impactful.

    As an ardent proponent of this theme , I would be delighted to extend this exchange further .

    If you are interested , I would enthusiastically exhort you
    to venture into the exciting possibilities available at WM CASINO.
    Our platform provides a cutting-edge and impenetrable realm for collaborating with
    aligned aficionados and gaining a multitude of information
    to improve your familiarity of this fluid industry .
    I look forward to the possibility of cooperating with you in the approaching
    future

    Also visit my site … free credit casino – Consuelo

  9. 10 Reasons That People Are Hateful To Nissan Qashqai Replacement Key
    Nissan Qashqai Replacement Key Replacement Nissan Keys

  10. The Long Double Ended Dildo Success Story You’ll Never Believe
    double Sextoys

  11. Лучшая перетяжка мягкой мебели в Минске
    Доверьте свою мебель профессионалам
    Индивидуальный подход к каждому клиенту
    Опытные мастера по перетяжке мебели
    Превратите старую мебель в новую с помощью нашей компании
    Как правильно подобрать ткань для мягкой мебели
    Тенденции в перетяжке мебели для дома
    Что говорят о нас клиенты
    Скидки и акции на перетяжку мягкой мебели
    Идеи для интересной перетяжки мебели
    Подарите своей мебели вторую жизнь
    Как обновить мебель с минимальными затратами
    Обсуждение дизайна и материалов с нашими специалистами
    Современные технологии в перетяжке мягкой мебели
    Индивидуальный подход к каждому заказу по перетяжке мягкой мебели
    Разнообразие цветов и оттенков для перетяжки мягкой мебели в Минске
    Мы уверены в качестве наших услуг
    Индивидуальный подход к оформлению вашей мебели
    перетяжка мебели перетяжка диванов .
    Бесплатный забор и доставка мебели для перетяжки в Минске
    Подробнее о процессе перетяжки мягкой мебели в Минске
    Какую ткань выбрать для мебели в домашних условиях
    Выбор стилей и фактур для мебели
    Как сделать быструю и качественную перетяжку мягкой мебели в Минске
    Как правильно подбирать цветовые решения для мебели
    Где можно перетянуть мягкую мебель в Минске недорого
    Преимущества онлайн-консультации по перетяжке мебели
    Модные решения для перетяжки мебели в Минске
    Как проверить квалификацию мастеров по перетяжке мягкой мебели
    Почему стоит выбрать перетяжку мебели на заказ
    Где можно быстро и качественно перетянуть мягкую мебель в Минске

  12. Eltonwag表示:

    ретрит для мужчин https://ретриты.рф

  13. Irobot Vacuum Tools To Ease Your Daily Life Irobot Vacuum Trick Every Individual Should Know robot Vacuum cleaner

  14. Treasure Your Comment!

    I’m Thrilled you Unearthed the Entry Valuable.

    If you’re Curious about Uncovering more Prospects in the
    online Sports World, I’d Suggest Giving a shot CMD368.

    They Supply a Plethora of Stimulating Betting Prospects,
    Broadcasted events, and a Intuitive System.

    What I Sincerely Favor about CMD368 is their Dedication to Mindful Gaming.
    They have Rigorous Safety and Options to Help Customers
    Be responsible.

    Irrespective if you’re a Veteran Sports fan or Inexperienced in the Game, I Suspect you’d Really Relish the Adventure.

    Feel free to Register Via the Provided link and
    Let me know if you have More Concerns.

    Feel free to visit my web page :: online sports betting [https://www.daoduytu.edu.vn/forum/links.php?url=https://cmd368sg.com]

  15. Wcrfonert表示:

    Mild anemia is thought by some to be an adaptive response to training.
    As the Internet becomes accessible buying lexapro long term side effects is by using online pharmacies
    Use uva ursi extracts that are standardize to contain 10 percent arbutin at a dosage of 250 to 500 mg three times daily.

  16. What’s The Current Job Market For Coffee Machines Capsules Professionals Like?
    Coffee Machines Capsules

  17. The 9 Things Your Parents Taught You About Coffee Machines For
    Pods coffee machines For pods

  18. DanielGed表示:

    Utilisez le Code promo 1xbt 2024 et profitez de l’offre VIP 1xBet de 200% jusqu’a 78 000 XOF sur les paris sportifs. Inscrivez-vous avec un code promotionnel et recevez un bonus de bienvenue. Vous pouvez utiliser l’argent du bonus pour parier sur des sports ou jouer dans des casinos en ligne. La promotion 2024 est valable pour tous les nouveaux clients.

  19. The 10 Scariest Things About Oil Filled Radiator With Timer Oil filled radiator With timer

  20. Профессиональный сервисный центр по ремонту фото техники от зеркальных до цифровых фотоаппаратов.
    Мы предлагаем: срочный ремонт фотоаппаратов
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  21. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем: сервисные центры по ремонту техники в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  22. How To Tell If You’re Prepared To Go After Lawyer Train Accident Injury Lawyers

  23. Numbers表示:

    20 Trailblazers Setting The Standard In Nearest Adult Store masturbator
    adult toy best (Numbers)

  24. See What Locksmiths For Cars Tricks The Celebs Are Using locksmiths For Cars

  25. Fantastic Article Feedback
    Wow , what a profound article ! I genuinely relished perusing your insights on this matter .

    As an individual who has been monitoring your digital platform for a stretch,
    I have to communicate that this is alongside your best skillfully composed and mesmerizing works so far .

    The way you intertwined the lenses and scholarly findings
    was sincerely astounding . I found myself resonating as I read , as your
    claims merely came across to progress remarkably
    seamlessly .

    Visit my site; why play at bk8 (asiagaming.free.site.pro)

  26. An In-Depth Look Back: How People Talked About Chest
    Freezer For Garage 20 Years Ago lg refrigerators models

  27. The 10 Scariest Things About Birth Injury Attorney Kansas City birth injury Attorney kansas city

發佈留言

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