[PHP][Silex][Angular] Silex 2 + Angular コト始め

7578 ワード
Angular2 JavaScript Angular Silex PHP PHP テキストリンク

まずは環境を整えるところまでです。

あらかじめ必要なもの

  • PHP
  • composer.phar
  • node.js 6.9以降
  • npm

手順

1 - Silexアプリケーションの雛形を作成

Silexのスケルトンを使います。

% php composer.phar create-project fabpot/silex-skeleton myproj "~2.0"

myprojフォルダに以下のようなファイルができあがります。

.gitignore
LICENSE
README.rst
bin/
  console
composer.json
composer.lock
config/
  dev.php
  prod.php
phpunit.xml.dist
src/
  console.php
  controllers.php
  app.php
templates/
  errors/
    404.html.twig
    4xx.html.twig
    500.html.twig
    5xx.html.twig
    default.html.twig
  index.html.twig
  layout.html.twig
tests/
  controllersTest.php
var/
  cache/
  logs/
vendor/
  （略）
web/
  index.php
  index_dev.php
  css/
    main.css

2 Angular CLIをインストール

% npm install -g @angular/cli

プロジェクトローカルのnode_modulesに入れて使いたかったのですが、使えないよと怒られるので-gつけてインストールします。

3 Angularのプロジェクトを生成

ng newコマンドを使います。

% cd myproj
% ng new --skip-git --source-dir web --directory . myproj

--skip-gitオプションで、gitコミットさせないようにします。
--source-dirオプションで、Silexが作成したwebディレクトリを指定します。

こんな感じにファイルが作られます。

installing ng  
  create .editorconfig                                                                                                                                                             
  create README.md                                                                                                                                                                 
  create web/app/app.component.css                                                                                                                                                 
  create web/app/app.component.html                                                                                                                                                
  create web/app/app.component.spec.ts                                                                                                                                             
  create web/app/app.component.ts                                                                                                                                                  
  create web/app/app.module.ts                                                                                                                                                     
  create web/assets/.gitkeep                                                                                                                                                       
  create web/environments/environment.prod.ts                                                                                                                                      
  create web/environments/environment.ts                                                                                                                                           
  create web/favicon.ico                                                                                                                                                           
  create web/index.html                                                                                                                                                            
  create web/main.ts                                                                                                                                                               
  create web/polyfills.ts                                                                                                                                                          
  create web/styles.css                                                                                                                                                            
  create web/test.ts                                                                                                                                                               
  create web/tsconfig.app.json                                                                                                                                                     
  create web/tsconfig.spec.json
  create web/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Installing packages for tooling via npm.
Project 'myproj' successfully created.

4 .gitignoreファイルに追記

gitをスキップしたので、手動で追記しておきます。

.gitignore
# See http://help.github.com/ignore-files/ for more about ignoring files.

# compiled output
/dist
/tmp
/out-tsc

# dependencies
/node_modules

# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json

# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
testem.log
/typings

# e2e
/e2e/*.js
/e2e/*.map

# System Files
.DS_Store
Thumbs.db

5 PHPビルトインWebサーバを起動

PHP動かします。

% php -S 0.0.0.0:7000 -t web web/index_dev.php

ブラウザを立ち上げて http://localhost:7000/ へアクセスします。