サクッと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/ にアクセスしてくれって書いてあるので、
アクセスしてみる。
↓ アクセスしてみると、以下のような画面が出てきた。
今回の目標は、プロジェクトを作ってみるところまでなので、
とりあえずここまででいったん終了。
実際に使ってみた場合は、
また新しく投稿します。
以上。