1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

AngularJS を使ってみる

Last updated at Posted at 2015-04-08

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 でインストールしよう。

参考

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?