Angular介绍

目前，无论你使用什么前端框架，都必然要使用到各种 NodeJs工具，Angular也不例外，与其他框架不同，Angular从一开始就走的是“全家桶”式的设计思路，因此@angular/cli这款工具里面集成了日常开发需要使用的所有Node模块 使用@angular/cli可以大幅降低搭建开发环境的难度

AngularCli类似于Vue Cli是 ANGULAR官方开发的一个脚手架工具 专门用来开发构建Angular应用程序
Angular 应用程序初始化
内置开发服务器
代码变更浏览器自动刷新
创建组件 指令 服务器等集成工具

安装·脚手架工具

Angular Cli是Angular官方开发的一个类似于 Vue cLI 的脚手架开发工具 它帮我们集成了webpack打包 开发服务器 单元测试 自动编译 部署等功能性
第一步

cnm i -g @angular/cli

安装结束之后我们可以通过输入以下命令检查是否安装成功

ng --version
ng new angular-demo （ng new +项目名称）

最后输入 ng-serve启动项目

目录结构介绍

e2e 端到端测试（暂不关心）； node.modules npm安装的第三方包； src 存放业务源码 .angular-cli.json
AngularCLI脚手架工具配置文件 .editorconfig 针对编辑器的代码风格约束 .gitignore Git 仓库忽略配置项
karma.conf.js 测试配置文件（给karma用的） package.json 项目包装说明 protactor.conf.js
端到端测试配置文件 readme.md 项目说明文件 tsconfig.json Typescript 配置文件 tslint.json
TYpeScript代码风格校验工具配置文件（类似于eslint）

npm scripts 介绍

“scripts”{
“ng”：“ng”运行查看Angular CLI脚手架工具使用帮助
“start”：“ng serve”运行开发模式
“build”：“ng build --prod”运行项目打包构建 （用于发布到生成环境）
“test”：“ng test”运行karma单元测试
“lint”：“ng lint”，运行Type script代码效验
“e2e”：“ng e2e”运行protractor端到端测试

}

Angular核心概念

angular一切都是围绕着组件 compontent的概念展开的
component（组件）是整个框架的核心 也是终极目标 “组件化”的意义有2个
第一是分治 因为有了组件之后 我们可以吧各种逻辑封装在组件内部 避免混在一起
第二是复用 封装成组件之后不仅可以再项目内部复用而且可以沉淀下来跨项目复用

在Angular中 组件就是一个类（构造函数的另一个写法）
@component组件的装饰器
selector用来定义组件渲染的标签名称 说白了就是组件的名字
templateUrl 用来指定组件的模板文件
styleUrl 一个数组 用来存放组件相关的样式文件
如何创建一个组件

ng generate component foo

NgModule（模块）是组织业务代码的利器 按照你自己的业务产场景 吧组件 服务 路由打包到模块里面 形成一个个的积木块 然后在用这些积木块搭建出高楼大厦
数据绑定
和vue.js一样 mvvm思想（数据驱动视图）通过特殊的{{}}语法将数据绑定到DOM元素 当数据改变的时候 会影响视图的更新
指令（Directives）
和vue一样 Angular扩展了Html语法 增加了一些特殊的指定 例如
ngFor 循环指令
ngif 条件判断指定
{{ngModel}}表单控件双向绑定指令
Services （服务）
服务是一个广义范畴，包括:值、函数,或应用所需的功能。
说白了服务就是针对某个单- -或系统功能的封装，例如在Angular核心包里面，最典型的一个服务就是Http服务。
几乎任何东西都可以是一个服务。 典型的服务是一个类， 具有专注的、明确的用途。它应该做- -件特定的事情,并把
它做好。
例如:
●日志服务
●和服务端接口交互的服务
组件类应保持精简。组件本身不从服务器获得数据、不进行验证输入，也不直接往控制台写日志。它们把这些任务委
托给服务。
服务仍然是任何Angular应用的基础。组件就是最大的服务消费者。
组件的任务就是提供用户体验,仅此而已。它介于视图(由模板渲染)和应用逻辑(通常包括模型的某些概念)之间 涉及良好的组件为数据绑定提供属性和方法 吧把其他琐事都委托给服务
Angular 不会强制要求我们遵循这些原则 即使我们花3000行代码写一个超级复杂的组件 他也不会抱怨什么
依赖注入（Dependency injection）
依赖注入是提供类的新实例的一种方式 还负责吃力号类所需的全部依赖 大多依赖都是服务 Angular使用依赖注入来提供新组件以及组件 所需的服务