第一个 Angular 应用程序

2021-06-08 22:01:56 阅读：219 来源： 互联网

标签：第一个 app ts 应用程序 Angular tsconfig json build 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 中引入)

标签：第一个,app,ts,应用程序,Angular,tsconfig,json,build,angular
来源： https://www.cnblogs.com/lapoo/p/14864632.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9