[Angular-1]初探Controller

Controller是操縱功能的Directive,包含在Module之下,在JS創造的方式也與function十分相似。

實作範例:

app.js
var gem = { name: 'Azurite', price: 2.95 };
//創造一個物件

var app = angular.module('gemStore', []);
app.controller("StoreController", function(){
  this.product = gem;
  //把物件帶入this.product

}); 
//因為我們創造的模組名稱是app,所以要用app.controller創建
app.html
<body ng-controller="StoreController as store">
//把controller導入body的DOM並給他名稱store
  <div class="product row">
    <h3>
      {{store.product.name}}
      <em class="pull-right">{{store.product.price}}</em>
//之後要拿這個controller的東西要用store.product去拿
    </h3>
  </div>
</body> 

正常來說就會顯示gem裡面的name和price囉!
直得一提的是這個Controller裡的東西只有在這個DOM裡面使用!!

錯誤的範例如下:

<div ng-controller="StoreController as store">
</div>
//Controller使用的DOM已經結束了!!

<div>
  <h3>
    {{store.product.name}}
    <em class="pull-right">{{store.product.price}}</em>
  </h3>
</div>
//這時候什麼東西都抓不到囉! 

以上是基本Module裡的Controller與HTML溝通,跟原生JavaScript的function使用方法一樣,裡面也可以放物件和功能,但他一定要有主人(Module)帶領他唷!

參考上一篇[Angular-1]初探Angular-1的文章,教學影片給我們Angular的小總結,如下附圖:

comments powered by Disqus