ラベル AngularJS の投稿を表示しています。 すべての投稿を表示
ラベル AngularJS の投稿を表示しています。 すべての投稿を表示

2014年12月30日火曜日

Angular JS: ゲーム風のチュートリアル

Chrome アプリでシングルページアプリを作る必要があり、
公式マニュアルで推奨されていた Angular JS を使おうと思った。

以前触った時よりにはなかったチュートリアルが追加されており、
これがすごくわかりやすい。

SHAPING UP WITH ANGULAR.JS
http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro

動画を見る→コードを書く
を繰り返しながら進んでいくのだが、
課題をクリアするともらえるポイントを消費してヒントを得たりするなど、
ちょっとゲームっぽい感じで進めていくことができる。


どうやら code school という e-learning サイトの１コースっぽい。
多分ドットインストールに課題があるような感じだと思う。
https://www.codeschool.com

そのままウェブ上でコーディングして確認できるのがすごくいい。
そういえば Go 言語のチュートリアルもそのまま入力して実行できた。
https://tour.golang.org/welcome/1
0 件のコメント:

2013年7月1日月曜日

Go の template パッケージと AngularJS の共存

AngularJS では HTML 内に {{}} で囲まれた部分を Angular 文として処理します。
一方、Go の template パッケージも {{}} で囲まれた部分を Go のコードとして処理します。
この２つが衝突してエラーが起きます。

GAE + Go では予め作っておいた HTML テンプレートに変数を展開するのが基本です。
このとき、HTML 内の変数が入る部分に {{.変数名}} という形式で表現します。

一方、AngularJS でも同様に HTML 内に Model の変数を当てはめて出力します。
書式も同じで HTML に {{変数名}} という形式で表現します。

AngularJS の変数を出力するために {{変数名}} を HTML テンプレートに埋め込むと、
Go が「これは Go の変数名だ」と勘違いして変数を探しに行きます。
Go 内で定義されていない変数を参照しようとするため nil pointer エラーが発生します。
runtime error: invalid memory address or nil pointer dereference

衝突を回避するために AngularJS で {{}} を別の記号に変更できます。
app.config(function($interpolateProvider) {
 $interpolateProvider.startSymbol('{[{');
 $interpolateProvider.endSymbol('}]}');
});

これで {{変数名}} が Go の変数を、 {[{変数名}]} が JS の変数を指すようになります。

2013年6月6日木曜日

クリックイベントの取得

AngularJS でクリックイベントを取得する方法です。
ng-click でクリック時に処理を指定出来ます。

0 件のコメント:

2013年6月5日水曜日

ページごとに異なるコントローラを設定する

AngularJS の $routeProvider でページを切り替えた際に、
各ページごとにコントローラを設定出来ます。

when() メソッドの第二引数に渡すオブジェクトの controller にコントローラ名を渡します。

page.js
angular.module('page', []).config(['$routeProvider', function($routeProvider) {
 $routeProvider.when('/page1', {templateUrl: 'page1.html', controller: Page1Controller});
 $routeProvider.when('/page2', {templateUrl: 'page2.html', controller: Page2Controller});
 $routeProvider.otherwise({redirectTo: '/page1'});
}]);

var Page1Controller = function($scope) {
 $scope.message = 'ここはページ１です';
}

var Page2Controller = function($scope) {
 $scope.message = 'ここはページ２です';
}

page1.html
<h1>ページ１</h1>
<p>{{message}}</p>
<a href="#/page2">ページ２へ移動する</a>

page2.html
<h1>ページ２</h1>
<p>{{message}}</p>
<a href="#/page1">ページ１へ移動する</a>
0 件のコメント:

2013年6月4日火曜日

テンプレートによるページ切り替え

AngularJS では Ajax を使ってページの切り替えができます。
URL のフラグメント以下のパターンによって表示する内容を変えることができます。

http://example.com/#/page1  ->  ページ１を表示
http://example.com/#/page2  ->  ページ２を表示
それ以外  ->  ページ１を表示

という感じです。
実際には外部の HTML ファイルを Ajax で取得して、ページ内へ挿入しています。


index.html の作成

まず index.html を作成します。
テンプレートの HTML を表示したいタグに、ng-view を設定します。

index.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>ページ切り替えテスト</title>
 </head>
 <body ng-app>
  <div ng-view></div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
  <script src="page.js"></script>
 </body>
</html>

ngView - AngularJS
http://docs.angularjs.org/api/ng.directive:ngView


テンプレート用 HTML の作成

index.html 内の ng-view 内に挿入される HTML ファイルを作成します。
URL フラグメントを指定してリンクを張ることで別のページヘジャンプすることができます。

page1.html
<h1>ページ１</h1>
<a href="#/page2">ページ２へ移動する</a>

page2.html
<h1>ページ２</h1>
<a href="#/page1">ページ１へ移動する</a>


モジュールを作成

JavaScript でページ切り替えの設定をします。
設定はページの初期化時に行います。
AngularJS では初期設定をするために angular.module を使います。

module - AngularJS
http://docs.angularjs.org/guide/module

まず、任意の名前でモジュールを作成します。
今回は page という名前にします。
第二引数を省略しなかった場合、新たなモジュールが作られます。

page.js
angular.module('page', []);

作成したモジュールを ng-app と関連付けます。
<body> タグの ng-app を ng-app="page" に変えます。
これで page モジュールを使って初期化が行われるようになります。

index.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>ページングテスト</title>
 </head>
 <body ng-app="page">
  <div ng-view></div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
  <script src="page.js"></script>
 </body>
</html>


$routeProvider の設定

URLフラグメントによるページ切り替えは $routeProvider によって行います。

$routeProvider - AngularJS
http://docs.angularjs.org/api/ng.$routeProvider

モジュール内で $routeProvider の初期設定をすることを通知します。
設定はモジュールの config() メソッドで行います。

page.js
angular.module('page', []).config(['$routeProvider', function($routeProvider) {
    // ここに設定処理を書く
}]);


URL パターンと、表示する HTML ファイルを設定します。

page.js
angular.module('page', []).config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/page1', {templateUrl: 'page1.html'});
    $routeProvider.when('/page2', {templateUrl: 'page2.html'});
    $routeProvider.otherwise({redirectTo: '/page1'});
}]);


これでページの切り替えができるようになります。
指定したパターンが URL フラグメントの後ろに現れた場合、
該当するテンプレート HTML が ng-view の中に表示されます。



ソースコードはこちらからダウンロード出来ます（ファイル->ダウンロード）
https://docs.google.com/file/d/0B0qhX3iM3_v0LWtqM2o4clBmOEE/edit?usp=sharing


0 件のコメント:

2013年6月3日月曜日

セレクトボックスで並び替え

オブジェクトのリストを、要素の値によって並び替える方法です。
セレクトボックスで、どの要素で並び替えるのかをリアルタイムに変えられるようにしてみます。




Controller と Model を作る

並び替える条件として name と sex を準備します
var Controller = function($scope) {
    $scope.persons = [
        {name: 'tanaka', sex: 'man'},
        {name: 'sato', sex: 'woman'},
        {name: 'suzuki', sex: 'woman'},
        {name: 'okano', sex: 'man'},
        {name: 'kumagai', sex: 'man'}
    ];
}


View を作る

何もしないセレクトボックスを作成します
更にデータの一覧表示をします
<div ng-app ng-controller="Controller">
    <select>
        <option value="name">name</option>
        <option value="sex">sex</option>
    </select>
    <ul>
        <li ng-repeat="person in persons">
            {{person.name}} : {{person.sex}}
        </li>
    </ul>
</div>


<select> の値を取得する

ng-model を設定することで、選択した <option> の value を取得出来ます。
ここでは sort という名前のモデルに name または sex が入るようにします。
<div ng-app ng-controller="Controller">
    <select ng-model="sort">
        <option value="name">name</option>
        <option value="sex">sex</option>
    </select>
    <ul>
        <li ng-repeat="person in persons">
            {{person.name}} : {{person.sex}}
        </li>
    </ul>
</div>

<select> についてはこちらを参照

select - AngularJS
http://docs.angularjs.org/api/ng.directive:select


orderBy フィルタで並び替える

最後に <select> で取得した要素でリストを並び替えます。
orderBy フィルタに要素名を渡すと、その要素によって並び替えが行われます。
<div ng-app ng-controller="Controller">
    <select ng-model="sort">
        <option value="name">name</option>
        <option value="sex">sex</option>
    </select>
    <ul>
        <li ng-repeat="person in persons | orderBy:sort">
            {{person.name}} : {{person.sex}}
        </li>
    </ul>
</div>

orderBy - AngularJS
http://docs.angularjs.org/api/ng.filter:orderBy


0 件のコメント:

2013年6月2日日曜日

検索フォームを作る

リスト内の文字列から検索条件に一致する文字列だけを表示する機能です。
Result タブをクリックして検索してみてください。




データの作成

Controller と Model を作成します。
var Controller = function($scope) {
    $scope.names = ['tanaka', 'sato', 'suzuki', 'nakamura', 'okano', 'yamada', 'ida'];
}


ビューの作成

まずはデータを一覧表示するだけのビューを作成します。
検索ボックスも作ります。
<div ng-app>
    <div ng-controller="Controller">
        検索：<input type="text"></input>
        <ul>
            <li ng-repeat="name in names">
                {{name}}
            </li>
        </ul>
    </div>
</div>


検索文字列の取得

検索ボックスに入力された文字列を取得します。
ng-model ディレクティブを使ってフォームに入力されたデータを取得出来ます。
入力された文字列を condition という名前で保存します。

ngModel - AngularJS
http://docs.angularjs.org/api/ng.directive:ngModel

<div ng-app>
    <div ng-controller="Controller">
        検索：<input type="text" ng-model="condition"></input>
        <ul>
            <li ng-repeat="name in names">
                {{name}}
            </li>
        </ul>
    </div>
</div>

フィルターを設定

検索文字列をフィルターとして ng-repeat に設定します。
ng-repeat 部分に | filter:condition を追加すると、文字列に condition が含まれるものだけがループへ入るようになります。

filter - AngularJS
http://docs.angularjs.org/api/ng.filter:filter

<div ng-app>
    <div ng-controller="Controller">
        検索：<input type="text" ng-model="condition"></input>
        <ul>
            <li ng-repeat="name in names | filter:condition">
                {{name}}
            </li>
        </ul>
    </div>
</div>

これで検索条件に引っかかる要素のみが表示されるようになります。

0 件のコメント:

2013年6月1日土曜日

ModelのリストをViewで表示

View から Model のリストを順次読みだしながら表示する方法です。


View を作成

まず HTML で View を作成します。
コントローラを指定しておきます。
<div ng-app>
    <div ng-controller="Controller">
        <p>リストの中身を表示</p>
        <ul>
            <li>ここに配列の中身を表示したい</li>
            <li>ここに配列の中身を表示したい</li>
            <li>ここに配列の中身を表示したい</li>
        </ul>
    </div>
</div>


Controller と Model を作成

View で指定した名前の Controller を作成します。
Model として $scope に配列を追加します。
$scope に names を追加したことで View からも names へアクセスできるようになります。
var Controller = function($scope) {
    $scope.names = [
        'tanaka', 'suzuki', 'sato'
    ];
};


View でリストの表示方法を指定する

HTML の li 要素に ng-repeat を追加して配列内の要素の表示方法を指定します。
以下の例では Model の names から要素を１つずつ取り出して name へセットしています。
names の要素数だけ繰り返し li 要素を作成し、{{name}} が解釈されて文字列へ置き換わります。
<div ng-app>
    <div ng-controller="Controller">
        <p>リストの中身を表示</p>
        <ul>
            <li ng-repeat="name in names">
                {{name}}
            </li>
        </ul>
    </div>
</div>

これで以下の様に出力されます。
・tanaka
・sato
・suzuki


配列内のオブジェクトを読み出す

配列の中身がオブジェクトだった場合は、いつもどおり . をつけて要素を参照できます。
また、ng-repeat で要素を取り出している時に {{$index}} と書くことで現在の要素番号を表示できます。
ng-repeat について詳しい情報はこちらを参照してください。

ngRepeat - AngularJS
http://docs.angularjs.org/api/ng.directive:ngRepeat


以下は $index による番号表示と、配列内のオブジェクトの要素へのアクセス例です。

0 件のコメント:

2013年5月31日金曜日

ViewへModelのデータを表示

AngularJS における MVC の役割は以下のようになっています



View
HTMLファイル
Modelのデータをどのように表示するかを設定する
タグに ng-controller で Controller を設定する

Controller
JavaScript の関数オブジェクト
View から ng-controller で指定される
指定されたタグ以下だけから参照できるスコープを作成する
$scope を使ったデータ(モデル)の定義とその他のビジネスコードを書く

Model
Controller の中で定義される $scope の要素として定義されるデータ
View の {{}} や ng-repeat などを使って画面に表示される

View と共に Controller も階層化されることと、Controller の中で Model が定義されるのがミソっぽいです

ngController - AngularJS


View に Controller を設定して、Controller 内で定義される Model を画面に表示するサンプルです。
HTML に View、 JavaScript に Controller と Model が定義されています。
小さなコードですが基本的な３要素が入っています。

0 件のコメント:

2013年5月30日木曜日

ng-appディレクティブとAngular式

AngularJS を使うときには通常 <html> 要素に ng-app ディレクティブを追加する。
ng-app ディレクティブを見つけたら、そこから下の要素内にある {{}} で囲まれた式を実行する。
AngularJS の内部では ng-app などのディレクティブは ngApp のようにキャメルケースで扱われる。
API Reference でもディレクティブはすべてキャメルケースで表記されている。

ngApp - AngularJS
http://docs.angularjs.org/api/ng.directive:ngApp


{{}} の中身は JavaScript ではなく Angular 用の式になる。

  • 変数の中身を表示したり、簡単な計算ができる
  • if や for などの制御はできない。
  • 変数が未定義でも undefined が表示されたりしない
  • フィルタを使って日付やお金など様々なフォーマットで出力できる
などの特徴がある

Expressions - AngularJS
http://docs.angularjs.org/guide/expression


フィルタについていくつか試してみたのがこちらです。
フィルタは自作することも可能なようです。

0 件のコメント:

2013年5月29日水曜日

AngularJSを導入する方法

公式サイトを開いて Download をクリックします
http://angularjs.org

CDN の URL をコピーして HTML へ貼り付けます。
もちろんソースコードをダウンロードして参照してもOKです。
<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    </head>
    <body>
        {{'Hello' + ' world !'}}
    </body>
</html>

この HTML ファイルをブラウザで開いてみて Hello world ! と表示されれば問題ありません。
{{'Hello' + ' world !'}} がそのまま出力された場合はスクリプトが読みこめていません。
jQuery や underscore.js など他のライブラリに依存していないのがポイントですね。
0 件のコメント:
登録: 投稿 (Atom)