LoginSignup
8
5

More than 5 years have passed since last update.

Angularプロジェクトの作成

Last updated at Posted at 2019-06-02

前回では初めてのAngularでAngularプロジェクトを始める前の準備について話していきました!

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

Angularチュートリアル

では早速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 

こんな感じで可愛いバージョン一覧が出てきてくれたら成功です!
ちなみにバージョンは8になります(半年に一回くらいで上がってる)

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

に飛んで

スクリーンショット 2019-06-02 18.42.02.png

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

エディタについて

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

まぁ日本ではそんなことはないようなので僕は基本的に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

8
5
1

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
8
5