ふわりAngular

このサイトはAngularで作られています。

Angular初心者なので玄人向けの情報はありません。

初心者の方、理解レベルが同じくらいの方のお役に立てれば幸いです。

2016/11/22

プロジェクトを作ってみよう


angular-cli を使用すると、新規ファイルを作るときに”コピー&ペースト”をする必要がありません。

コマンドひとつでソースが自動生成されます。


  • ng new してプロジェクトを作る。
  • ng build してビルドする。
  • ng serve してブラウザで確認する。

ng new してプロジェクトを作る。


まずはプロジェクトを作りましょう。

ng new [プロジェクト名] を実行してみます。

$ pwd
/c/work

$ ls -l
total 0

$ ng new SampleApp
installing ng2

~ 中略 ~

Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.

※けっこう時間がかかります。

$ ls
SampleApp/

$ ls SampleApp/
angular-cli.json e2e/ karma.conf.js node_modules/ package.json protractor.conf.js README.md src/ tslint.json

プロジェクトが作られました。

$ cd SampleApp/

作業をするためプロジェクトディレクトリに移動しておきましょう。


ng build してビルドする。


ビルドするには、 ng build コマンドを実行します。

$ ng build

~ 中略 ~

Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
     index.html  2.81 kB       0
    chunk    [ 0] index.html 343 bytes [entry] [rendered]
$ ls
SampleApp/

$ ls SampleApp/
angular-cli.json dist/ e2e/ karma.conf.js node_modules/ package.json protractor.conf.js README.md src/ tslint.json

$ ls dist/
favicon.ico index.html inline.js inline.map main.bundle.js main.map styles.bundle.js styles.map

SampleApp/dist/ というディレクトリができました。

ここにビルド後のモジュールが生成されます。

ディレクトリを変更するには、angular-cli.json の apps.outDir を修正します。


ng serve してブラウザで確認する。


ブラウザで確認するには、 ng serve コマンドを実行します。

前述で、 ng build コマンドを実行してビルドをしましたが、 ng serve コマンドは自動でビルドしてくれますので、確認のたびに毎回ビルドする必要はありません。

$ ng serve
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
     index.html  2.81 kB       0
webpack: bundle is now VALID.

処理が終わったようですので、ブラウザで確認してみましょう。

ng serve のデフォルトポートは4200です。

”app works!” と表示されればOKです。

せっかくなので、この文字列を修正してみましょう。

ng serve を起動させたまま、app.component.ts を修正してみてください。

$ vi src/app/app.component.ts

  title = 'app works!'; // ここを'ふわりAngular!'に変えてみてください。
webpack: bundle is now INVALID.

~ 中略 ~

Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
     index.html  2.81 kB       0
webpack: bundle is now VALID.

すると、ファイルが変更されたことを検知し、自動ビルドが走ります。

ブラウザを見てみると …

なんということでしょう。

ブラウザを更新していないにもかかわらず、修正が反映されました。

とても便利なしくみで開発が捗りますね。