Angular开发环境搭建

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 个核心概念 ...

2020-09-26 · 2 分钟 · 680 字 · Niuhe