AngularJS を使ってみる #Angular

AngularJS は JavaScript のフレームワーク。

Node.js をインストール

こちらを参考にインストール。

Yeoman をインストール

$ npm install -g yo grunt-cli bower generator-gulp-angular

プロジェクトを生成

$ mkdir <project-dir> && cd $_
$ yo gulp-angular

プロジェクトを再生成

プロジェクトをGitで管理している場合は、clone後に以下を実行。

$ npm update
$ bower update

ブラウザで確認

変更を監視して、コンパイルやデプロイ、ブラウザのリロードまで実行してくれます。

$ gulp serve

ビルド

$ gulp build

dist ディレクトリにコンパイルしたデータが出力される。

ctags 設定

$ npm install gulp-shell --save-dev

gulp/ctags.js を作成。

var gulp = require("gulp");
var shell = require("gulp-shell");

gulp.task("ctags", shell.task([
    'echo "generate ctags file."',
    'ctags -R src gulp'
]));

gulp/watch.js の watch タスクに以下を追加。

gulp.watch(["src/**/*.js", "gulp/**/*.js"], ["ctags"]);

Tern for Vim の設定

.tern-project を作成。

{
    "libs": [
        "browser",
        "jquery",
        "ecma5"
    ],
    "plugins": {
        "angular": "./"
    }
}

外部ライブラリの追加

$ bower install <package> --save

index.html への追加は wiredep が勝手にやってくれます。

AngularJS のライブラリについて

AngularJSでは、様々な外部モジュールが提供されている。
必要なものを bower でインストールしよう。

http://ngmodules.org/