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                                             ]  
// 好きなスタイルシートのテンプレートエンジンを決めたら今後コンポーネントを
//自動生成する時にそのテンプレートエンジンで作成してくれる(これもあとで変更可)

~~~色々頑張ってくれてる〜〜〜〜

できたかどうか見てみましょう！

$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になってるので

に飛んで

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

エディタについて

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

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

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

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

次はAngularプロジェクトのざっくりとした構成について書いていきたいと思います！
Angularプロジェクトの構成

Angularプロジェクトの作成

Angular CLIのインストール

Angular プロジェクトの作成

エディタについて