サクッとAngular.jsでプロジェクトを作るところまでやってみる

環境

C:\>node -v
v12.13.1

C:\>yarn -v
1.22.5

以前、Vue.jsのプロジェクト作る際に、
インストール方法に少し触れているので、
インストールしていない場合は、そちらを参照。

angular-cliのインストール

angular.jsのプロジェクトを作るために、
angular-cliのインストールを始める。

コマンドプロンプトを開いて、任意のパスにて、以下コマンドを実行する。

$ yarn global add @angular/cli

今回は、インストールしたら以下のversionだった。

C:\>ng --version

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


Angular CLI: 11.1.2
Node: 12.13.1
OS: win32 x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1101.2 (cli-only)
@angular-devkit/core         11.1.2 (cli-only)
@angular-devkit/schematics   11.1.2 (cli-only)
@schematics/angular          11.1.2 (cli-only)
@schematics/update           0.1101.2 (cli-only)

プロジェクト作成

では実際にプロジェクトを作ってみる。

$ ng new example-project

newの後にプロジェクト名を入れればいいらしい。

今回は example-project という名前で作ってみる。

コマンドを実行すると、プロジェクトの設定をすることになるので、
各々好きな設定をする。

今回は、特にこれといった条件は無いので、
以下のように設定していった。

? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
  This setting helps improve maintainability and catch bugs ahead of time.
  For more information, see https://angular.io/strict Yes
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax
 ]

以下のように、作られたプロジェクトのパスにて、
ng serveを実行。
したら、 ↓ のように進んでいった。

Compiling @angular/common : es2015 as esm2015
Initial Chunk Files   | Names         |      Sizesm2015
vendor.js             | vendor        |   2.68 MB
polyfills.js          | polyfills     | 472.80 kB015 as esm2015
styles.css, styles.js | styles        | 346.00 kB
main.js               | main          |  58.43 kB
runtime.js            | runtime       |   6.15 kB

                      | Initial Total |   3.54 MB

Build at: 2021-02-04T06:58:18.200Z - Hash: 8e7b978867d776fa90b0 - Time: 85761ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


√ Compiled successfully.
√ Browser application bundle generation complete.

Initial Chunk Files   | Names  |      Size
styles.css, styles.js | styles | 346.00 kB

4 unchanged chunks

Build at: 2021-02-04T06:58:29.735Z - Hash: 6280dc2bb857617c036a - Time: 10615ms

√ Compiled successfully.

http://localhost:4200/ にアクセスしてくれって書いてあるので、
アクセスしてみる。

↓ アクセスしてみると、以下のような画面が出てきた。

今回の目標は、プロジェクトを作ってみるところまでなので、
とりあえずここまででいったん終了。

実際に使ってみた場合は、
また新しく投稿します。

以上。