RESTfulAPIのFrontWebをAngular.jsで構築する準備

環境

• node.js v0.11.14
• npm v2.1.11
• bower v1.3.12
• grunt cli v0.1.13
• Yeoman v1.3.3
• Angular.js
• Bootstrap3

インストール

nodeとnpmをインストールします。

$ brew install node
$ brew install npm

npmで以下ライブラリをインストールします。

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

ジェネレート

Yeomanで雛形プロジェクトをジェネレートします。

$ mkdir Test
$ cd Test
$ yo angular --minsafe [YOUR_APP_NAME]

angular-bootstrapを追加しておきます。

$ bower install angular-bootstrap --save

開発用RESTFulAPIサーバへのProxy設定

/apiというPrefixでパスにアクセスした場合に、localhostの3000ポートにプロキシする設定を行います。

Grunt.js

    // The actual grunt server settings
    connect: {
      options: {
        port: 9000,
        hostname: 'localhost',
        livereload: 35729
      },
      // 追加 ここから
      proxies: [
        {
          context: '/api',
          host: 'localhost',
          port: 3000
        }
      ],
      // 追加 ここまで      
      livereload: {
        options: {
          open: true,
          middleware: function (connect) {
            return [
              require('grunt-connect-proxy/lib/utils').proxyRequest, // 追加　
              connect.static('.tmp'),
              connect().use(
                '/bower_components',
                connect.static('./bower_components')
              ),
              connect.static(appConfig.app)
            ];
          }
        }
      },

サーバ起動

localhostの9000ポートでアクセスできるようになります。

$ cd Test
$ grunt serve

REF

• Yeoman で AngularJS ＆ UI Bootstrap の開発環境構築