読者です 読者をやめる 読者になる 読者になる

Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

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が自動で作成される。(これは、djangopython manage.py startapp みたいなもんやな。)

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

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

まとめ