Djangoroidの奮闘記

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

Angular4入門_No.1

参考サイト

https://www.codingforentrepreneurs.com/projects/try-angular-v4/

Getting Started with Angular v4

  • $ng new srvupコマンドを実行すると、新しいangularのproject、srvupが作成される。angularに必要なnode.jsのpackageをinstallするので、ちょっと時間がかかる。(django-admin startprojectと似たようなもの)

App Module & Component

  • angular project内(ここでは、srvupディレクトリ)にcdして、ng serveを実行してみる。app works!が表示されればOK。

  • app.component.tsを修正しながら、angularの機能を試してみる。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  // template: `<p>{{ title }} is cool! {{ description }}</p>`, //templateには、直接htmlの記述もできる
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hello srvup!!2 ';
  description = '新しいアプリケーションです';
}

// django 風に書くと以下のようなこと
// def some_view(request):
//   return render(request, "template.html",{})
  • selector名を修正する。
import { Component } from '@angular/core';

@Component({
  selector: 'srvup-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hello srvup!!2 ';
  description = '新しいアプリケーションです';
}
  • index.htmlを修正する。
<body>
  <srvup-root>Loading...</srvup-root>
</body>

4 - Ng Generate new Component

  • componentもng cli で作成できる。$ ng g component videoListを実行すると、videoListという名前のcomponentが作成される。

  • 続いて、$ ng g component video-detailを実行する。

  • video-list.component.tsは以下のようになっている。

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

@Component({
  selector: 'video-list', //app-の部分は削除する
  templateUrl: './video-list.component.html',
  styleUrls: ['./video-list.component.css']
})
export class VideoListComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
  • app.module.ts の、bootstrapをVideoListComponentに変更してみる。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { VideoListComponent } from './video-list/video-list.component';
import { VideoDetailComponent } from './video-detail/video-detail.component';

@NgModule({
  declarations: [
    AppComponent,
    VideoListComponent,
    VideoDetailComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [VideoListComponent] //ここを修正する。
})
export class AppModule { }
  • ただこのままでは、The selector "video-list" did not match any elementsとerrorがでて表示されない。そのため、index.htmlのselectorタグを修正する。
<body>
  <video-list>Loading...</video-list>
</body>
  • 以上で、componentとselectorタグの使い方のレクは終了。それぞれ、selector名をもともとのapp-root, bootstrap[AppComponent]に戻しておく。

5 - Selectors & Components

  • selectorを使ってみる。app.component.htmlに追記してみる。
<h1>{{ title }} is cool!</h1> <p>{{ description }}</p>
<video-list></video-list>
<video-detail></video-detail>
  • video-list.component.tsにtitle変数を追記してみる。
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'video-list',
  templateUrl: './video-list.component.html',
  styleUrls: ['./video-list.component.css']
})
export class VideoListComponent implements OnInit {
  title = "tenshinoenogu!";
  constructor() { }

  ngOnInit() {
  }
}
  • htmlもcontextを使うように修正してみる。
<p>
  {{ title }}
</p>
  • うまくいった！

まとめ

  • componentは、djangoのstartappに似てる。app.module.tsは、settingsの機能の一部に近いな。
  • selectorタグは便利そう。