Talking about the difference between ANGULAR2 and Angularjs

Brief introduction

Hello Everyone, today to introduce you Angular, I believe that the front-end of the small partners are aware of Angular's name, Angularjs since 2012, has been widely concerned by everyone. For the first time, he put forward the concept of two-way binding to everyone is refreshing, 2016 ANGULAR2 formally released, then angular2 what is there to look forward to the place, next talk about angular2 attractive place.

the dilemma of 1.1.1 Angularjs and the new features of Angular2

First of all, let's discuss some of the shortcomings of Angularjs:

1. The performance problem that has been criticized

By checking for data updates, the efficiency of the inspection is reduced as data grows. The page loading speed also slows down.

2, lag behind the current Web development concept (such as the development of component-type)

3, the support of the mobile phone is not too friendly

Since Angularjs was born in 09, it did not take into account the adaptation of the mobile phone, the first is the performance problem, the hardware resources of the mobile platform is far inferior to the computer platform.

New features of ANGULAR2:

1. Remove controller + $scope design, switch to component-type development. (Easier to understand and get started)

2. Better performance (faster rendering, higher change detection efficiency)

3. Priority for mobile application design (Angular mobile Toolkit)

4, more fit to the future standards (such as Es6/7, webcomponent)

"" " the core content is the component!

Upgradeadapter adapter: Because Angularjs does not have angular2 code up and down, the adapter adapter is introduced to load the new ANGULAR2 feature into the Angularjs template. Such an implementation does not have a destructive effect on the original code, the call can be used in a timely manner angular2 new features.

The difference between the two

1. From the mobile app development above analysis:

Angular 1.x focused on web development, did not involve mobile this aspect of content, fortunately later killed a way to bite Gold Ionic mobile app development framework, let angularjs1.x very good support for mobile development

Angular 2 target: Native mobile support –ios and Android

Angular 2 will have two layers, application layer and render layer. For example, a component can be decorated with a different @View decorator, which can take effect at run time depending on the operating environment.

As with React Native, Angular 2 supports:

One study, writing everywhere.

This means that when you create a native app, you can reuse the knowledge you learned when you created your web app. Although there are always some differences.

2. Provide support analysis from server-side rendering:

Support for server-side rendering is important for search engine optimization and user-perceived experience, and in a larger angular 1 application, even with a pre-defined cache module, we can clearly see when the app starts

When the page loads the process.

At this point it seems that this part of the ANGUALR2 is not very clear, but this idea may be reflected in the following aspects:

Start start, and all components are bound

and rendering is not implemented

A page after the server is rendered and then sent to the client

Angular will parse it, and then the parsed page will be injected into the DOM, thus avoiding the flicker effect.

3. From Dependency Injection analysis

In the world of angular 1, dependency injection is a technology leap forward in building multi-module applications, but in some extreme cases it is not possible to solve these problems without making some important changes.

Angular 1.x contains the object global pool

Angular 1 in one of the DI cases, there is only one object global pool per app. This means that if the primary route Loadsbackendservice we are directed to Route B, it is possible to defer loading other services specified to this route.

The problem is that we say we can delay loading a secondbackendservice, using a completely different implementation: This will rewrite the first one! There is currently no way to have two different implementations of two services in the same name, which prevents a safe way

Deferred loading is implemented from Angular 1.

Angular 1 will silently rewrite the module when they have the same name, which is a feature that allows the service to be simulated at the time of the test to replace the service layer, but if it happens that the same module is loaded two times the problem occurs.

Angular 1.x multi-Dependency injection mechanism

In Angular 1, we can use different methods for injection in multiple places:

By location injection in the link method

Injected by name in a direct definition

In the Controller method through the name, and so on.

Angular 2 What will be done in the

In Angular 2, there is only one dependency injection mechanism: injection through a type in the constructor.

Constructor (Keyutils:keyboardutils) {

This.keyutils = keyutils;

}

});

In fact, if there is only one mechanism, then it will become easier to learn. At the same time, this dependency injector is similar to the hierarchical structure, at different levels of the component tree, it is possible to implement different implementations of the same type.

If a component does not have a dependency defined, it proxies to the upper-level injector to find the dependency, and then go up. This allows Angular 2 to provide native lazy loading as possible

4. Analysis from the main objective

The main goal of Angular 2 is to create a web framework that is easy to use and works quickly. Let's see how this is achieved:

Objective: more easily inferred

In the current version of Angular, we are sometimes forced to infer a framework's internals for a particular usage scenario, such as the need to infer the application of event initialization and digest loops:

There is no summary loop End event in Angular 1 (see the reason), because this event may lead to more changes so that the digest cycle continues

We have to infer when to invoke $scope. Apply or $cope. Digest, and it's not always easy

Sometimes we have to call $timeoutto let angular end the digest loop and do something when the DOM is stable

Saying: angular1.x is obviously very successful, then, why do we have to turn violently to Angular2?

1. Limitations of performance

Angularjs was originally an internal tool for designers to quickly build HTML forms. Over time, various features are added to suit the development of applications in different scenarios. However, due to initial architectural constraints such as bindings and templates

Mechanism), the performance improvement has been very difficult.

2. Fast-changing Web

In terms of language, ECMASCRIPT6 's standards have been completed, which means that browsers will soon support new features such as modules, classes, lambda expressions, generator, and so on, which will significantly change the development experience of JavaScript.

In terms of development patterns, Web Components will also be implemented quickly. However, existing frameworks, including angular1.x support for Web Components, are not good enough.

3. Mobile

Think about 5 years ago ... The current computing model has changed dramatically, with phones and tablets everywhere. Angular1.x is not specifically optimized for mobile applications and lacks key features such as cached precompiled views, touch support, and more

。

4. Easy to use

It is believed that with the passage of time, the concise and vivid angular will certainly get very good development. At present I only self-taught angular, experience its advantages, to tell the truth, angular1.x too complex, learning curve is too steep, but after all, now the bootstrap is based on its hot abnormal ... For Angular2, personal feeling can wait for the version to stabilize, the document finished good again study.

Talking about the difference between ANGULAR2 and Angularjs