一.框架对比
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版本可以不同。 - 版本
大版本号.小版本号.补丁版本号
~
表示大版本号和小版本号相同,当每次安装的时候安装的是最新的补丁^
表示大版本号相同,其他的最高版本- 什么都不写是严格要求版本
- 其中script里面会定义一些脚本命令用于启动
- package-lock.json:解决依赖冲突的问题,在真正下载的时候根据lock.json下载真正要依赖的软件包
- README.md:markdown格式的介绍文件
- tsconfig.json:对ts进行相关配置,指定编译成的js文件是什么样的
- tslint.json:静态代码扫描。不需要运行,在编译或真正写代码的时候按照规则进行扫描,当规则不满足时IDE会进行报错,保持代码风格的一致,执行
ng lint
时也会进行相应的提示。
未完待续