Angular.js学習メモ vol.01 #JavaScript

　はじめに

Angular.jsを勉強したので、メモを残しておきます。

Code Schoolで無料講座を使用し、勉強しました。
https://www.codeschool.com/courses/shaping-up-with-angular-js

Angular.js用語

Directive:　DOM上のマーカのようなもので、JSの挙動を伝える、JSに伝えたりする。
Module: アプリケーションを定義する構成単位。
Controllers: 引数や関数を定義し、AngularJSアプリケーションをコントロールする。
Expressions: 動的変数をHTMLにインサートする。ExpressionでHTMLとデータをバインディング。HTML上で二重括弧で{{ expression }}と書く。

Directiveの例

index.html

<html>
<body ng-controller="StoreController">
    ....
</body>
</html>

main-directive.js

function StoreController(){
    alert("hello world");
}

ng-controllerがHTML上のDirectiveです。
HTMLのbodyが読み出されるときに、js上のStoreControllerメソッドが呼び出されます。

Moduleの例

main-module.js

var app = angular.module('store', []);

angulr.module : angular.jsを使いmoduleを作成。
'store' : アプリケーションの名前
[] : dependencies

DirectiveとModuleを組み合わせる

index.html

<html>
<body ng-app="store">
    ....
</body>
</html>

main-directive.js

var app = angular.module('store', []);

ng-appがディレクティブで、ドキュメントがロードされたら、appというModuleを呼ぶ。

Expressionの例

index-expression1.html

<div>{{ 5 + 6 }}</div>

html上では11と表記されます。

Controllerの例

controller.js

var app = angular.module('store', []);
app.controller('StoreController", function(){
    this.product = item;
});

var item = {
    name : チョコ,
    price : 100
}

コントロール上で定義したデータをhtml上にいかにパスします。

index.html

<html>
<body ng-app="store">
    <div ng-controller="StoreController as store">
        <div>{{ store.product.name }}</div>
        <div>{{ store.product.price }}円</div>
    </div>
</body>
</html>