MEANスタック入門（2） Angularを利用したフロントエンド開発
今回はAngular CLIを利用したAngularのHello World的な内容になります。
Angular CLIのインストール
Angular2アプリの開発には、必須という訳ではありませんがAngular CLIを利用するのがおすすめです。
ディレクトリ構成を自動的に整えてくれますし、各種Componentのひな型の生成、簡易サーバによる高速なプレビューなど、非常に効率的に開発出来ます。
今後も基本的にAngular CLIで生成されたディレクトリを足場にして以降の開発を進めていきます。
まずはangular-cliをインストールします。
$ npm install -g @angular/cli $ ng -v @angular/cli: 1.0.1 node: 6.9.4 os: win32 x64
Angular2アプリの作成と実行
次にAngular2アプリを作成します。
CSSではなくSCSSなどの言語を利用したい場合は--styleオプションで切り替え、ルーティングモジュール付きで生成する場合は--routingオプションで設定します。
ルーティングモジュールはapp.moduleに直接書くケースもあるようですが、別ファイルに分けたほうが後々開発しやすいと思うので、trueで実行します。
$ ng new project-name --style=scss --routing=true
作成したアプリをng serverコマンドで実行します。
$ cd project-name
$ ng server
実行するとプロジェクトがビルドされ、簡易サーバが立ち上がります。
動作確認
http://localhost:4200にアクセスすると、動作が確認出来ます。
同時にソースを監視するようになっているので、コードを書き換えるたびに自動的にリビルドされて非常に便利です。
Angular2アプリのビルド
実行中のアプリを本番環境用にビルドします。
デフォルトだと、ビルドされたファイルはdistディレクトリに配置されます。
後ほどdistディレクトリをサーバ側と共有する予定なので、.angular-cli.jsonのappsにあるoutDirを書き換えて出力先を変更します。
"outDir": "dist/client"
ng buildでビルドします。
--prodオプションを付けると公開用にminifyされたファイルが生成されます。
$ ng build --prod
これでAngular2側の準備は一旦完了です。
