以下筆記內容,都是從 codeschoolAngularJS 課程而來

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

文章標籤
創作者介紹

每天都有新鮮事

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