Angular入门到精通系列教程(2) - Angular基本概念
- 1. Angular (Angular2)v.s. AngularJS
- 2. 检查本地环境的版本
- 3. TypeScript
- 4. Angular CLI
- 5. Angular 的版本
- 6. Angular 版本如何升级
- 7. 依赖注入(dependency injection)
- 8. 编译-AOT和JIT的区别
环境:
- Angular CLI: 11.0.6
- Angular: 11.0.7
- Node: 12.18.3
- npm : 6.14.6
- IDE: VSCode
1. Angular (Angular2)v.s. AngularJS
Angular最早期的版本,也叫AnugularJS,使用javascript开发;新的版本,才叫Angular,也称为Angular2,使用typescript开发,Angular和AngularJS是不兼容的(当然,官方也有2个版本的集成方案)。
2. 检查本地环境的版本
检查npm, node 版本:
- npm 版本:
npm -v
- node版本:
node -v
- angular、angular CLI全局、本地版本
ng --version
3. TypeScript
Angular要求开发语言必须为TypeScript。TypeScript有很多好处,比如引入了类、接口的概念,比如强类型,可以在写代码时(编译时)就能检查到一些错误,避免只有代码在执行时才发现异常。
如果没用过TypeScript,不要害怕TypeScript这个新的概念,只要你有javascript经验,直接入手,没有任何难度。只需要用到class、interface等东西时,参考一下别人如何使用,或者查一下typescript文档即可。
4. Angular CLI
angular-cli又称 Angular脚手架,是angular开发团队自行维护的一个开发工具,用于快速生成项目或者组件的框架以提高效率。可以方便的生成angular app、component、service 等等, 并且可以通过参数,按照自己的需求去创建。可以说是angular开发必不可少的利器。
参考:https://cli.angular.io/
ng generate: 新建component、service、pipe, class 等
ng new: 新建angular app
ng update: 升级angular自身,以及依赖
ng version: 显示anuglar cli全局版本、以及本地的angular cli、angular code等的版本
ng add: 新增第三方库。会做2件事,1)基于npm安装node_modules, 2)自动更改配置文件,保证新的依赖正常工作
总结一下,Angular的开放,离不开AngularCLI。
5. Angular 的版本
不同于Angular2+Angular的不兼容, Angular 2.0 之后会保证向下兼容。官方的版本发布计划是:
- 每 6 个月发布一个主版本(第一位版本号,主版本)
- 每个主版本发布 1 ~ 3 个小版本(第二位版本号,Feature 版本号)
- 每周发布一个补丁版本(第三位版本号,Hotfix 版本号)
6. Angular 版本如何升级
Angular CLI提供了升级命令(ng update),同时,官网(https://update.angular.io/)也有升级指南。选择从哪个版本升级到哪个版本后,会给出一步一步的升级命令,直接执行就好。
7. 依赖注入(dependency injection)
依赖注入是Angular实现的一种应用程序设计模式, 是Angular的核心概念之一。
依赖就是具有一系列功能的服务(service), 应用程序中的各种组件和指令(derictives)可能需要服务的功能。 Angular提供了一种平滑的机制,通过它我们可以将这些依赖项注入我们的组件和指令中。因此,我们只是在构建依赖关系,这些依赖关系可以在应用程序的所有组件之间注入。
使用依赖注入还有以下好处,
- 不需要实例化,(new 实例)。不需要关心class的构造函数里需要什么参数
- 一次注入(app module通过Providers注入),所有组件都可以使用。而且是用同一个service实例(Singleton),也就是说一个service里的数据是共分享的,可以用于组件间数据传递。
8. 编译-AOT和JIT的区别
每个Angular应用程序都包含浏览器无法理解的组件和模板。 因此,在浏览器内部运行之前,需要先编译所有Angular应用程序。
Angular提供两种编译类型:
- JIT(Just-in-Time) compilation
- AOT(Ahead-of-Time) compilation
区别在于,在JIT编译中,应用程序在运行时在浏览器内部进行编译;而在AOT编译中,应用程序在构建期间进行编译。
显而易见,AOT编译好处多多,因而是Angular的默认编译方式。主要优点
由于应用程序是在浏览器内部运行之前进行编译的,因此浏览器会加载可执行代码并立即呈现应用程序,从而加快了呈现速度。
在AOT编译中,编译器将与应用程序一起发送外部HTML和CSS文件,从而消除了对那些源文件的单独AJAX请求,从而减少了ajax请求。
开发人员可以在构建阶段检测并处理错误,这有助于最大程度地减少错误。
AOT编译器将HTML和模板添加到JS文件中,然后再在浏览器中运行。 因此,没有多余的HTML文件可读取,从而为应用程序提供了更好的安全性。
本文由博客群发一文多发等运营工具平台 OpenWrite 发布