Angular Tutorial 2章

モジュール(P860)

Angularモジュール

以下のようにNgModuleで装飾されたもの。今回の例で言うと AppModule がそれにあたる。

app.module.ts

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Javascriptモジュール

import文 import {name, ...} from module のfromで取得している各ファイルのこと。今回の例でいうと、 app.component.ts などがそれにあたる。

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Javascriptモジュールファイルの中身は以下。外部で使う場合は 以下のようにexport をつける

app.component.ts

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular'; }

コンポーネント(P875)

メインコンポーネントをカスタマイズしてみた。

app.component.ts

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

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}{{user.name}}</h1>`,
})
export class AppComponent  {
  name = 'Angular';
  user: User = {
    id: "1",
    name: "yohei"
  }
}

class User {
  id: string;
  name: string;
}

パッケージインストール(P974)

パッケージjsonからインストール

npm install
npm install --production

パッケージJSONにないものをインストール。パッケージJSONにも追加する

npm install {package名} --save
npm install {package名} --save-dev