Talking about the difference between ANGULAR2 and Angularjs

Source: Internet
Author: User

Hello everyone, today to introduce you to the angular, I believe that the front-end of the small partners are aware of Angular's name, Angularjs since 2012 release has been widely concerned about. 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.
first, the plight of 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.
Ii. 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.
like 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 the page loading process when the app starts to start.
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 at the same time all the components are bound, and the rendering does not implement a page after the server is rendered, and then send to the client, Angular will parse it, and then the parsed page into the DOM, so as to avoid 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:
In the link method, by location injection, by name injection in the direct definition, by name in the Controller method, and so on.
what Angular 2 will do, and there is only one dependency injection mechanism in Angular 2: 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: It is easier to infer that, in the current version of Angular, we sometimes have to infer framework internals for specific usage scenarios, such as the need to infer the application of event initialization and digest looping: There is no summary loop End event in Angular 1 (see why), Because this kind of event may lead to more changes so that the digest cycle continues, we must infer when to invoke $scope. Apply or $cope. Digest, which is not always easy, sometimes we have to call $timeoutto let angular end the digest loop, when Do some things when 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 the initial architectural constraints (such as bindings and templating mechanisms), performance improvements have 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 so on.
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.