インストールができたら、 udemy の ビデオに戻って学習
$ mkdir code
$ cd code
$ ng new ng4-playground
初めてだからなのか、ビデオと違ってすごく時間がかかる。
( Installing packages for tooling via npm 。。。）
が、待っていたら無事終了
$ ng new ng4-playground
create ng4-playground/README.md (1029 bytes)
create ng4-playground/.angular-cli.json (1291 bytes)
create ng4-playground/.editorconfig (245 bytes)
create ng4-playground/.gitignore (516 bytes)
create ng4-playground/src/assets/.gitkeep (0 bytes)
create ng4-playground/src/environments/environment.prod.ts (51 bytes)
create ng4-playground/src/environments/environment.ts (387 bytes)
create ng4-playground/src/favicon.ico (5430 bytes)
create ng4-playground/src/index.html (300 bytes)
create ng4-playground/src/main.ts (370 bytes)
create ng4-playground/src/polyfills.ts (2667 bytes)
create ng4-playground/src/styles.css (80 bytes)
create ng4-playground/src/test.ts (1085 bytes)
create ng4-playground/src/tsconfig.app.json (211 bytes)
create ng4-playground/src/tsconfig.spec.json (304 bytes)
create ng4-playground/src/typings.d.ts (104 bytes)
create ng4-playground/e2e/app.e2e-spec.ts (296 bytes)
create ng4-playground/e2e/app.po.ts (208 bytes)
create ng4-playground/e2e/tsconfig.e2e.json (235 bytes)
create ng4-playground/karma.conf.js (923 bytes)
create ng4-playground/package.json (1319 bytes)
create ng4-playground/protractor.conf.js (722 bytes)
create ng4-playground/tsconfig.json (363 bytes)
create ng4-playground/tslint.json (2985 bytes)
create ng4-playground/src/app/app.module.ts (314 bytes)
create ng4-playground/src/app/app.component.css (0 bytes)
create ng4-playground/src/app/app.component.html (1120 bytes)
create ng4-playground/src/app/app.component.spec.ts (986 bytes)
create ng4-playground/src/app/app.component.ts (207 bytes)
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'ng4-playground' successfully created.
で、ビデオでは、 angular2 から angular4 への移行手順などが流れているが、私は新規に環境つくったので、バージョンは全部 angular4 の環境になってるのでここは飛ばす。
$ ng -v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
@angular/cli: 1.4.9
node: 6.11.4
os: linux x64
@angular/animations: 4.4.6
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4
ビデオでは 4.0.0 だけど、こちらの環境は 4.4.6 まあ良いかな。
$ ng serve
で動かしてみる。もう一つターミナルを立ち上げ、curl で確認
$ curl http://localhost:4200/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ng4Playground</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>
うん。一応動いている。でもこの起動の仕方たど、親環境である Windowsのブラウザから接続できないので、起動時には、以下のようにする。
$ ng server --host 0.0.0.0
で起動して、Windowsのブラウザから接続してみる。
とりまここまでは OK. ビデオに戻る。
Angular2 を動かすやり方なんかを開設してたけど、これは飛ばす。
次のビデオ、Components に移る。
コメント
コメントを投稿