第一个 Angular 应用程序

Posted 2021-06-08 聆耳吟风

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 中引入)