12
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@townsoft(個人事業主 TownSoft)

Angular 2 のクイックスタートをやってみる。

12
Posted at

はじめに

僕はJSフレームワークに乗り遅れている感じがするので、今回はAngularJSを触ってみることにした。

今まではRails+CoffeScript+jQueryで大体の事は対応できていたが、今後を考えるとSPA(Single Page Application)が弾頭に上がってくる事はほぼ間違い無いと思う。
(RailsもTurboinksを使っているので、ある意味SPAとも言える。Rails5のTurboinksはかなりSPAを意識しているっぽい。)

そう思って以前BackboneJSを触った事があるが、コード量の多さに辟易した経験がある。
（BackboneJSは固すぎる・・・）

今回のAngularJSがどんなものかわからないが、何はともあれ使ってみる事にする。

この記事では、Angular2クイックスタートをやってみる。

※僕は英語が苦手なので、フィーリングでサイトを読んでいきます。謝ってる箇所などがありましたらご指摘ください。

ファイルの配置

クイックスタートに書かれている通り

mkdir angular2-quickstart
cd    angular2-quickstart

を行う。
そしてJSファイルとHTMLファイルを作成してみる。

app.ts
import {bootstrap, Component} from 'angular2/angular2';
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
class AppComponent { }
bootstrap(AppComponent);

JSファイルだと思ったが、拡張子を見るとtsになっている。
どうやらTypeScriptで書かれているようだ。

TypeScriptは初めて触った。
CoffeeScriptと同じポジションらしいが、次のコードを見て驚愕する。

index.html
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true }
      });
      System.import('./app.ts');
    </script>
  </head>
  <body>
    <my-app>loading...</my-app>
  </body>
</html>

HTML内部でTypeScriptのコードであるSystem.import('./app.ts');を直接インポートしているのだ。
CoffeeScriptではコンパイルしたJSファイルをメインに使用するのだが、ここでは直接TypeScriptのコードを呼び出している。
これが驚愕した点だ。

もちろんだが、このファイルを直接開いてもloading...と表示されるだけだ。

live-server

この環境を動かすためには静的ファイルサーバーが必要になるようです。
なので、こちらを入れます。

$ npm install -g live-server

入れてたと思ったけどnode.jsを入れてなかったのでそこからスタートです。

$ brew install node
$ npm install -g live-server

インストールが終わったらサーバーを起動します。

$ live-server

ブラウザでlocalhost:8080にアクセスしたところMy First Angular 2 Appが表示されました。

中身を変えてみる

app.tsの中身を変えてみると、自動的にデータを読み込んでくれました。
てっきり一部分だけの切り替えかと思ったのですが、ページ全てを再読み込みされました。

仕組みはわからないのですが、101 Switching Protocolsというリクエストを投げているのでこれをlive-serverが監視しているのかもしれません。

また、chromeとfirefoxの両方で開いている場合は一方のブラウザはloading...と表示されてしまいました。

ここはクイックスタートを進めたいので、無視して進めます。

Ctrl+cでlive-serverを止めます。

構成を変えます

どうやら、この構成はあまりよろしくないとの事なので構成を変えます。

$ mkdir -p src/app

以下の構成に変更します。

angular2-quickstart
└── src
    ├── app
    │   └── app.ts
    └── index.html

コマンドは以下のとおりです。

$ mv app.ts src/app/
$ mv index.html src/

で、パッケージをインストールします。

$ npm init -y

これはGemfileやpom.xmlなどと同じようなパッケージ管理をするためのpackage.jsonを入れてくれるようです。
いつだかに使ったBowerはフロントエンド用の管理ソフトでしたが、今回のはどうなのでしょうか？
気にせず進みますw

npm i angular2@2.0.0-alpha.44 systemjs@0.19.2 --save --save-exact

package.jsonに以下が追加され、node_modulesが作成されました。

  "dependencies": {
    "angular2": "2.0.0-alpha.44",
    "systemjs": "0.19.2"
  }

続けてlive-serverを入れていきます。

$ npm i typescript live-server --save-dev

さらに以下の内容が追加されました。

  "devDependencies": {
    "live-server": "^0.9.0",
    "typescript": "^1.7.3"
  }

クイックスタートにscript部分を以下のように書き換えろと書かれているので、package.jsonの中身を書き換えます。

{
  "scripts": {
    "tsc": "tsc -p src -w",
    "start": "live-server --open=src"
  }
}

ファイルのパスを書き換えます

構成が変わったのでファイルを書き換えます。

src/index.html
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
    <script>
      System.config({
        packages: {'app': {defaultExtension: 'js'}}
      });
      System.import('app/app');
    </script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

これで全てローカルファイルをみるようになりました。
また、jsファイルを読み込むようになりました。

TypeScriptを読み込めなくなったので、tsconfig.jsonをsrc以下に配置します。

src/tsconfig.json
{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

コンパイル情報でしょうか？

とりあえず以下の構成になっていればOKです。

angular2-quickstart
├── node_modules
├── src
│    ├── app
|    │    └── app.ts
│    ├── index.html
│    └── tsconfig.json
└── package.json

JSのコンパイル

JSのコンパイルを行います。
以下のコマンドはルートで実行します。

$ npm run tsc

実行するとコンパイル監視状態になります。
なのでsrc/app/の中をみるとapp.jsができており、app.tsを書き換えるとapp.jsが書き換わります。

tsc -p src -wとpackage.jsonで指定しているため常駐されるようです。（-wをとれば常駐されません。）

ctrl+cで終了します。

実行

では、実際に実行します。

$ npm start

これでローカル内で動きました。
ただ、コンパイルは動いてないのでapp.tsを変更しても反映されません。

また、ルートへアクセスするとフォルダ情報が見えてしまいます。

最後に

とりあえず、いろいろ問題がありつつもクイックスタートを終えました。
（最後のおまけはやってませんが。）

これだけだと実運用には耐えれないですが、なんとなくの構想は理解できました。
引き続きチュートリアルを進める事で理解を深めていこうと思います。

RESTでデータを取り出して動的にページの情報を切り替えれないとAngularの恩恵はないですからね・・・。（まだ、理解してないだけかもしれませんが・・・）

12
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?