Angular.jsを公式チュートリアルで理解しようとしてみた

JavaScript

AngularはTypeScriptを採用したフレームワークです。変数の型を静的に定義できるので、JavaScript特有の原因がわかりにくいエラーが減らすことが可能で、大規模開発に向いているらしいです。

今回は、Angular.js初心者が短時間で理解しようとしたものを記事にしたものなので、理解が足りていない部分があると思います。暖かくご指摘していただけると幸いです。

 

プロジェクトを始め方

Angular CLIをグローバルにインストール

$ npm install -g @angular/cli

 

プロジェクトを作成

$ ng new [プロジェクト名]

 

サーバーを起動

$ cd [プロジェクト名]
$ ng serve --open

 

 

各ファイルの生成方法と役割

コンポーネントの追加

$ ng generate component [コンポーネント名]

【役割】

ディレクトリを構成するのは、html,css,ts(js)で一つのコンポーネントとして動作します。$ ng generate componentコマンドで以下全てが生成されます。

コンポーネント名: {
	- html
	- css
	- ts
}

 

ルーティングファイル生成

$ ng generate module [ファイル名] --flat --module=app

【役割】

エクスポートしたAppRoutingModuleをRouterModuleでapp.moduleがインポートしているので、 AppComponent内でRouterOutletが使用できるようになります。コンポーネント内の<router-outlet>は、ルーティングされたビューをどこに表示するかをルーターに教える役割があります。

 

サービスの生成

$ ng generate service [ファイル名]

【役割】

サービスは、取得したデータをアプリケーション全体で使えるようにするための役割です。それによって、コンポーネント側はデータの受け渡し・処理に集中できるため管理しやすいです。

 

 

コメント