laravelにyoでangularJs&coffeescriptを使えるようにする。

9283 ワード
Angular PHP Laravel CoffeeScript grunt PHP テキストリンク

前提laravelは動作できているものとする

generatorの設定等

まずyoコマンドを利用出来る必要があるので以下でインストール

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

globalにインストールしたところでlaravelのプロジェクトルートに移動。

クライアントのコードを管理するディレクトリを作成、移動する。

mkdir client

cd client

クライアントの環境作成

yo angular --coffee

これで雛形まで完成。

このままgrunt buildを実行するとわかるがエラーになる。

原因はGruntfile.jsの中でwiredepというタスクのoptionsが設定されてるから。

optionsのcwdをコメントアウト

Gruntfile.js
      options: {
        //cwd: '<%= yeoman.app %>'
      },

修正したら再度、ビルドを実行。

grunt build

するとclient/の中にdist/というディレクトリが作られて中にコンパイルされたファイルが出来上がってる。
ただし、こんなとこにファイルがあってもアクセスできないのでlaravelのpublicディレクトに作成されるようにGruntfile.jsを修正する。

ちなみに今作成したdist/は必要ないので削除する。

laravelのファイルを移動。

まずGruntfile.jsを変更する前にファイルを退避する必要がある。
grunt buildを実行するたびにpublic/の中身が削除されるて再作成されてしまうのでlaravelのindex.php, .htaccessをclient/app/に移動させる。

出力先の変更　client/dist/→public/
Gruntfile.js
  var appConfig = {
    app: require('./bower.json').appPath || 'app',
    dist: '../public'
  };
clean時に階層が上のファイルも消せるようにオプションを追加
Gruntfile.js
    // Empties folders to start fresh
    clean: {
      options: {
        force: true
      },
      dist: {
        files: [{
          dot: true,
          src: [
            '.tmp',
            '<%= yeoman.dist %>/{,*/}*',
            '!<%= yeoman.dist %>/.git*'
          ]
        }]
      },

退避させたindex.phpもコピーされるようにする

「src」に「'*.php',」を追加。

Gruntfile.js
    copy: {
      dist: {
        files: [{
          expand: true,
          dot: true,
          cwd: '<%= yeoman.app %>',
          dest: '<%= yeoman.dist %>',
          src: [
            '*.{ico,png,txt}',
            '.htaccess',
            '*.html',
            '*.php',
            'views/{,*/}*.html',
            'images/{,*/}*.{webp}',
            'fonts/*'
          ]
        }, {

修正したら再度、ビルドを実行。

grunt build

実行後にブラウザでアクセスするとhttp://localhost/#/となり以下のような画面が表示されます。

laravelのルーティング

今回、私の環境ではlaravelはapiのみ担当させるので以下のようにした

app/routes.php
Route::group(array('prefix' => 'api'), function() {
  Route::resource('users', 'UserController');

URLをhttp://localhost/api/usersとかするとjsonを返すようにしてる。

雛形完成

あとはangularJsからlaravelにアクセスして実装してくださいー

参考にしたサイト

generator-angular
↑初期生成だけじゃなくてcontoller等もコマンドで作成できるらしいので見といたほうが良い(まだ試してない)。

yo angular:controller user

http://qiita.com/tetsuya/items/a488b66a88369307a213#1-9
http://shoheik.hatenablog.com/entry/2014/02/26/214235

:wq