Angular 开发环境
Angular 依赖于 Nodejs,需要首先安装 node 和 npm,安装完成后可以查看 node 和 npm 的版本 然后再安装 angular 依赖
node -v
npm -v
# npm换源
npm config set registry https://registry.npm.taobao.org
# 查看npm的源
npm config get registry
# 安装angular
npm install -g @angular/cli
# 更新所有套件到最新版
ng update --all --force
# 创建一个angular项目
ng new testng
StackBlitz是一个在线开发环境,可以快速上手开发.
进入 testng 项目,其目录结构如下
├── angular.json # angular配置文件
├── e2e
│ ├── protractor.conf.js
│ ├── src
│ │ ├── app.e2e-spec.ts # e2e 端对端测试目录
│ │ └── app.po.ts
│ └── tsconfig.json
├── karma.conf.js # 执行自动化测试的
├── node_modules # npm包安装目录,使用npm install安装
├── package.json # npm 工具的配置文件,指明了当前这个应用所要用到的模块,Angular 的依赖包
├── README.md
├── src
│ ├── app
│ │ ├── app.component.css # 项目主样式
│ │ ├── app.component.html # 项目的主模板
│ │ ├── app.component.spec.ts # 项目单元测试
│ │ ├── app.component.ts # 项目的主组件,定义AppModule,这个根模块会告诉Angular如何组装该应用
│ │ ├── app.module.ts # 项目主模块
│ │ └── app-routing.module.ts
│ ├── assets # 静态资源如图片、翻译语言,构建时自动打包
│ ├── environments
│ │ ├── environment.prod.ts # 生产环境配置
│ │ └── environment.ts # 开发环境配置,默认
│ ├── favicon.ico # 图标
│ ├── index.html # 宿主页面
│ ├── main.ts # 整个web应用的入口点,angular通过该项目来启动整个项目
│ ├── polyfills.ts # 导入一些必要的库,使得angular可以在一些老版本的浏览器中运行
│ ├── styles.css # 公共样式
│ └── test.ts # 单元测试入口点
├── tsconfig.app.json
├── tsconfig.json # TypeScript 编译器的参数
├── tsconfig.spec.json
├── typings.json # 为那些 TypeScript 编译器无法识别的库提供了额外的定义文件。
└── tslint.json # 定义 ts 文件质量检查的一些规则