Angular4入門 ~setup編~

参考サイト

https://www.codingforentrepreneurs.com/projects/setup-angular/how-setup-angular/?play=true https://www.codingforentrepreneurs.com/blog/angular-setup-guide/

How to Setup Angular

• Install Angluar CLI via npm:

npm install -g @angular/cli

• Navigate to project directory:

$ mkdir appDir && cd appDir
$ ng new cfe-app

• ng new で、angularアプリ作成なmoduleなどが一通りinstallされる。以下が表示されたら成功。(django-admin projectのようなものかな。)

Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'cfe-app' successfully created.

• local serverを起動する。

$ cd ~/path/cfe-app/
$ ng serve

• app works!と表示されれば成功！

• ng serveが実行されている状態で、app.component.tsを修正する。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hi there again!';
}

• ng buildを実行すると、distディレクトリが自動作成される。この中身が実際にレンダリングされて、出力されるコードになるのかな。

• ng g component videoList を実行すると、videoListのcomponentが自動で作成される。(これは、djangoのpython manage.py startapp みたいなもんやな。)

• さらにすごいのは、app.module.tsに自動で、videoList moduleが追記されているところ。

• app.component.htmlに<app-video-list></app-video-list>を追記する。video-list-worksの表示されたら、成功！！(^^)

まとめ

• コマンドラインツールは超便利！これはどんどん使わないと。