Angularプロジェクトの作成

前回では[初めてのAngular](https://qiita.com/KaoruIto76/items/e072bdb095753c9dd880)でAngularプロジェクトを始める前の準備について話していきました！

**このプロジェクトではAngularの基礎的な技術に初心者でもわかるよう解説を入れていきながら簡単なWebページを作っていきたいと思います**

[Angularチュートリアル](https://angular.jp/tutorial)

では早速Angularのプロジェクトを作っていきたいとおもいます！
# Angular CLIのインストール
Angularのプロジェクトを作成するのに一つのコマンドでいろんなことをしてくれるコマンドラインインターフェースがあるのでまずはそれをインストールしましょう！

```
$npm install -g @angular/cli
```
ちなみに-gはグローバルを意味します
インストールできたか確認しましょう！

```
$ng version
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
   


Angular CLI: 8.0.1
Node: 10.16.0
OS: darwin x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.800.1
@angular-devkit/core         8.0.1
@angular-devkit/schematics   8.0.1
@schematics/angular          8.0.1
@schematics/update           0.800.1
rxjs                         6.4.0 
```
こんな感じで可愛いバージョン一覧が出てきてくれたら成功です！
ちなみにバージョンは８になります（半年に一回くらいで上がってる）
# Angular プロジェクトの作成
```
$ng new example-angular    ← 新しいアンギュラープロジェクトを作成(new の後には作りたいAppの名前)
//ここからオプションを聞かれる
//⬇︎はAngular上でrouting機能を実装するか聞かれる(仮にyにしてもいつでも無くしたりできるのでとりまy)
? Would you like to add Angular routing? (y/N)
// 次にスタイルシートのテンプレートエンジンを聞かれるが、僕は基本的にscssでいいと思います！
❯ CSS 
  SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ] 
  Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html       ] 
  Less   [ http://lesscss.org                                                 ] 
  Stylus [ http://stylus-lang.com                                             ]  
// 好きなスタイルシートのテンプレートエンジンを決めたら今後コンポーネントを
//自動生成する時にそのテンプレートエンジンで作成してくれる(これもあとで変更可)

~~~色々頑張ってくれてる〜〜〜〜
```
できたかどうか見てみましょう！

```console
$ls
example-angular

$cd example-angular
$ls -l
angular.json
browserslist
e2e/
karma.conf.js
node_modules/
package-lock.json
package.json
src/
tsconfig.app.json
tsconfig.json
tsconfig.spec.json
tslint.json
```
こんな構成になっているはずです！

**プロジェクトを起動してみましょう！！**

```
$ng serve　　　　　//プロジェクトのルートディレクトリ(一番上の階層)で
```
これでサーバーが起動します。デフォルトではポート番号4200になってるので

http://localhost:4200/

に飛んで

<img width="1440" alt="スクリーンショット 2019-06-02 18.42.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238826/58d1209a-d696-b2af-cdf4-70bd2f84574b.png">

こんな風に表示されると成功です！

## エディタについて
エディタは人によってはこだわりが強く、USのドラマ「シリコンバレー」では`vim`か`emacs`かでカップルが破局するほどです。
怖い。

まぁ日本ではそんなことはないようなので僕は基本的に`Visual Studio Code`でいいと思います
各言語、テンプレートエンジン、カラースキーム、Git操作。様々なプラグインをボタンぽちってやればいれられてその量もとても豊富にあるので初心者の方には向いています。

あ、vscode上でteminal開けるのでLinuxコマンド操作はGUIではしたくないという方でも画面の移動とかめんどくさくありません
[Visual Studio Codeのインストール](https://code.visualstudio.com/)

ちなみに僕は今vimを使っているので今プロジェクトではvimを使っていきたいと思います。
vimでの補完機能とかは
[まじで最＆高のvim環境を作りたい2
](https://qiita.com/KaoruIto76/items/002d9658b890fb6392f9)にプラグインの入れ方とか書いてあるのでそちらへどうぞ！

次はAngularプロジェクトのざっくりとした構成について書いていきたいと思います！
[Angularプロジェクトの構成](https://qiita.com/KaoruIto76/items/7b4bd6b0fd4bb952df2f)


今回の記事に関連したリンク
https://code.visualstudio.com/
https://qiita.com/KaoruIto76/items/002d9658b890fb6392f9
https://angular.jp/tutorial