Angular常识回顾

一.框架对比

1.Angular8 VS AngularJS

• AngularJS
  • 开发语言为JavaScript
  • 采用不同的指令进行数据和事件绑定
  • 可扩展性差，在复杂应用上维护性差
• Angular8的优点
  • TypeScript提供类型检查和代码提示
  • 采用[]进行数据绑定,()事件绑定
  • 优异的可扩展性，可维护性

2.与React对比

• Angular是一个完整框架，而React是一个类库，其对应Angular的各种特性，需要寻找各种开源社区类库，如下表所示

  特性	Angular包	React类库
  数据绑定、依赖注入	@angular/core	MobX
  动态属性	rxjs	MobX
  路由	@angular/router	React Router v4
  组件库	@angular/material	React Toolbox
  样式绑定、样式隔离	@angular/core	CSS modules
  表单验证	@angular/forms	FormState
  命令行	@angular/cli	createreactapp

• Angular使用HTML+CSS+组件库，而React是所有都是JS

3.与Vue对比

• Vue很多思想脱胎于Angular.js，和React类似是一个轻量级的，面向View层的类库。
• Vue适合快速开发较少的工程，而Angular自带编码格式，使得它成为与多个开发人员合作时的好选择。
• Vue是个人开发者维护的开源项目，而Angular是Google的开源项目。

二.入门常识

1.VSCode插件

• Material Theme：颜色主题
• Debugger for Chrome：Chrome的断点调试工具
• Path intellisense：自己引用的类库有对应的提示
• Angular Files：以图形界面的形式帮我们执行CLI命令
• Angular Language Service：使得在模板中可以有对应的Controller智能提示
• Angular 8 Snippets：提供快捷代码块生成方法

2.Chrome开发者工具

• Element：页面元素，样式调试
• Console：控制台输出
• Sources：源码，并可以设置断点
• Network：网络请求
• Performance：性能的工具
• Memory：内存的分析工具
• Application：存储信息
• Augury插件：从Angular角度查看组件，模拟发射事件等等

3.使用Angular-Cli

• 使用

  ng new 项目名

  创建项目。当不希望提示安装依赖、指定样式及取消路由时可以使用

  ng new 项目名 --skip-install --style css --routing false

• 相关包作用
  • e2e目录：测试目录
  • .editorconfig：在不同的代码编辑器中维持同样的代码风格，比如缩进都用两个空格等等
  • .gitignore：git中忽略提交哪些文件
  • angular.json：Angular的配置文件，设置angular的多项目，里面配置对应的属性比如源码目录在哪，针对不同的任务要做的事儿如build将结果输出到哪些文件里等等
  • package.json文件：任何一个软件包都会有的描述文件，里面有对应的配置，主要有dependencies（项目里直接要使用的类库，直接引用进来直接调用）

    npm i --save 软件包名

    和devDependencies（只在开发中需要使用的类库如typescript只在编译时候使用，因为编译之后会将Typescript打包成JavaScript，在运行时不需要）

    npm i --save-dev 软件包名

    • 其中script里面会定义一些脚本命令用于启动

      ng xxx

      相关命令，这比直接使用命令行启动的好处在于使用script执行的时候会直接使用当前依赖的@angular/cli的版本，而不是全局的。全局要安装对应的cli版本只能有一个，而不同项目引用的cli版本可以不同。
    • 版本

      大版本号.小版本号.补丁版本号

    • ~

      表示大版本号和小版本号相同，当每次安装的时候安装的是最新的补丁

    • ^

      表示大版本号相同，其他的最高版本
    • 什么都不写是严格要求版本
  • package-lock.json：解决依赖冲突的问题，在真正下载的时候根据lock.json下载真正要依赖的软件包
  • README.md：markdown格式的介绍文件
  • tsconfig.json：对ts进行相关配置，指定编译成的js文件是什么样的
  • tslint.json：静态代码扫描。不需要运行，在编译或真正写代码的时候按照规则进行扫描，当规则不满足时IDE会进行报错，保持代码风格的一致，执行

    ng lint

    时也会进行相应的提示。

未完待续