What’s new in AngularJS 2?Category: AngularJS 2 Training, General Posted:Dec 27, 2016 By: Shruthi A
Angular JS, a modern front-end framework, which is designed for creating SPA (Single Page Application) rapidly. Angular 2 includes some advanced features than the Angular 1. Angular 2 is a dynamic and innovative update from the Angular 1 framework. This version comes with an improved performance and it can run faster than its previous version. Angular JS 2 application will have a major focus to create mobile applications. This framework mainly targets the modern browsers and ES6. When compared to Angular 1, Angular 2 is simpler to access.
Controllers and scope inheritance are the major things that make the developers insane. There are no more controllers and scope inheritance in Angular 2; hence, it is easier to understand the directives API. Angular 2 comes with the elimination of more than 30 directives, which are not required any more. It simplifies the approach of consuming directives. If you are considering a Java training, and then it is essential to learn what the new things in Angular 2 are.
The following are some of the new features in the Angular 2:
Template & Data Binding
Templates and Data Binding worked simultaneously at the time of application development and was lacking about to dynamic loading. Angular 2 has solved this issue by allowing the developers to insert new controllers and directives. In addition, Angular 2 made the template compilation process asynchronous. Decorators, templates, and components are the important directives that are available in this new framework.
Advanced Routing Solutions
The router, which is used in the Angular 1 was designed to manage only a few cases. The latest frameworks comes with multiple features; hence requires an adequate router. Angular 2 requires the routers, which has been restricted with a perfect compilation of available features like optional convention over config, hassle free JSON-based route configuration, parameterized, static & splat route pattern, query string support, URL resolver and much more with new features such as child router and screen activator. The routers in the new framework are extensible. The following is some of the new features:
- Use Push State
- Navigation Model
- Document Title Updates
- Overpowered outlets
- Location Service
- History Manipulation
- 404 Route Handling
Enhanced Dependency Injection
Dependency injection is nothing but a software design config, which allows the object to pass its dependencies instead of creating them itself. It is one of the main factors, which differentiate the Angular framework from its competitors. It is most popular in terms of component isolation and modular development.
AtScript offers tools for linking metadata with its functions. This enables the object instance construction by offering the essential details to the DI library that will evaluate for associated metadata at the time of creating a class instance or calling a function. By providing an Inject annotation, overriding parameter data will be simple in Angular 2.
In this latest framework, a child injector can inherit the entire service from its parent with the feature of overriding the service. Based on the requirement, it is possible to call and override various kinds of objects in various scopes.
The enhanced DI library will offer instance scope control that will become more commanding when used with user own scope identifiers and child injectors.
A Mobile Toolkit
The mobile toolkit offers entire tools as well as techniques to create high-performance mobile applications using the Angular Mobile Toolkit and Angular CLI. Web applications, which built with the mobile toolkit, have the capability to load on any kinds of devices. The apps can have the benefit of the shareability, searchability, and no-installation-required features.
CLI (Command Line Interface)
The new CLI in Angular 2 can develop components, services, pipes and routes through commands. The new command line interface can develop simple test shells.
There are two types of directives in Angular 2. They are Attribute directives and structural directives.
This directive alters the behavior and appearance of the Dom element. Generally, these directives appear as traditional HTML attributes available in templates. For example, an ngModel directive that is utilized in two-way binding. The following are some other attribute directives:
- NgStyle – According to component state, dynamic styles can be fixed by using this directive. Several inline styles can be fixed instantaneously by binding to this directive.
- NgSwitch – If you want to show an element tree with many children, you can utilize the NgSwitch directive.
- NGClass – this attribute directive controls the element’s appearance by appending as well as removing cascading style sheet classes dynamically.
This directive changes the DOM layout by appending, removing and replacing its elements. The examples of this directive are:
- Nglf – this directive recreates or removes a portion of DOM tree based on the expression evaluation.
- NgFor : It is a repeater directive, which personalizes data display.
You May also Like to read : Top 15 websites and Applications built with AngularJS