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...

1,391 Responses

  1. Jamested表示:

    ivermectin cream cost stromectol tablets for humans ivermectin dosage for mange in dogs

  2. MichaelPlela表示:

    cialis from india cialis tadalafil

  3. MichaelPlela表示:

    sildenafil citrate 100mg for sale sildenafil 20 mg sildenafil citrate 100mg for sale

  4. MichaelPlela表示:

    sildenafil citrate tablets 100 mg viagra tablets for men viagra tablets for men

  5. zsynvzei表示:

    provigil 100mg pills modafinil 100mg usa cost modafinil 100mg

  6. spfchgzh表示:

    order provigil 200mg order modafinil 200mg for sale generic provigil 100mg

  7. mhfpucrj表示:

    buy modafinil 100mg pill oral provigil order provigil

  8. MichaelPlela表示:

    clomid tablets for sale clomid tablets clomid tablets for sale

  9. quiaoll表示:

    ■ Video screen saver
    ■ System tray icon
    ■ Calendar support
    ■ Find and back multiple images
    The software provides a system tray icon which is used to display the wallpaper and a popup menu which is used to switch between different themes. Clicking the “Button 3” in the menu will restart the program and load the current wallpaper and quote into the desktop.
    To change the desktop background or the outlook of the software, simply double click the https://wakelet.com/wake/7A3lsEVO5ZmXAS6zUzcI8 8cee70152a quiaoll

  10. quibirt表示:

    But if you are a true aficionado of mathematical programming in the realm of computer algorithms, then you should probably not settle for anything less than a bespoke IDE, which is exactly what we at our team have developed.
    We have adopted a completely new interface that looks and feels a lot like MATLAB and has no less than 30 unique features, among which are the following:
    Solution tab -> Visualize all the solutions of your linear and mathematical programs for free
    Quick search of parameters and variables
    Augmented built-in documentation with notes, comments and useful formulas for easy understanding of a particular problem
    Integrated problem handling option https://wakelet.com/wake/PiIFbqPTHttJ8S9L_3_YF 8cee70152a quibirt

  11. wardwan表示:

    In a nutshell, IMFACEBOOK is a web-based program that is part of a free suite of applications integrated into a dedicated Facebook client named “IMFACEBOOK”.
    Fugue is a web-based tool for creating customized websites with a stunning collection of features.
    Specifically, it can allow you to create nearly limitless pages with a customized look and feel, complete with back-end templates, as well as work on a massive amount of data that can be seamlessly added to your website http://www.renexus.org/network/upload/files/2022/05/tl2SEIVuCn418bgvjymx_19_cbe27e5f73786ea3d035a72dd65bf1bd_file.pdf 05e1106874 wardwan

  12. corhar表示:

    The video conversion works with a few clicks.  You can add multiple files to the batch conversion by drag-and-drop. When files conversion is completed, you can choose output file selection to save result to a series of destination folders. It is very easy to define conversion  https://zechasislo.weebly.com

    6add127376 corhar

  13. barctia表示:

    Archives

    As Seen On

    Aside from the direct downloads, this website offers access to occasional software reviews. It is our endeavour to present the reviewed software accurately, honestly and with detail.

    While we welcome guides, tutorials and tips from the pro-user community, there is no such thing as professional or hobbyist support here.

    We encourage you to use the information on this website responsibly and support the community by buying software directly from the manufacturers. You should always https://zucando.com/responsive-website-checker/index.php?url=https://ttowoutinge.weebly.com

    6add127376 barctia

  14. delyver表示:

    Yahoo! and FXMarketHours are both trademarks of Yahoo! Inc.
    For more info on the history and the current state of Yahoo! Widgets please go here:

    Dow Jones FX Market Watches | DailyFX data via Yahoo! Quotes | DailyFX indexes via Yahoo!

    2:28

    OANDA FX Market https://sujuture.weebly.com

    6add127376 delyver

  15. parger表示:

    If you are interested in this particular app, you can get it on its official website by clicking on the link below.
    Official website

    This is a guest post by our own IT pros.
    We’re running around like crazy with all the exciting information on the pandemic threat. We need to be protective of our data, mobile devices, personal computers.
    We need to anticipate the demands of the workforce, so they can stay productive, as the lights go out and our https://vega-int.ru/bitrix/rk.php?goto=https://rapetaden.weebly.com

    6add127376 parger

  16. finstea表示:

    Hypocholesterolemia in mice: studies on the mechanism of low-density lipoprotein receptor gene expression.
    Hypocholesterolemia caused by low-density lipoprotein (LDL) receptor gene defects in mice provides an excellent model to study the physiologic role of this receptor. Studies in hypomorphic alleles of mice with mutations in the LDL receptor gene suggest that the receptor has a role in controlling total serum cholesterol. However, only LDL receptor-negative mice become hypoch http://roxftpd.free.fr/redirect.php3?url=https://padelite.weebly.com

    6add127376 finstea

  17. haryoo表示:

    On the other hand, the so-called compact view shows an organized table and instantly refreshes functionality, while there’s no other similar application that can effortlessly provide the same info. In any case, if you’re searching for a lightweight application that can significantly cut down on the problems of your computer, you’ve come to the right place.

    Ease of Application Use:7.0 / 10

    Ease of Use:7.0 / 10 https://comnuzzgelu.weebly.com

    6add127376 haryoo

  18. bethvort表示:

    Q:

    Preventing header from being clipped by page dimension

    I have a fixed-width container design, and I would like it to maintain the aspect ratio between my header and my footer. If I keep the header and footer fixed widths, the page will expand to fill the available space, but because of the aspect ratio, it will likely do so by breaking my layout. I can add padding to the side to break the layout, but that seems to defeat https://bitwurzteachdoi.weebly.com

    6add127376 bethvort

  19. markdav表示:

    The photos are selected automatically from a web based search engine Opera’s image search tools.

    In order to use this widget, you must be using Google Chrome or Firefox browser.

    Need help? Read the Help page:

    Another example of Opera’s flexibility: how to use the pictures in the widget on other pages. For example, you can https://www.krishna.ru/bitrix/redirect.php?event1=25u0430%25u044225u0440%25u043425u0448%25u0438&event2=&event3=&goto=https://rectilonciou.weebly.com

    6add127376 markdav

  20. raegmarr表示:

    A perfect app to get simple and enjoy the process of creating, as well as a great program to make your photos look stunning in no time at all.
    If you enjoy creating collages, highly suggested!

    1 LIKE2 HATEThank Dubi1 dislike

    Do you want to report bad or incomplete apps?Please provide a detailed description of the app, in as much details as possible to make our team to fix it as fast as possible.

    Transmit FOR S https://cse.google.bt/url?sa=i&url=https://hydsedihis.weebly.com

    6add127376 raegmarr

  21. wylores表示:

    It can also export the model to BMP, TGA, JPG or PNG formats. This tool also allows you to create, edit and render your own 3D models.

    Metallography Suite is a real-time metallography software for 3D modeling and virtual prototyping. Utilizing workstations made by third party partners like Windows NT or Vista, it allows users to use their CAD data directly to generate a project by 3D printing.

    PERSONAL http://bouwteamp-o.be/?URL=https://vawifirmse.weebly.com

    6add127376 wylores

  22. MichaelPlela表示:

    viagra sildenafil 100 mg viagra where to buy

  23. vanoiter表示:

    The last step of the installation is related to the registration of the application. After the registration is completed, users can close the program in case they want to continue the procedure without any modification to their system settings.
    NBL Purchasing can be used as a standalone application with very basic characteristics. It is expensive and a good option for clients who do not have experience with making software. Another advantage is that the application supports Unicode, which is very complicated for very basic applications, such as NBL https://vivapacar.weebly.com

    6add127376 vanoiter

  24. valeregn表示:

    Rating: 5 / 5This undated photo provided by the U.S. Forest Service shows a new, illegal campground in the Forest Service’s Hoover Wilderness on the Western Slope of Colorado. National forest officials in Colorado said small signs left by illegal campers have been popping up on wilderness lands along with busted campsites. (AP Photo/U.S. Forest Service, Brian Folberg)

    PARK CITY, Colo. (AP) — Days after everyone else in http://uberry.ru/bitrix/redirect.php?event1=&event2=&event3=&goto=https://abophcluton.weebly.com

    6add127376 valeregn

  25. molnarr表示:

    Facebook Applications – An Overview

    Programm (appl. name, also known as app) is a trademark of Facebook Inc. Its programm is a user-friendly application specifically developed for personal Facebook accounts. Facebook is a social networking website allowing its users to create profiles and to share their personal information and media with other people. The programm can be downloaded free of charge and has no cost in using it. It is compatible with Windows systems only, however some mobile platforms like Android or https://www.trojaner-board.de/redirect-to/?redirect=https://matanbdure.weebly.com

    6add127376 molnarr

  26. rennumpy表示:

    Finally, if you are already a fan of few, do not hesitate to get the software, all at affordable prices.

    Nowadays, a variety of high-definition digital video cameras and camcorders have hit the market, and many such devices offer features that are hard to find in a typical camcorder. I have compiled a list of the Top 10 best digital video cameras and camcorders that you can buy right now.

    Sennheiser is a leading manufacturer https://provbarciobrig.weebly.com

    6add127376 rennumpy

發佈回覆給「rennumpy」的留言 取消回覆

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