AngularJS を快適に試す AngularJS Mini Template を作った

![スクリーンショット 2015-08-09 18.18.15.png](https://qiita-image-store.s3.amazonaws.com/0/19717/2021cf98-399d-36ba-9bf2-44d3d2f16ff1.png)
* Github: https://github.com/kaishuu0123/angularjs-mini-template

# はじめに
## モチベーション
1. 私が最近やっと本格的に SPA(Single Page Application) 関連の技術に触れることが多くなってきた。
2. けど、なんか色々な OSS 使ったほうが便利！これオススメ！(bower とか browserify とか gulp とか gulp でも色々なプラグイン...)とかいうのが多すぎて訳分からん
4. 頭の中を整理するためにシンプルに開発できる環境を作ってみよう

## やりたかったこと
* HTML, JS を保存したら自動的にブラウザをリロードしてほしい
* AngularJS とか Bootstrap とかいい感じで取得してきてほしい
    * CDN を調べて毎回 `<script src="http://...."></script>` を HTML 内部に書くのがダルい 

## 対象読者
* node, npm とかっていう Node.js 関連は知ってるけど、フロントエンド触る気力が起きない
* JS がなんとなく分かるけど、SPA(Single Page Application)関連には、手を出しにくいと感じている
* ドキュメント読めばできるだろうけど、なんか用語多すぎてよくわからないし、調べているうちに夜になってる

# 何ができるの？
* Goto #/sample01 のリンクをクリックしたら、ページ遷移するだけのアプリ

# 使い方
## 前提
* Mac or Linux 環境(Windows では VirtualBox なり使って Linux 環境整えるとかしてください)
* Node.js が使える環境になっていること(node, npm コマンドが利用可能)

## セットアップ
* Gulp をインストール 

```
$ npm install -g gulp-cli
```

* git clone をしたディレクトリで以下のコマンドを実行
    * これで AngularJS と Bootstrap が使える環境になりました。

```
$ npm install
```

* 最後に gulp コマンドを実行するとブラウザが立ち上がります。

```
$ gulp
```

# 何を使っているのか
* Gulp
    * 導入した目的: html や JS を保存した時にブラウザをライブリロードするため(だけ)
    * タスクランナーです。色々できますが、まずはファイルを保存したタイミングでブラウザをリロードしてくれる便利機能だけを使います。
* AngularJS
    * これをシンプルに試すために作っているので説明は省略
* AngularRoute
    * 導入した目的: AngularJS でページ遷移をするため
    * AngularJS のプラグイン的に使います
* Bootstrap
    * 導入した目的: CSS をわざわざ1から書きたくないけど、見栄えは整えておきたいため

# 各技術の説明
## package.js
* 何をインストールしようとするか、という定義ファイル。とりあえず、Angular と AngularRoute と Bootstrap が欲しいだけなのでこうやってます。

```js
{
  "dependencies": {
    "angular": "^1.4.3",
    "angular-route": "^1.4.3",
    "bootstrap": "^3.3.5"
  },
  "devDependencies": {
    "browser-sync": "^2.8.2",
    "gulp": "^3.9.0",
    "gulp-debug": "^2.0.1"
  }
}
```

## gulpfile.js
* gulp の流儀に習うと難しく感じるかもしれませんが、ただ単に HTML と JS の保存を監視しているだけです。これを書いて自動リロードが働くならシンプルだと思います。

```js
var gulp = require('gulp');
var browser = require('browser-sync');

gulp.task("server", function () {
  browser({
    server: {
      baseDir: "./"
    }
  });
});

gulp.task("html", function () {
  gulp.src([
    "!node_modules/**/*.html",
    "./**/*.html"
  ])
    .pipe(browser.reload({stream: true}));
});

gulp.task("js", function () {
  gulp.src([
    "!node_modules/**/*.js",
    "./**/*.js"
    ])
    .pipe(browser.reload({stream: true}));
});

gulp.task("default", ["html", "js", "server"], function () {
  gulp.watch("./**/*.html", ["html"]);
  gulp.watch("./**/*.js", ["js"]);
});
```

## app.js
* 書いてある通りですが、/#/ にアクセスしたら template/index.html のファイルが読み込まれてレンダリングされて、/#/sample01 にアクセスしたら template/sample01.html の内容がレンダリングされるだけです。これだけで SPA (Simgle Page Application) っぽくなります。あとの細かい AngularJS で実現したいことは調べたらなんとかなります。

```
angular.module('App', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'template/index.html',
      controller: 'IndexController'
    })
    .when('/sample01', {
      templateUrl: 'template/sample01.html',
      controller: 'SampleController'
    })
}]);
```

# 最後に 
* 昨今複雑になりがちな SPA の世界をシンプルにまとめてみました
     * 需要があるかは分かりません
* 独断で根本的に大切な箇所、最低限やってみると便利な箇所を紹介してみました
* こんな雑多な記事でも、JS 界隈に貢献できたら光栄の極みでございます