Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

スクリーンショット 2014-10-03 14.27.29.png

前提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/というディレクトリが作られて中にコンパイルされたファイルが出来上がってる。
ただし、こんなとこにファイルがあってもアクセスできないのでlaravelpublicディレクトに作成されるようにGruntfile.jsを修正する。

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

laravelのファイルを移動。

まずGruntfile.jsを変更する前にファイルを退避する必要がある。
grunt buildを実行するたびにpublic/の中身が削除されるて再作成されてしまうのでlaravelのindex.php, .htaccessclient/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/#/となり以下のような画面が表示されます。

スクリーンショット 2014-10-03 14.27.29.png

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away