Goalist Developers Blog

はじめてのAngular Windowsで環境構築～とりあえず触ってみよう編

Angular TypeScript

Windowsで環境構築～とりあえず触ってみよう編

このブログを書いた人

  • プログラミングを始めて1年弱
  • TypeScriptはこれから勉強します
  • JSフレームワークだとVue.jsなら触ったことある
    くらいの初心者

今のところ環境

  • node: 6.3.0
  • os: win32 x64

Angular CLIを入れてみる

開発環境構築にはAngular CLIというツールが便利らしいのでインストール

npm install -g @angular/cli

バージョンは1.0.0-beta.28.3 でした

ヌッ…黄色い字の警告文…

As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release,
which will only support Node 6.9 and greater. This package will be officially deprecated
shortly after.

node公式を見たら最新安定板はv6.10.0だったのでバージョンを変える

インストール済みのやつを確認

nodist
   (x64)
   4.4.7
 > 6.3.0  (global: 6.3.0)

使いたいバージョンをインストールする

nodist + v6.10.0

バージョンを切り替える

nodist 6.10.0

これでよし

nodist
   (x64)
   4.4.7
   6.3.0
 > 6.10.0  (global: 6.10.0)

プロジェクトを生成してみよう

適当なディレクトリ下で

ng new my-new-app

ちょっと待ちましたが Project 'my-new-app' successfully created. ですって

さっそくサーバー起動

cd my-new-app
ng serve

webpack: Compiled successfully.が出たらhttp://localhost:4200/をブラウザで見てみる

f:id:y-iio:20170316193815p:plain
動いてる～オッホホ！

エディタで中身を見てみよう

Angular CLIが自動でこんなかんじのディレクトリ構成を作ってくれたので f:id:y-iio:20170316193849p:plain

src以下を見ていきます。

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>MyNewApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

<app-root></app-root>のところにたぶんこの部分が入るのか？
f:id:y-iio:20170316193923p:plain

中身をチェックだ

app.component.html

<h1>
  {{title}}
</h1>

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!';
}

app.component.tsのここの部分でコンポーネント定義されてて

@Component({
  selector: 'app-root', // このセレクタで呼び出す
  templateUrl: './app.component.html', // コンポーネントの中身のhtml参照先のパス
  styleUrls: ['./app.component.css'] // コンポーネントの中身のcss参照先のパス
})

ここがデータバインド部分かしら

export class AppComponent {
  title = 'app works!';
}

titleを変えてみよう

title = 'hello world!';

保存したらng serveのビルド処理が走る！
LiveReloadでブラウザが自動更新される！
f:id:y-iio:20170316194239p:plain
変わってる～！

新しいコンポーネントを作ってみよう

greetingという名前のコンポーネントを作ってみます。

ng generate component greeting
 installing component
  create src\app\greeting\greeting.component.css
  create src\app\greeting\greeting.component.html
  create src\app\greeting\greeting.component.spec.ts
  create src\app\greeting\greeting.component.ts
  update src\app\app.module.ts

（なんかいろいろ作ってくれた…）

app/greetingに中身の一式を
f:id:y-iio:20170316194534p:plain

app.module.tsはこのあたりを書き加えてくれたようです。
f:id:y-iio:20170316194546p:plain

これでimportと宣言されるんで呼び出せるようになるということかしら。

greeting.component.tsを見たところ、
greetingコンポーネントのセレクタ名はapp-greetingになるらしい。
f:id:y-iio:20170316194642p:plain

というわけでapp.component.htmlに以下のように書き加えます。

<h1>
  {{title}}
</h1>
<app-greeting></app-greeting>

greeting.component.htmlを好きに変更して…

<p>
  welcome to my app
</p>

ドン
f:id:y-iio:20170316194707p:plain
コンポーネント足せた～！

まとめ

というわけではじめてのAngular2、とりあえず触ってみることができました。
Angular CLIのおかげで何やら難しげなimportなんかの整理やビルドも楽々です。
最終的には公式チュートリアルを参考にしつつ、TODOアプリ的なものを作ってみたいと思っています。
次回はやさしいテンプレート構文編です。
乞うご期待！