どうもこんばんは。
tomigungunです。

会社でAngularJSを利用したプロジェクトに携わることになったので、勉強したことをブログに書きます。

以下の公式サイトのスライドを読んでまとめたものになります↓

http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro

とりあえず今回はLevel1のみ。

Level1: Getting Started

知っておいてほしいこと

必須

HTML・CSS
JavaScript

知っていると良いこと

テスト自動化
BDD（振る舞い駆動開発）
TDD（テスト駆動開発）

それほど重要でないこと

jQuery
Ruby on Rails
Rython, PHP, etc
Databases

なぜAngularなのか？

JavaScriptを組織化してくれる
レスポンシブ（高速な）ウェブサイトを構築できる
jQueryとの親和性が高い
テストがしやすい

今までのページ再読み込み

ブラウザからサーバーへリクエストを送信
サーバーからWebpageとAssetsを含んだレスポンスが返ってくる
ブラウザはウェブページ全体を読み込む
リンクをクリックし、新しいリクエストを送信
同じくサーバーからレスポンスが返ってくる
再びブラウザはウェブページ全体を読み込む

Angularを使った"レスポンシブ"なウェブサイト

ブラウザからサーバーへリクエストを送信
サーバーからWebpageとAssetsを含んだレスポンスが返ってくる
ブラウザはウェブページ全体を読み込む
リンクをクリックし、新しいリクエストを送信
サーバーからJSONデータが返ってくる
ブラウザはすでに読み込んでいるページヘデータを埋め込む

AngularJSとは何か？

HTMLとの双方向性を提供する、クライアントサイドのJavaScript フレームワーク

ディレクティブ

ディレクティブとは、JavaScriptのコードを動作もしくは参照することをAngularへ伝えるためのHTMLタグのこと

<!DOCTYPE html>
<html>
  <body ng-controller="StoreController">
  ・・・
  </body>
</html>

function StoreController() {
  alert('Welcome, Gregg!');
}

ライブラリのダウンロード

AngularJSのダウンロードhttp://angularjs.org/
- angular.min.jsが必要
Twitter Bootstrapのダウンロードhttp://getbootstrap.com/
- bootstrap.min.cssが必要

はじめに

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Getting Started</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <script src="angular.min.js"></script>
</body>
</html>

モジュール

Angularアプリケーションの部品を書く場所
書いたコードをよりメンテナンスしやすく、テストしやすく、そして読みやすくする
アプリケーションの依存関係を定義する場所
モジュールは他のモジュールも利用できる

モジュールを作ってみよう

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

第一引数：アプリケーション名
第二引数：必要なライブラリ

表現

HTMLへ動的な値を入れることができる

数値
文字列
その他

<!DOCTYPE html>
<html ng-app="store">
<head>
    <meta charset="utf-8">
    <title>Getting Started</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
    <p>
        I am {{4 + 6}}
    </p>
    <p>
        {{"hello" + " you"}}
    </p>
</body>
</html>

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

コントローラ

アプリケーションの振る舞いを定義する場所
関数や値を使用

コントローラーへの値の入れ方

クロージャーの利用
アプリケーションの中に定義

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

    var gem = {
        name: 'Dodecahedron', 
        price: 2.95, 
        description: '・・・', 
    }
})();

コントローラーの適用

divの中にディレクティブを記載
コントローラー名とエイリアスを代入
コントローラーのスコープはdiv内のみ

<body>
    <div ng-controller="StoreController as store">
        <h1> {{store.product.name}} </h1>
        <h2> ${{store.product.price}} </h2>
        <p> {{store.product.description}} </p>
    </div>
    {{store.product.name}}
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
</body>

ng-showディレクティブ

値がtrueの時に要素が表示される

<body>
    <div ng-controller="StoreController as store">
        <h1> {{store.product.name}} </h1>
        <h2> ${{store.product.price}} </h2>
        <p> {{store.product.description}} </p>
        <button ng-show="store.product.canPurchase"> Add to Cart </button>
    </div>
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
</body>

var gem = {
    name: 'Dodecahedron', 
    price: 2.95, 
    description: '・・・', 
    canPurchase: true
}

ng-hideディレクティブ

値がtrueの時に要素が非表示になる

<body ng-controller="StoreController as store">
    <div ng-hide="store.product.soldOut">
        <h1> {{store.product.name}} </h1>
        <h2> ${{store.product.price}} </h2>
        <p> {{store.product.description}} </p>
        <button ng-show="store.product.canPurchase"> Add to Cart </button>
    </div>
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
</body>

var gem = {
    name: 'Dodecahedron', 
    price: 2.95, 
    description: '・・・', 
    canPurchase: true, 
    soldOut: true
}

複数商品

app.controller('StoreController', function() {
    this.products = gems;
});

var gems = [
    {
        name: 'Dodecahedron', 
        price: 2.95, 
        description: '・・・', 
        canPurchase: true
    },
    {
        name: 'Pentagonal Gem',
        price: 5.95,
        description: '・・・',
        canPurchase: false
    }
];

配列として表示

要素番号を指定して表示

<body ng-controller="StoreController as store">
    <div>
        <h1> {{store.products[0].name}} </h1>
        <h2> ${{store.products[0].price}} </h2>
        <p> {{store.products[0].description}} </p>
        <button ng-show="store.products[0].canPurchase"> Add to Cart </button>
    </div>
    <div>
        <h1> {{store.products[1].name}} </h1>
        <h2> ${{store.products[1].price}} </h2>
        <p> {{store.products[1].description}} </p>
        <button ng-show="store.products[1].canPurchase"> Add to Cart </button>
    </div>
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
</body>

ng-repeatディレクティブを使用して表示

<body ng-controller="StoreController as store">
    <div ng-repeat="product in store.products">
        <h1> {{product.name}} </h1>
        <h2> ${{product.price}} </h2>
        <p> {{product.description}} </p>
        <button ng-show="product.canPurchase"> Add to Cart </button>
    </div>
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
</body>

Level1で学んだこと

ディレクティブ - JavaScriptの動作を制御するHTMLタグ

モジュール - アプリケーションの動く場所

コントローラー - アプリケーションの振る舞いを追加する場所

式（Expressions）- ページ内での値の取得法

以上になります。

Level1のみをやってみた感想：
「Javascript書かなくても全然動的なサイト作れるじゃん！」です笑

それでは(^_^)/~

tomigungun's blog

IT関連の勉強したこと、気になったニュース、日常の出来事などなど

Shaping up with Angular.js Level1