AngularJS筆記 - Part 1 @ 每天都有新鮮事

以下筆記內容，都是從 codeschool 的 AngularJS 課程而來

Include CDN angular.js

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>

Including Our Module

ng-app 宣告這個 DOM 都是讓 AngularJS 來管控
常見寫法…指定 module名稱…對應 var app = angular.module('store', [ ]);

Expressions 表達式

使用兩個大括號來 print value {{ }}

Controllers

ng-controller="StoreController as store" (使用StoreController且命名別名為 store 使用)

{{ store.product.name}}


app.controller('StoreController', function(){
    this.product = {
        name: 'John',
        age: 33,
        gender: male
    };
});

ng-controller 使用範圍僅限於所包含的 DOM 元素

NgShow / NgHide Directive

Tag 中加入 ng-show=“store.product.canPurchase" 其中 canPurchase 為布林植，當 canPurchase = true 時則顯示，若 canPurchase = false 時則不顯示
而 ng-hide 的使用方式與 no-show 類似，只是當判斷的布林值 true 時隱藏，flase 時顯示

Multiple Products

app.controller('StoreController', function(){
     this.products = [
          {
               name: 'John',
               age: 33,
               gender: male
          },

          {
               name: 'Mary',
               age: 28,
               gender: female
          }
     ];
});

在 HTML 中用陣列取值 {{ store.products[0].name }}

Working with An Array

ng-repeat
在需要以回圈顯示資料的地方(ex. DOM, Tag…) 加上 ng-repeat="product in store.products"，使用方式類似javascript 的迴圈 for(var key in Array) 用法

Directives We Know & Love

ng-app - attach the Application Module to the page
<html ng-app="store">

ng-controller - attach a Controller function to the page
<body ng-controller="StoreController as store">

no-show / mg-hide - display a section based on an Expression
<h1 ng-show="name"> Hello, {{name}}!</h1>

ng-repeat - repeat a section for each item in an Array
<ul>
  <li ng-repeat="product in store.products">{{product.name}}</li>
</ul>

Output Filter

{{ data | filter:options }}

JS Bin

AngularJS

soarlin

每天都有新鮮事

soarlin 發表在痞客邦留言(0) 人氣()

每天都有新鮮事