はじめに
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>