第一个Angular应用程序

node download

https://nodejs.org/zh-cn/


全局安装

npm install @angular/cli -g


指定版本

npm install @angular/cli@8.3.29 -g


angular-cli versions

https://www.npmjs.com/package/@angular/cli


检查安装版本

ng version


创建项目

ng new app-name


工程目录

┌─ e2e
├─ src
├─ angular.json
│ (Angular 应用程的配置文件)
│
├─ karma.conf.js
│ (karmar 单元测试配置文件)
│
├─ package.json
│ (npm包管理及项目命令配置文件)
│
├─ tsconfig.app.json
│ (TypeScript 配置文件, 在 angular.json 中 architect/build/options/tsConfig)
│
├─ tsconfig.json
│ (TypeScript 配置文件)
│
│ tsconfig.json 和 tsconfig.app.json 的区别:
│ 1. tsconfig.app.json 继承自 tsconfig.json
│ 2. tsconfig 中配置的是 TypeScript 的基本配置
│ - 保存时编译
│ - 指定ES版本等
│ - ···
│ 3. tsconfig.app 中配置的是和项目有关的
│ - files 指定一些ts文件
│ - include/exclude 包含/排除一些文件
│ - ···
│ (具体配置信息参见: https://www.tslang.cn/docs/handbook/tsconfig-json.html)
│
└─ tslint.json
(TypeScript 代码约束配置文件)


src 目录

┌─ app
│ (应用程序内容目录)
│
├─ assets
│ (静态资源目录, 在 angular.json 中 architect/build/options/assets)
│
├─ environments
│ (环境变量目录, 在 angular.json 中 architect/build/configurations)
│
│ 在不同环境编译时指定 configuration 可以编译成不同的配置文件, 例如:
│ - environments
│ - environment.prod.ts -- 正式
│ ————————————————————————————————
│ - angular.json/.../architect/build/configurations
│ "production": {
│ "fileReplacements": [
│ {
│ "replace": "src/environments/environment.ts",
│ with: "src/environments/environment.prod.ts"
│ }
│ ]
│ }
│ ————————————————————————————————
│ - package.json/scripts
│ "build-prod": "ng build --cOnfiguration=production"
│ ————————————————————————————————
│ - npm run build-prod
│
├─ index.html
│ (Angular 应用入口页面, 在 angular.json 中 architect/build/options/index)
│
├─ main.ts
│ (Angular 应用启动入口, 在 angular.json 中 architect/build/options/main)
│
├─ polyfills.ts
│ (腻子脚本, 兼容低版本浏览器, 在 angular.json 中 architect/build/options/polyfills)
│
├─ style.scss
│ (全局样式, 在 angular.json 中 architect/build/options/styles)
│
└─ test.ts
(单元测试, 在 angular.json 中 architect/test/options/main)


app 目录

┌─ app.module.ts
│ (根模块, 在 main.ts 中, platformBrowserDynamic().bootstrapModule(AppModule))
│ 在一个Angular应用中只能有一个根模块, 并且在 main.ts 中创建
│
├─ app.component.ts
│ (根组件, 在根模块中声明)
│
└─ app-routing.module.ts
(根路由, 在 app.module 中引入)