1. susieyy

    Posted

    susieyy
Changes in title
+RESTfulAPIのFrontWebをAngular.jsで構築する準備
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,99 @@
+
+
+## 環境
+
++ 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をインストールします。
+
+```Shell
+$ brew install node
+$ brew install npm
+```
+
+npmで以下ライブラリをインストールします。
+
+```Shell
+$ npm install -g yo grunt-cli bower generator-angular
+```
+
+## ジェネレート
+
+Yeomanで雛形プロジェクトをジェネレートします。
+
+
+```Shell
+$ mkdir Test
+$ cd Test
+$ yo angular --minsafe [YOUR_APP_NAME]
+```
+
+angular-bootstrapを追加しておきます。
+
+```Shell
+$ 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ポートでアクセスできるようになります。
+
+```Shell
+$ cd Test
+$ grunt serve
+```
+
+## REF
+
++ [Yeoman で AngularJS & UI Bootstrap の開発環境構築](http://qiita.com/hkusu/items/7d748b55ba73cc8a3675)