本文内容概要：
- angular简单介绍
- 安装angular的依赖环境
- angular的简单应用（创建项目+组件+module+service+class）
- 组件中主要文件的介绍
介绍
Angular是一套用于构建用户界面的JavaScript框架。有Google开发和维护，主要用来开发单页面应用程序。类似于vue.js。
特性
- MVVM（数据驱动视图思想）
- 组件化
- 模块化
- 指令
- 服务
- 依赖注入
- Typescript
- 、、、、、、
现状
目前，无论我们使用什么前端框架，都必然要使用到各种NodeJS工具，angular也不列外。与其它框架不同，angular从一开始就走的“全家桶”式的设计思路，因此 @angular/cli 这款工具里面集成了日常开发需要使用的所有Node模块，使用 @angular/cli 可以大幅度降低搭建开发环境的难度。
安装依赖环境
安装Node.js
- 下载地址：https://nodejs.org/en/download/
- 安装后在cmd中输入：node -v 确认Node.js环境
安装npm
- npm会随着node的安装一起被安装。
- 在cmd中输入npm -v 确认npm环境。
由于@angular/cli同时依赖python，故同样需要安装python的运行环境，这里不多做赘述。
安装c++编译工具
- @angular/cli在Windows上同时依赖c++编译工具，所以也需要单独安装Visual Studio。
- 执行下面的命令安装c++编译工具：
npm install --global --production windows-build-tools
安装 cnpm
cnpm是国内淘宝为了解决npm安装过慢而产生的镜像，因为npm安装是通过外网下载的，很多时候容易安装失败，故建议用cnpm，当然不是必须的。
npm i -g cnpm --registry=https://registry.npm.taobao.org
安装 @angular/cli
Angular CLI是Angular官方开发的一个类似与Vue CLI的脚手架开发工具，它帮我们集成了webpack打包、开发服务器、单元测试、自动编译、部署等功能。
cnpm i -g @angular/cli
安装后在cmd中输入 ng --version 确认是否安装成功。
安装失败解决方案
- 在Windows平台上安装@angular/cli会报很多error，那是因为@angular/cli 在Windows平台上面依赖python和Visual Studio 环境，而很多开发者并不一定安装了这些。
- 以及node-sass模块被墙的问题，强烈推荐使用cnpm进行安装，可以非常有效地避免撞墙。
- 如果安装失败，请手动把全局的@angular/cli 删掉：
cnpm uninstall -g @angular/cli
- 如果node_modules删不掉，爆出路径过长之类的错误，请尝试用一些文件粉碎机之类的工具强行删除。
- 其实无论用什么开发环境，安装的过程中请仔细看错误日志。
Angular的简单应用（创建项目+component+module+service+class）
- 使用脚手架工具初始化创建项目
ng new angular-demo（angular-demo：项目名称）
Angular CLI 将会自动帮我们把目录结构创建好，并且会自动生成一些目录文件。如下图所示：
注意：这里自动下载第三方包的依赖文件时通过快捷键CTRL+C打断，不要自动下载，这样很可能会出错，我们通过cnpm手动去安装就好。
cd angular-demo
cnpm install || cnpm i
- 启动angular应用程序（Server the application）
使用脚手架工具初始化项目完成之后，就可以启动开发模式了。
ng serve //或者 npm start
注意：
- 在项目根目录下执行
- 是 serve 不是server，我就经常手误输错。
- 该命令默认会开启一个服务器占用4200端口，如果想要修改可以通过 --port 参数来指定，例如 ：
ng server --port 5000
如上图所示，我们在进行项目编写的时候，所有的编写文件基本都在src目录文件下。
- 使用命令在 src/app/pages 目录下创建新组件（component）
ng generate component NewComponentName || ng g component 组件名称 //NewComponentName 新组建名称
- 使用 Angular CLI 创建一个新模块(module)
ng generate module 模块名称 || ng g module 模块名称
-
使用 Angular CLI 创建一个新服务(service)
ng generate service 服务名称
|| ng g service 服务名称
-
使用 Angular CLI 创建一个简易的模型类(class)
ng generate class 类名称
组件中主要文件的介绍
- main.ts
- 这个文件就是模块化启动入口，负责加载启动根模块。
主要是去加载app目录下的组件，如下图所示：
- component.ts文件
- 而我们主要关注的就是此核心文件 ----- 项目的根组件。在angular中组件就是一个类。
- @component 组件的装饰器
- selecor 用来定义组件渲染的标签名称，说白了就是组件的名字
- templateUrl 用来指定组件的模板文件
- styleUrls 一个数组，用来存放组件相关的样式文件
- HTML文件
上图中{{ }}中的 title 对应的便是component.ts中的 title 。（图中的绿色部分）
- moudle文件
- 项目的根模块。负责把组件、服务、路由、指令等组织到一起，设置启动组件为根组件。
目录结构
npm scripts 介绍
原文件如下图所示：
以上内容只是一个简单的介绍，具体以angular官网文档为准：https://angular.cn/docs