try! Angular (1)プロジェクト作成


2017年3月にAngularもメジャーバージョンアップが行われ、バージョンが4となりました。
多少今更感はありますが、試しにAngularを使って簡単なWebアプリケーションを作成してみたいと思います。
基本的には公式のドキュメントを参考にしていきます。

まずはプロジェクトの雛形を作成しましょう。

環境構築

開発を行う際には、テストやビルド、サーバーデプロイなどが行える必要があります。ゼロベースでそれらの設定を行っていくのは大変なので、公式のCLIツールAngular CLIを使います。まずはこのツールのインストールを行います。

Node.jsがインストールされていない場合はあらかじめインストールしておきます。
インストールの方法は以下を参考にしてください。
nodist 〜 Node.jsのバージョンを管理する for Windows 〜nodebrew 〜 Node.jsのバージョンを管理する for Mac 〜

また、Nodeのバージョンが6.9.x以上を、npmのバージョンが3.x以上であることを確認しておきましょう。

準備ができたら次のコマンドを実行しグローバルにAngular CLIをインストールします。

npm install -g @angular/cli

なお本稿執筆時のバージョンは1.0.3です。

プロジェクト生成

Angular CLIを使ってプロジェクトを生成します。
次のコマンドを実行してください。my-appがプロジェクトの名前です。

ng new my-app

処理に少々時間がかかるので気長に待ちましょう。

実行

生成されたディレクトリに移動します。

cd my-app

そのディレクトリで次のコマンドを実行してください。

ng serve --open

4200ポートでサーバーを起動します。–openは起動後に自動的にブラウザを開くオプションです。

app works!とだけ表示されたページが開くと思います。これがアプリケーションの雛形になります。

ディレクトリ構成

my-app/srcフォルダがアプリケーションのソースコードの配置場所になります。

ディレクトリ構成は次のようになっています。
src
│─favicon.ico
│─index.html
│─main.ts
│─polyfills.ts
│─styles.css
│─test.ts
│─tsconfig.app.json
│─tsconfig.spec.json
│─typings.d.ts

├─app
│ │─app.component.css
│ │─app.component.html
│ │─app.component.spec.ts
│ │─app.component.ts
│ └─app.module.ts

├─assets
│ └─.gitkeep

└─environments
│─environment.prod.ts
└─environment.ts

この中でアプリを作るうえで重要かつ基本的なファイルだけまずは確認しておきます。

app/app.component.ts—アプリケーションのルートコンポーネントを定義します。

app/app.module.ts—AngularアプリケーションのComponentServiceを宣言します。

index.html—WebサイトのベースとなるHTMLです。基本的に変更を加えません。

main.ts—アプリケーションのエントリーポイント

Hello, World

src/app/app.component.tsを次のように変更してみます。

...
export class AppComponent {
  title = 'Hello, World';
}

ブラウザでアプリケーションの表示が変更されていることを確認しましょう。

アプリの雛形ができたので次回からこのアプリケーションに変更を加えていきたいと思います。

  • このエントリーをはてなブックマークに追加

PAGE TOP