前回では初めてのAngularでAngularプロジェクトを始める前の準備について話していきました！
このプロジェクトではAngularの基礎的な技術に初心者でもわかるよう解説を入れていきながら簡単なWebページを作っていきたいと思います
では早速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 ]
// 好きなスタイルシートのテンプレートエンジンを決めたら今後コンポーネントを
//自動生成する時にそのテンプレートエンジンで作成してくれる(これもあとで変更可)
~~~色々頑張ってくれてる〜〜〜〜
できたかどうか見てみましょう！
$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プロジェクトの構成
今回の記事に関連したリンク
https://code.visualstudio.com/
https://qiita.com/KaoruIto76/items/002d9658b890fb6392f9
https://angular.jp/tutorial