AngularJS v1.5.xの始め方

AngularJS

はじめに

作業メモ。あとで清書予定。

必要なツールのインストール

以下のツールをインストールする

$ npm install -g yo grunt-cli gulp bower typings karma
$ npm install -g generator-angular
$ gem install compass

プロジェクト作成

$ mkdir ng001
$ cd ng001
$ yo angular ng001

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |    Welcome to Yeoman,    |
   `---------´   |   ladies and gentlemen!  |
    ( _´U`_ )    '--------------------------'
    /___A___\
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I include Bootstrap and some AngularJS recommended modules.

? Would you like to use Gulp (experimental) instead of Grunt? No
? Would you like to use Sass (with Compass)? Yes
? Would you like to include Bootstrap? Yes
? Would you like to use the Sass version of Bootstrap? Yes
? Which modules would you like to include? angular-animate.js, angular-cookies.js, angular-resource.js, angular-route.js, angular-sanitize.js, angular-touch.js
   create app/styles/main.scss
   create app/index.html
   create bower.json
   create .bowerrc
   create package.json
   create Gruntfile.js
   create README.md
   invoke   angular:common:/Users/myomi/.anyenv/envs/ndenv/versions/v5.3.0/lib/node_modules/generator-angular/app/index.js
   create     .editorconfig
   create     .gitattributes
   create     .jscsrc
   create     .jshintrc
   create     .yo-rc.json
   create     .gitignore
   create     test/.jshintrc
   create     app/404.html
   create     app/favicon.ico
   create     app/robots.txt
   create     app/views/main.html
   create     app/images/yeoman.png
   invoke   angular:main:/Users/myomi/.anyenv/envs/ndenv/versions/v5.3.0/lib/node_modules/generator-angular/app/index.js
   create     app/scripts/app.js
   invoke   angular:controller:/Users/myomi/.anyenv/envs/ndenv/versions/v5.3.0/lib/node_modules/generator-angular/app/index.js
   create     app/scripts/controllers/main.js
   create     test/spec/controllers/main.js
Error angular ng001

You don't seem to have a generator with the name karma:app installed.
You can see available generators with npm search yeoman-generator and then install them with npm install [name].
To see the 53 registered generators run yo with the `--help` option.

yo angular --minsafe

ブログ記事では、yo angular 実行時に --minsafe オプションをつける記事がよく見受けられるが、このオプションはすでに削除されている。

参考

依存ライブラリの解決

$ npm install
$ bower install

VSCodeでインテリセンスを有効にする

プロジェクトルートにjsconfig.jsonを作成

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs"
    }
}
$ typings init
$ typings install --save --ambient node
$ typings install --save --ambient angular
$ typings install --save --ambient angular-cookie
$ typings install --save --ambient angular-animate

VS Code起動中なら再起動する。

動作確認

$ grunt serve

以下のエラーが出る場合がある。

Fatal error: Port 35729 is already in use by another process.

自分の環境ではVisual Studio Codeが利用しているポートと衝突した。

この場合は、Gruntfile.js のlivereload のポート番号を被らないように変更し、もう一度 grunt serve を実行する

    // The actual grunt server settings
    connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost',
        livereload: 35729
      },

f:id:myomi:20160403164912p:plain