Aaron Zhang is a Google Angular Technology Promotion engineer

1. Background: Angular1.x and Angular2

In recent years, the development of Web development technology is changing with each passing day, and various frameworks emerge endlessly. Against this backdrop, In October 2010, Google first released its own Web development framework called AngularJS, or Angular, or NG for short.

Angular has attracted a lot of attention since its release, and many developers have embraced the concept of “two-way data binding” for the first time. Of course, there are plenty of reservations. However, Angular has a number of innovative concepts that have influenced the evolution of Web technologies. For example, quite a few Web frameworks on the market already support the concept of “data binding”, some one-way and some two-way, which shows how influential Angular is.

There are a lot of products inside Google that use Angular. There are a lot of companies in China that use Angular1.x to develop their own applications, including mobile apps, and there are a lot of industry giants.

Review images

In September 2014, at the NG-Europe conference, the Angular team publicly announced plans for a second major release, known as Angular2, as opposed to the previous version known as Angular 1.x.

Currently, Angular2 is in the final stages of preparation before the official release, and according to the schedule, the first official Release of Angular2 will be released at the end of this month (2016-09). Angular2 retains the original core design, but with significant changes in various syntax details compared to Angular 1.x.

Review images

Details can be found in section 3, “What are the major changes in Angular2?” In the explanation. On the whole, Angular2 is much simpler because it has only one core concept: radical “componentization.”

2. Every door frame has a core soul

Review images

When we talk about Spring, concepts like IOC and DI automatically Spring to mind. Obviously, “inversion of control” and “dependency injection” are at the heart of Spring.

      

When we talk about Hibernate or Mybatis, the first thing that comes to mind is ORM (Entity Relation Mapping), which solves the problem of data structure mapping between relational and OO models.

      

When we talk about jQuery, you think of DOM manipulation and the countless open source controls on the web. Obviously, DOM manipulation is the heart and soul of jQuery, shielding us from browser compatibility issues and providing a variety of UI controls for business development.

What comes to mind when we talk about Angular 1.x? Uh, wait a minute. It’s a little overwhelming. Sometimes nothing comes to mind. The biggest problem with Angular 1.x is that the concepts are too confusing to grasp.

Every successful framework has a core soul, and that core soul must address a pain point in actual development. Since it is the core soul, it is better to have and only one, otherwise it will bring great learning pressure to the user. Angular1.x is a bad example in this respect.

Because it has more features, among which the core four features are:

  • modular

  • MVC

  • Two-way data binding

  • instruction

If you add in trivial details like $scope, dirty value detection, dependency injection, routing, form validation, and so on, the whole thing feels so trivial that no core soul can control everything.

The Angular team is aware of this, and as a result, Angular2 simplified the overall conceptual model from the beginning of design. There’s only one core soul in Angular2: Components. all the other bits and pieces like services, routes, pipes are utils. Therefore, when using Angular2, developers can solve more than half of the problems by learning to use Coponent.

LESS is MORE.

3. What are the important changes to Angular2?

With the global Component concept in mind, let’s look at how Angular2 has changed compared to Angular 1.x.

Point 1: Angular2 deleted the concept of $scope

In Angular 1.x, $scope is a fairly powerful and scary thing, and often requires developers to manually call $apply() because dirty value detection does not detect changes to $scope in many callback scenarios. Typical scenarios are: event callbacks, setTimeout callbacks, Ajax callbacks, and so on. Angular2 responded to the community outcry by removing (or hiding) the concept of $scope so that developers no longer need to be aware of its existence. Additionally, Angular2 introduced zone.js underneath, so you don’t need to manually call $apply() to modify the data model in various callback functions.

Second: the ng-controller directive was deleted

This means that the Controller is no longer a standalone Component; it is incorporated into the Component. This is a very big evolution, because from a lot of practical experience, it’s almost impossible to reuse controllers in complex business logic. There is a similar approach in other similar front-end frameworks. For example, Backbone emphasizes the CONCEPT of MVC, but it does not define a single Controller class. Controller is also written in View.

Third point: The dirty value detection mechanism has greatly evolved

As we all know, two-way data binding works because Angular has a magical mechanism called dirty value detection. The dirty value detection mechanism in Angular 1.x is actually very inefficient, which is why people complain about binding too many, too deep objects. Angular2 evolved this mechanism significantly by introducing one-way binding and various detection strategies, such as checking once, dynamically generating dirty value detection code with the JIT, and so on. Without a doubt, with these tools, data binding efficiency is no longer an issue.

Fourth point: set routine by

Angular 1.x has a nasty problem. The built-in routing mechanism does not support nesting, which forces developers to rely on third-party UI-Router libraries for routine development. Angular2 doesn’t have this problem because Angular2 routes are component-based and naturally support nesting.

Fifth: dependency injection mechanism evolution

Angular2 dependency injection writing is very similar to Annotations in Java. If you are familiar with Spring annotations, there is almost no learning cost to using Angular2 dependency injection. Of course, there is a conceptual difference. Angular2 is called a Decorator, which is closer to the Python concept of a Decorator.

Sixth: The framework as a whole is based on TypeScript development

This was the biggest change, and there was a lot of concern about whether it would be a big learning cost, but it wasn’t. Because TypeScript’s syntax is so similar to Java or C#, it’s almost an easy language to learn for developers coming from the back end.

There’s another important aspect to note: TypeScript is a language developed by Microsoft, and you can imagine how powerful a combination of Google and Microsoft can be. Google and Microsoft are significant browser vendors in their own right, and Chrome and IE together account for more than half of the market share. If both browsers build TypeScript engines, It’s clear that TypeScript and Angular have a bright future. This advantage is a large number of similar technical framework simply cannot reach, so we need to consider these circumstances in the process of technology selection to make a rational decision.

Angular 1.x and Angular2 both come with UI control libraries

Both versions of the UI control library implement Material Design, a UI Design principle developed by Google with the ultimate goal of: Use a set of UI design specifications for a wide variety of devices, such as desktops, tablets, large-screen TVS, in-car systems, and even the Watch, to ensure a consistent user experience.

See the following link for Material Design implementation for Angular 1.x:

https://github.com/angular/material.

The Material Design library for Angular2 is currently in alpha state and is expected to release its first official version by the end of this month (2016-09). For more details, please refer to:

https://github.com/angular/material2.

In modern Web application development, especially in enterprise application scenario, UI control library is an indispensable part. No matter how futuristic the design concept of the framework is, we must eventually face real business development, and the biggest reality is that it is impossible for every enterprise or team to maintain their own library of UI components.

We know that it takes a lot of time and money to develop a library of UI components that are perfectly compatible with screens, and it’s a tedious task to maintain such a system for a long time. So, Angular provides a free UI component library by default that many of the existing technologies can’t match.

4. Where do I start learning Angular2?

Review images

Ok, Angular2 is powerful and I really want to get my hands on it, so where do I start?

We’ll start with a series of new projects on Github, and the Angular team has written many entry-level examples. In these projects, there are many configuration files that are not correct due to problems with the runtime environment, and many developers download and fail to run them. I sorted out and modified some configuration errors based on the original project, in order to reduce the learning cost of domestic developers, please refer to the following link:

1. Based on the official tutorial instance on Angular. IO:

https://github.com/damoqiongqiu/angular-tutorial-damoqiongqiu

2. Angular2 seed project, modified and added a few things:

https://github.com/damoqiongqiu/angular2-seed-cn

3. Learn Webpack from scratch

There are a number of front-end projects that use WebPack as a build tool, including Angular2. Lesson01 to Lesson06, this project is divided into six branches, from easy to difficult. Please refer to the following links for details:

https://github.com/damoqiongqiu/learn-webpack

5. To summarize

Starting this month, we’ll be Posting regular Angular tech shares here, with at least one detailed technical article per month.

As an Angular tech promotion engineer at Google, I’m happy to interact with you regularly and welcome your feedback and suggestions on Angular. If you have any questions about Angular, please leave a comment on our official Angular account or send an email to [email protected], where We collect feedback from Chinese developers.

To view the official Chinese version of Angular2, click “Read original” or visit:

https://www.angular.cn

Review images