laravel에 yo에서 angularJs&coffeescript를 사용할 수 있도록 한다.

전제 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는 필요 없기 때문에 삭제한다.

laravel 파일을 이동.

우선 Gruntfile.js 를 변경하기 전에 파일을 퇴피할 필요가 있다.dist/ 를 실행할 때마다 Gruntfile.js 의 내용이 삭제되어 재작성되기 때문에 laravel 의 grunt build 를 public/ 로 이동시킨다.

출력 대상 변경 index.php, .htaccess → client/app/
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

실행 후 브라우저로 액세스하면 client/dist/ 가 되어 아래와 같은 화면이 표시됩니다.

라라벨 라우팅

이번에, 내 환경에서는 laravel은 api만 담당하므로 아래와 같이 했다

app/routes.php

Route::group(array('prefix' => 'api'), function() {
  Route::resource('users', 'UserController');

URL을 public/ 라고 하면 json을 돌려주도록 하고 있다.

히나가타 완성

그리고 angularJs에서 laravel에 액세스하여 구현하십시오.

참고로 한 사이트

generator-angular
↑초기 생성 뿐만이 아니라 contoller등도 커멘드로 작성할 수 있는 것 같기 때문에 보는 편이 좋다(아직 시험하고 있지 않다).

yo angular:controller user

ぃ tp // 코 m / 테츠야 / ms / 488b66 88369307 213 # 1-9
htp // 쇼헤이 k. 하테나 bぉg. 코m/엔트리/2014/02/26/214235

:wq