前端 angular

As we all know, Angular is most discussed word in frontend development world. It has gained a lot of popularity in these years. Angular becomes a choice of a lot of frontend developers and I am also one of them.

众所周知，Angular是前端开发领域中讨论最多的词。 这些年来，它已广受欢迎。 Angular成为许多前端开发人员的选择，我也是其中之一。

In this article, I will highlight about when angular came and how quickly it grew into a market. In every six months, Angular team is coming with the new version of angular, making it more powerful with new features. I must appreciate the angular team for their wonderful efforts.

在本文中，我将重点介绍何时出现角钢以及角钢进入市场的速度。 每六个月，Angular团队就会推出新版本的angular，并通过新功能使其功能更强大。 我必须感谢棱角分明的团队所做的出色努力。

Well, now you might be excited how it evolved, what new features added in different versions. Now, the wait is over. Let’s get started!

好吧，现在您可能会感到兴奋，它如何演变，不同版本中增加了哪些新功能。 现在，等待结束了。 让我们开始吧！

Before moving ahead, I would like to let my readers know that ‘Angular 8’ is the latest version which our talented angular team released.

在继续之前，我想让读者知道“ Angular 8”是我们才华横溢的角度团队发布的最新版本。

英雄的诞生(AngularJS)— 2010 (Birth of Hero  (AngularJS) — 2010)

In 2010, birth of today’s market hero took place. It was known as ‘AngularJS’.

2010年，今天的市场英雄诞生了。 它被称为“ AngularJS”。

AngularJS is a Javascript framework that is developed by Google. It is used to make single page application (SPA). Wait! I hope you know what is SPA. If not, ask Google about it and then come back as this is one of the beautiful approach that angular uses, but here is a brief intro of SPA (those who knows, you can skip):

AngularJS是Google开发的Javascript框架。 它用于制作单页应用程序(SPA)。 等待！ 希望您知道什么是SPA。 如果不是，请向Google询问一下，然后再回来，因为这是angular使用的一种漂亮方法，但是这里是SPA的简要介绍(那些知道的人，您可以跳过)：

SPA or Single page application is an application in which everything downloads in one go. All the necessary code is downloaded in one go. Unlike multiple page app, you don’t have to request a web page from the server for every hit and loads the page. In SPA, index.html file downloads once with all the content and then for every url change, existing webpage dynamically loads the demanding content. This approach gives better UX in switching between different pages and gives you feel of the app.

SPA或单页应用程序是一次下载所有内容的应用程序。 一次性下载所有必需的代码。 与多页应用程序不同，您无需为每次点击就从服务器请求网页，也无需加载页面。 在SPA中，index.html文件会与所有内容一起下载一次，然后对于每个url更改，现有网页都会动态加载所需内容。 这种方法在不同页面之间切换时提供了更好的用户体验，并带给您应用程序的感觉。

That’s it about SPA. I hope it gives you a brief picture of it. Let’s move to the original topic.

SPA就是这样。 我希望它能给您简要介绍一下。 让我们转到原始主题。

AngularJS allow developers to develop web application faster. It uses a client side rendering — a technique in which rendering of the content is taken care by client (browser). Well, I will not go into detail about what’s the pros and cons of this technique, but the main concern in this technique is SEO. This rendering which angular uses is poor in SEO. Wait! Dont’t think angular is bad. There is very popular Bollywood dialogue — “Picture abhi baki hai mere dost (Movie is still left, my friend)”. I think this dialogue suits the current situation. I will discuss why I said this.

AngularJS使开发人员可以更快地开发Web应用程序。 它使用客户端渲染-一种客户端(浏览器)负责内容渲染的技术。 好吧，我不会详细介绍这种技术的优缺点，但是该技术的主要关注点是SEO。 角度使用的这种渲染在SEO中很差。 等待！ 不要以为角度不好。 宝莱坞对话非常流行-“图片abhi baki hai dost(我的朋友，电影还剩下)”。 我认为这次对话适合当前情况。 我将讨论为什么我这么说。

Now, we should focus on the features of AngularJS. Here are some :

现在，我们应该关注AngularJS的功能。 这里有一些 ：

1)Data binding — automatic synchronization between model and view.

1) 数据绑定 -模型和视图之间的自动同步。

2) Dependency Injection System — a design pattern in which system supplies the dependent objects when it creates the object.

2) 依赖注入系统 -一种设计模式，系统在创建对象时会提供依赖对象。

3) scope — that takes care of controller and view.

3) 范围 -负责控制器和视图。

4) Services — for sharing info among different parts of application.

4) 服务 -用于在应用程序的不同部分之间共享信息。

5)Directives — It gives super power to HTML. For instance, ng-model, ng-app.

5) 指令 -它赋予HTML强大的功能。 例如ng-model，ng-app。

6)Controllers — heart of the application where logic resides.

6) 控制器 -逻辑所在的应用程序的心脏。

7)Template — view that gives information using our controller and model.

7) 模板 -使用我们的控制器和模型提供信息的视图。

This list is long. I will not go into detail about angularJS but in angularJS, controllers are the heart of the application. Well, angularJS came with lots of features for developing a powerful web application but failed at some point like huge bundle size, performance issues, SEO problem, code maintainability issues but that does not mean that it is total failure. Data binding, Dependency Injection concepts are success of angular. Hence, we can say it’s half failure and half success.

这个清单很长。 我不会详细介绍angularJS，但在angularJS中，控制器是应用程序的核心。 不错，angularJS具有许多用于开发功能强大的Web应用程序的功能，但在某些时候失败了，例如巨大的捆绑包大小，性能问题，SEO问题，代码可维护性问题，但这并不意味着它完全失败。 数据绑定，Dependency Injection概念是成功的有角度的。 因此，我们可以说这是一半失败和一半成功。

The imperfection in AngularJS made angular team to rewrite the whole framework from scratch. Such big change in new version of any framework/library was never encountered in the market. New version of angular is totally different from AngularJS. How it is different? Let’s understand by diving into our next sub -topic.

AngularJS的不完善之处使Angular团队可以从头开始重写整个框架。 市场上从未遇到过任何框架/库的新版本中如此巨大的变化。 angular的新版本与AngularJS完全不同。 有何不同？ 让我们深入了解下一个子主题。

角度2–2016 (Angular 2–2016)

Later version of AngularJS came into the market in 2016, Then, it was no more known as AngularJS. It got a name ‘Angular’. Angular 1.x version is known as AngularJS. Later version after 2.x is known as Angular. When I encountered these two words in my web development journey. I literally thought that these are two different frameworks and after a research I got to know that angular is updated version of angularJS. I hope my readers would not have misunderstood it.

更高版本的AngularJS于2016年投放市场，然后，它不再被称为AngularJS。 它的名字叫“ Angular”。 Angular 1.x版本称为AngularJS。 2.x之后的更高版本称为Angular。 当我在Web开发过程中遇到这两个词时。 我从字面上认为这是两个不同的框架，经过研究，我知道angular是angularJS的更新版本。 我希望我的读者不要误会它。

Angular 2 came into market with drastic changes. The biggest change was introduction of Typescript. Typescript is superset of javascript with additional features like it follows Oops concepts, strongly typed. Programmers that is coming from object oriented world finds it more familiar unlike javascript.

Angular 2发生了翻天覆地的变化。 最大的变化是Typescript的引入。 Typescript是javascript的超集，具有其他功能，例如它遵循Oops概念(强类型化)。 来自面向对象世界的程序员发现它与javascript不同，因此更加熟悉。

Components are the heart of angular 2+ world. Angular introduced various packages for achieving basic and important functionalities like routing package for easily defining routes, http package for fetching data from the server, animation package for animations and so on.

组件是2+角世界的核心。 Angular引入了用于实现基本和重要功能的各种软件包，例如用于轻松定义路由的路由软件包，用于从服务器获取数据的http软件包，用于动画的动画软件包等等。

Angular 2 also provides directive concept like AngularJS. Directives gives superpowers to our HTML like *ngFor, *ngIf (structural directive) makes our html dynamic whereas attribute directives like ngModel (for two way data binding), ngStyle takes care of appearance and behaviour of our DOM.

Angular 2还提供了类似于AngularJS的指令概念。 指令为我们HTML提供超能力，例如* ngFor，* ngIf(结构化指令)使我们的html动态化，而属性指令(例如ngModel(用于双向数据绑定))使ngStyle负责DOM的外观和行为。

Another feature which does not change in angular is, it also uses DI system. Like angularJS, DI system supplies the dependent objects (dependencies) to the component.

角度不变的另一个功能是，它也使用DI系统。 像angularJS一样，DI系统将依赖对象(dependencies)提供给组件。

Wait! I forgot to tell you about wonderful helping hand which angular provides which is angular-cli. It’s a great helping hand that helps us in developing our application faster like for generating component just use ‘ng g c component-name’ (‘g’ is generate and ‘c’ is component). This is another cool feature added in angular.

等待！ 我忘了告诉您有关角度提供的出色帮助手，即角度cli。 这是一个很好的帮手，可以帮助我们更快地开发应用程序，例如仅使用'ng gc component-name'('g'是generate而'c'是component)生成组件。 这是角度添加的另一个很酷的功能。

This is not the end. I told you that the biggest disadvantage of angularjs is that it is poor in SEO and remember that famous dialogue which I said. You will understand in few minutes why I used that.

这不是结束。 我告诉过您，angularjs的最大缺点是SEO差，请记住我说过的著名对话。 几分钟后您将了解我为什么使用它。

It is biggest cons that angularJS is poor in SEO. When you view the page source, you can see there is nothing(no Html) which makes crawlers to think website useless i.e. without any info. It is very painful when your website wants google crawlers to index them and make them to reach on top in google search but could not achieve it. Angular team took care of it and introduced angular universal which takes care of SEO of your angular website. It uses server side rendering which in turn solves SEO problem.

最大的缺点是angularJS的SEO差。 当您查看页面源代码时，您会看到没有任何内容(没有HTML)使爬虫程序认为网站无用，即没有任何信息。 当您的网站希望Google搜寻器将它们编入索引，并使它们在Google搜索中排在首位，但却无法实现时，这是非常痛苦的。 Angular团队对此进行了介绍，并介绍了Angle Universal，它负责您的角度网站的SEO。 它使用服务器端渲染，从而解决了SEO问题。

These are the features with which angular 2 came in a market.

这些是Angle 2进入市场的功能。

Angular 4 — 2017年3月 (Angular 4 — March, 2017)

After reading the subtopic, you might wonder why not Angular 3? This is a common question that can come in anyone mind. Don’t worry! I will let you know. The reason why not angular 3 was because of the router package. The angular router package was already distributed as v3. To avoid confusion, angular team released angular 4 version. I think now my readers can jump to understand the features of angular 4.

阅读了子主题之后，您可能会想知道为什么不选择Angular 3？ 这是任何人都会想到的常见问题。 不用担心 我会让你知道。 之所以没有角度3的原因是由于路由器包装。 角路由器套件已作为v3发行。 为避免混淆，Angular团队发布了angular 4版本。 我认为现在我的读者可以跳下来了解Angle 4的功能。

Angular 4 came with bug fixes and other new features and improvements. The biggest improvement that was done was in bundle size. They reduced bundle size by 60% which in turn made application lighter and hence application loading time decreased.

Angular 4附带了错误修复以及其他新功能和改进。 所做的最大改进是包装尺寸。 他们将束尺寸减小了60％，这反过来又减轻了应用程序重量，因此减少了应用程序加载时间。

The other thing that was done was in animation package. They pulled out animation feature in a separate package- @angular/animations.

另一件事是在动画包中。 他们在单独的程序包-@ angular / animations中提取了动画功能。

Another improvement was in structural directive. *ngIf came with else part in this version.

另一个改进是结构指令。 * ng如果在此版本中附带其他部分。

This is the brief introduction of features of angular 4.

这是角度4的功能的简要介绍。

Angular 5 — 2017年11月 (Angular 5 — Nov 2017)

After six months, angular team came with another new version, i.e. angular 5. This angular 5 version again came with a lot of new features, improvements and bug fixes.

六个月后，Angular团队推出了另一个新版本，即Angle5。Angular5版本再次具有许多新功能，改进和错误修复。

As the main concern for every website is faster loading time. Angular took care about it in this version as well.To enhance application performance more, they introduced build optimizer- It is a tool that was introduced to make small bundle size. It uses tree shaking technique to remove the dead code from application.

每个网站的主要关注点是更快的加载时间。 Angular在此版本中也对此予以关注。为了进一步提高应用程序性能，他们引入了构建优化器-它是一种用于减小包装尺寸的工具。 它使用树震动技术从应用程序中删除无效代码。

Compiler improvements were also made that makes faster rebuild of the application.

还对编译器进行了改进，从而可以更快地重建应用程序。

Another feature that was introduced was state Transfer key(TransferStateKey which is part of the platform/browser package). Well! You might think what it is? When to use? You can avail the beauty of this feature in your application if you are using SSR. Yes, If you have implemented SSR then you must use state transfer key feature. The reason why I said this because when you are using SSR and your application is making any HTTP request (which is quite common) then this request is going be to invoke two times i.e one on the server and another on the browser. This causes flickering issue (I have gone through this flickering issue in my application because the HTTP request was invoking two times). Thanks to state transfer key feature. This feature makes browser to use the response of HTTP request that is hit on server. It uses the response that server gets from HTTP request. As its name suggest, server transfers the state of response with html to browser. Hence, two times hit of HTTP request can be avoided.

引入的另一个功能是状态传输密钥(TransferStateKey，它是平台/浏览器软件包的一部分)。 好！ 您可能会认为这是什么？ 什么时候使用？ 如果使用的是SSR，则可以在应用程序中使用此功能的优点。 是的，如果您已经实现了SSR，则必须使用状态转移密钥功能。 我之所以这么说是因为，当您使用SSR并且您的应用程序发出任何HTTP请求(这很常见)时，此请求将被调用两次，即在服务器上调用一次，在浏览器上调用一次。 这会导致闪烁问题(由于HTTP请求被调用了两次，因此我在应用程序中经历了这个闪烁问题)。 由于状态转移键功能。 此功能使浏览器可以使用服务器上命中的HTTP请求的响应。 它使用服务器从HTTP请求获得的响应。 顾名思义，服务器将带有html的响应状态传输到浏览器。 因此，可以避免两次HTTP请求命中。

Another improvement that was done was in http client package. In this version, HTTPClientModule came with improvements like using this module, developers do not have to parse the response using a map. Parsing step is not needed any more. Suppose if there is non-JSON type response, then you can specify that response using responseType in your HTTP request .

完成的另一项改进是在http客户端程序包中。 在此版本中，HTTPClientModule进行了改进，例如使用了此模块，开发人员不必使用映射来解析响应。 不再需要解析步骤。 假设存在非JSON类型的响应，那么您可以在HTTP request中使用responseType来指定该响应。

This is all about feature of angular 5. Now the time has come to move to angular 6 version. After another six month, angular 6 came into market with more power.

这全部与角度5的功能有关。现在到了角度6版本的时候了。 又过了六个月，Angular 6以更大的功率进入市场。

Angular 6-2018年5月 (Angular 6 — May 2018)

In May, 2018- just after six months, angular team released another version of angular — angular 6. This version also came with lots of new features. I will list down some of them.

在六个月后的2018年5月，Angular团队发布了另一个版本的angular-angular6。该版本还具有许多新功能。 我将列出其中一些。

In this version, angular CLI got updated. New commands were introduced like ng update. To update your angular project dependencies to latest, you can use it. For instance:

在此版本中，更新了angular CLI。 引入了新命令，例如ng update。 要将角度项目依赖关系更新为最新，可以使用它。 例如：

ng update @angular/core

ng更新@ angular / core

The other improvement that was done was in RxJS library called as RxJS6. The two important changes were :

所做的另一项改进是在称为RxJS6的RxJS库中。 两个重要的更改是：

1. RxJS6 introduced new internal package structure.
   RxJS6引入了新的内部包结构。
2. Usage of operators.
   使用运算符。

New internal package structure involves changes in the way of importing packages. Instead of related import, we can use single import in this. For instance :

新的内部软件包结构涉及到导入软件包的方式的更改。 代替相关的导入，我们可以在此使用单个导入。 例如 ：

import {Observable} from ‘rxjs/Observable’;

从“ rxjs / Observable”导入{Observable}；

import {Subject} from ‘rxjs/Subject’;

从'rxjs / Subject'导入{Subject};

import ‘rxjs/add/operator/map’;

导入'rxjs / add / operator / map';

Now, with rxjs6 :

现在，使用rxjs6：

import {Observable, Subject} from ‘rxjs’;

从'rxjs'导入{Observable，Subject};

import {map} from ’rxjs/operators’;

从“ rxjs / operators”导入{map}；

Operators usage are also changed in angular 6. For instance :

操作员的用法也更改为角度6。例如：

Old version:

旧版：

import ‘rxjs/add/operator/map’;

导入'rxjs / add / operator / map';

this.http.get(url).map((response)=>response.json)

this.http.get(URL).map((response)=> response.json)

New version:

新版本：

import {map} from ’rxjs/operators’;

从“ rxjs / operators”导入{map}；

this.http.get(url).pipe(map((data)=>data*2)

this.http.get(URL).pipe(map((data)=> data * 2)

I hope you got the changes which is done in RxJS library.

我希望您能在RxJS库中完成更改。

Another change is — angular-cli.json is replaced with angular.json. This file defines the configuration of the project like styles, scripts, testing, build process and so on. In angular.json, more options for configuration are added like multiple projects configuration can be done.

另一个更改是—用angular.json替换了angular-cli.json。 该文件定义了项目的配置，如样式，脚本，测试，构建过程等。 在angular.json中，添加了更多的配置选项，例如可以完成多个项目的配置。

The other improvements are — <ng-template> is now available instead of <template>. There is change in the way of making services available for use like in previous version, if we want to make service available in entire application or in specific component- we have to provide it in provider array but in this version, in service file itself there is ‘providedIn’ metadata that is available for it. You can specify there the availability of services. By default, it makes service available at root level.

其他改进是-现在可以使用<ng-template>代替<template>。 与上一版本一样，使服务可用的方式也有所变化，如果我们要使服务在整个应用程序或特定组件中可用，我们必须在提供程序数组中提供它，但在此版本中，必须在服务文件本身中提供是可用的'providedIn'元数据。 您可以在那里指定服务的可用性。 默认情况下，它使服务在根级别可用。

Another beauty that is added is an ‘angular element’ package. This package allows developers to use your angular component in another environment (non-angular environment) like Vue.js. It’s another interesting feature that makes you to use your angular component in other environment

添加的另一个优点是“角度元素”包。 此软件包允许开发人员在Vue.js等其他环境(非角度环境)中使用您的角度组件。 这是另一个有趣的功能，可让您在其他环境中使用角度分量

This is all about the features of angular 6 which I learnt. Now the last version’s feature I will discuss which is — Angular 7

这就是我所学到的角度6的所有功能。 现在，我将讨论最后一个版本的功能-Angular 7

Angular 7 — 2018年10月 (Angular 7 — October 2018)

In October 2018, another version with more beauty came into the market.

2018年10月，另一个具有更多美感的版本上市。

The features that were added were CLI prompts, virtual scroll, drag and drop and again bundling size reduction. In CLI prompts, angular-cli asks you about options like when you make new application using ng new application-name. CLI asks you whether you want to add routing file or not and so on. There is also budget property added in angular.json in which you can specify your maximum and minimum budget size value.

添加的功能包括CLI提示，虚拟滚动，拖放以及捆绑大小减小。 在CLI提示中，angular-cli会询问您有关选项的信息，例如使用ng new application-name制作新应用程序时。 CLI询问您是否要添加路由文件等等。 在angular.json中还添加了budget属性，您可以在其中指定最大和最小预算大小值。

This is all about feature of angular 7. I know I have not stated all other features of angular 7 because I have not gone into those features.Hence, not comfortable in talking about those. We also know that Angular 8 version is released, but due to the same reason of not going into the features of angular 8, I have not written about it.

这全部是有关角度7的功能的。我知道我没有说明角度7的所有其他功能，因为我没有涉及这些功能。因此，不便谈论这些。 我们也知道已经发布了Angular 8版本，但是由于不使用Angular 8功能的相同原因，我没有写过它。

Note to my readers: I may have left many features, but tried my best to write about the features of different versions in short (It’s not possible to list down all the features but ya I tried whatever features I read in my journey) but I would love if my readers can comment about those features which they found in their learning journey.

读者注意：我可能已经留下了许多功能，但总之想尽一切办法写出不同版本的功能(不可能列出所有功能，但是我尝试了我在旅途中阅读的所有功能)，但是我如果我的读者可以评论他们在学习过程中发现的那些功能，我将不胜感激。

Thanks for reading.

谢谢阅读。

翻译自: https://www.freecodecamp.org/news/angular-a-journey-into-one-of-the-most-popular-front-end-tools-in-todays-job-market/

前端 angular