Angular, Blockchain, Science とか

Angular, Blockchain, Science全般 の情報を主に書いていきます。

【1】Angular v4 環境構築からhello world まで 

第一回目です。Angular v4 について何回かに分けて書いていきたいと思います。Angularの1系と2系以降の違いとかは自分で調べてください。まあこれからは始める人は最新のversion4をやれば問題ないでしょう。

まずAngularをやるに当たってCLIを使うのが最適だと思いますので。まずはAngular/cliをインストールしましょう。Nodeがインストールされていることが前提です。

公式ドキュメント通りに進めるのが無難だと思うので、そうします。

npm install -g @angular/cli

これでAngular/cliがインストールできたら ng コマンドが使えるようになります。

新しいプロジェクトを作るには ng new プロジェクト名 を使います。ここでは本家通り my-app にします。

ng new my-app

これで新しいディレクトリができているはずです。

次に作ったディレクトリの所へ移動してサーバを立ち上げます。

cd my-app
ng serve 

ng serve コマンドでサーバを立ち上げることができます。

サーバを立ち上げた後に http://localhost:4200/ を開きます。

これでブラウザに app works! と出てくるはずです。

続いてテキストエディタでなんでもいいので my-app(さっき作ったプロジェクト) を開きましょう。

そして、src/app/app.component.ts にあるファイルを開きます。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';  // ここを変える
}

このようになっているはずです。

そして、title = 'app works!' の所を title = 'hello world!'にしましょう。

これでもう一度、サーバを立てると。 hello world! と出てくるはずです。

今回は最初なのでここまでとします。

次回からAngularの機能をしっかり見ていくことにします。

おしまい