Help us understand the problem. What is going on with this article?

WebStromとAngular CLIでAngular2アプリケーションを作ってみよう

More than 3 years have passed since last update.

こんにちわ、メトロノームかわかみ(@saruyama_monki)です。
Angularアドベントカレンダーの7日目は、WebStromとAngular CLIを使ってAngular2アプリケーション作ることを解説します。

WebStrom 2016.3について

WebStormについての紹介は割愛させて頂きますが有料のIDEになります。
11月14日にバージョン2016.3のアップデードが入りまして、Angular CLIが使えるようになりました。

228f0489496e029a9020649e5e99d791.png

WebStormは、他の製品(PhpStorm、RubyMineなど)にも梱包されておりますので同じように使えます。
有料は。。。と思われる方は、まずは30日のFree Trial版を使ってみて下さい。プログラミングがもっともっと好きになると思います。

Angular2プロジェクトの作成

WebStromを立ち上げますと、プロジェクトの作成画面が立ち上がります。

dc29ff9bfd3c5a5b370f5f5a9da26624.png

Create New Projectをクリックすると、どのボイラーテンプレートで作成するかを選択できます。

e4ee0386f86aa98e76b6999bcc811ca9.png

数々のテンプレートの中から、Angular CLIを選択し、プロジェクト名を入力してCreateボタンを押すと、プロジェクトが作成されます。

プロジェクトの初期設定

プロジェクトが作成されますと、自動的にAngular2環境が作られていきます。

759b5ce0dd18fd5487fbc32643149654.png

これは、以下のAngular CLIコマンドをWebStormが実行してくれております。全てが整うのに約3分ほどかかります。

$ ng init --name=AdvetCalendar

9ce2058d254c0226ed8cc8b175efe303.png

実行が終わりますと上記のファイル構成になります。

起動してみましょう

では、このままアプリケーションを起動してみましょう

2fa81d17cdb695f22154e4d4f3a7a4e9.png

左隅のメニューから「npm」をクリックすると、左側にnpm scriptの一覧が載ったウィンドウが現れます。その中から、「start」をダブルクリックします。
ダブルクリックすると、下部からコンソールが現れてscriptが実行されている様子が表示されます。startは、以下のコマンドを実行しています。

$ ng serve

実行が終わりましたら、コンソールを一番上にスクロールし、そこに表示されているURLをブラウザで開きます。

42a49c346b07ef0b10637c03a0199241.png

Angular2アプリケーションが起動して、AppComponentが表示されました。
このServerは、Live Development Serverとなっておりますので、Componentを追加したり、編集したりしてもブラウザをリロードしなくても反映されるようになっております。

Componentを追加してみましょう

次に何か新しいコンポーネントを追加してみましょう。

スクリーンショット 2016-12-06 20.50.57.png

ファイル一覧から、appディレクトリを右クリック。NewメニューからAngukar CLI...を選択します。

ed7a248559f42621842b1ae1054263bb.png

選択すると、Angular2の部品の一覧が載ったウィンドウが表示されますので、componentをダブルクリックします。

ea68b8802cdcf5d8fc57bd049b881d89.png

コンポーネント名を決めるダイアログが立ち上がりますので、コンポーネント名を入力してOKボタンを押します。

d38701ce6282ca7df5c70b8cc9125f23.png

OKボタンを押すと、Angular CLIが立ち上がり以下のコマンドが実行され、Componentが作成されます。

$ ng generate component advent_calender.component

f7a18b62de2c7a1074e9077f95f4f90f.png

また、Angular CLIでComponentを作成した場合、NgModuleに自動的にdeclarationされます。

Angular2のチュートリアルを試してみる

ここまでで、WebStromでAngular CLIを使用することが出来ましたので、次はAngular2のチュートリアルをやってみましょう。公式サイトのチュートリアルも良いのですが、英語が苦手な方は、ng-japanのハンズオン資料をチャレンジしてみましょう!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした