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 文件质量检查的一些规则

参考

Angular 的 8 个核心概念

Angular4 教程