建立一個Angular專案的方法如下。
首先要在電腦安裝node.js及NPM套件管理工具，然後安裝Angular CLI命令工具。Angular CLI可直接下指令來建立angular專案。
Angular CLI安裝好後，在命令提示字元(command line)將目錄位置移到你想要建立專案的目錄。例如本範例安裝在D:\myapps，然後輸入ng new <project>指令來建立一個angular專案。
<project>參數代表專案名稱，例如本範例命名為demo，因此輸入指令為ng new demo。
輸入上面指令後會問你是否安裝Angular routing，輸入yes。
接著問你想用哪種樣式表，選擇CSS。
回答完以上問題後，Angular CLI便開始建立一個angular專案的工作目錄。
D:\myapps>ng new demo
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE demo/angular.json (3789 bytes)
CREATE demo/package.json (1303 bytes)
CREATE demo/README.md (1021 bytes)
CREATE demo/tsconfig.json (435 bytes)
CREATE demo/tslint.json (1621 bytes)
CREATE demo/.editorconfig (246 bytes)
CREATE demo/.gitignore (629 bytes)
CREATE demo/src/favicon.ico (5430 bytes)
CREATE demo/src/index.html (291 bytes)
CREATE demo/src/main.ts (372 bytes)
CREATE demo/src/polyfills.ts (2841 bytes)
CREATE demo/src/styles.css (80 bytes)
CREATE demo/src/test.ts (642 bytes)
CREATE demo/src/browserslist (388 bytes)
CREATE demo/src/karma.conf.js (1017 bytes)
CREATE demo/src/tsconfig.app.json (166 bytes)
CREATE demo/src/tsconfig.spec.json (256 bytes)
CREATE demo/src/tslint.json (244 bytes)
CREATE demo/src/assets/.gitkeep (0 bytes)
CREATE demo/src/environments/environment.prod.ts (51 bytes)
CREATE demo/src/environments/environment.ts (662 bytes)
CREATE demo/src/app/app-routing.module.ts (245 bytes)
CREATE demo/src/app/app.module.ts (393 bytes)
CREATE demo/src/app/app.component.html (1152 bytes)
CREATE demo/src/app/app.component.spec.ts (1089 bytes)
CREATE demo/src/app/app.component.ts (208 bytes)
CREATE demo/src/app/app.component.css (0 bytes)
CREATE demo/e2e/protractor.conf.js (752 bytes)
CREATE demo/e2e/tsconfig.e2e.json (213 bytes)
CREATE demo/e2e/src/app.e2e-spec.ts (633 bytes)
CREATE demo/e2e/src/app.po.ts (251 bytes)
> node-sass@4.12.0 install D:\myapps\demo\node_modules\node-sass
> node scripts/install.js
Cached binary found at C:\Users\matt\AppData\Roaming\npm-cache\node-sass\4.12.0\win32-x64-64_bin
.node
> core-js@2.6.8 postinstall D:\myapps\demo\node_modules\core-js
> node -e "try { require('./scripts/postinstall'); } catch (e) { /* empty */ }"
> node-sass@4.12.0 postinstall D:\myapps\demo\node_modules\node-sass
> node scripts/build.js
Binary found at D:\myapps\demo\node_modules\node-sass\vendor\win32-x64-64\binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"
"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 1089 packages from 1027 contributors and audited 42617 packages in 92.442s
found 0 vulnerabilities
warning: LF will be replaced by CRLF in .editorconfig.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in README.md.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in angular.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in e2e/protractor.conf.js.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in e2e/src/app.e2e-spec.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in e2e/src/app.po.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in e2e/tsconfig.e2e.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in package-lock.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/app/app-routing.module.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/app/app.component.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/app/app.component.spec.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/app/app.component.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/app/app.module.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/browserslist.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/environments/environment.prod.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/environments/environment.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/karma.conf.js.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/main.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/polyfills.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/styles.css.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/test.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/tsconfig.app.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/tsconfig.spec.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/tslint.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in tsconfig.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in tslint.json.
The file will have its original line endings in your working directory.
Successfully initialized git.
Angular下載完成後，所在目錄便會多了一個與剛剛執行ng new後接的參數名稱相同的資料夾，也就是demo。此資料夾即為新建立的angular專案。
將cmd的位置移到建好的angular專案資料夾中，然後輸入ng serve指令來啟動專案。。
D:\myapps\demo>ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://local
host:4200/ **
Date: 2019-05-23T15:55:29.242Z
Hash: 8b4060321dd78285606b
Time: 13312ms
chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 285 kB [ini
tial] [rendered]
chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.77 MB [initial] [rendered]
i ｢wdm｣: Compiled successfully.
看到Compiled successfully字樣後，打開瀏覽器並在網址列輸入localhost:4200便會顯示以下畫面。
到這裡就表示成功建立了一個angular專案。在D:\myapps\demo中會多出angular專案的預設的檔案。
接著用Visual Studio Code開啟Angular專案。
在src/app目錄下找到app.component.html，此即為預設的畫面的html檔。
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
<router-outlet></router-outlet>
{{...}}為插值符(interpolation)，用來顯示Component的屬性值，也就是app.component.ts中的AppComponent.title
<router-outlet></router-outlet>為佔位符號(placeholder)，用來標記Angular Router要渲染Component template的位置。
參考：
沒有留言:
張貼留言