Exploring Angular 2 features

If you are reading this article and wants to learn Angular 2 then you as reader should be familiar with the basics of web development like HTML and knowing basics of JavaScript would be an added advantage. Since the Angular framework is based and built upon the JavaScript framework, it becomes quiet easy for the learner to understand Angular 2 or Angular 4 if they know JavaScript.

Explaining JavaScript

JavaScript is typically an object-based scripting language which is lightweight and works perfectly well even on the cross-platform. JavaScript is a solution for client side dynamic pages.

One more point on JavaScript is that it is not compiled but it gets translated. The JavaScript Translator is itself embedded within browser which is responsible to translate the JavaScript code.

Explaining Angular 2

Angular 2 is Google backed-up initiative which is completely free open source JavaScript framework in order to build web applications in HTML and JavaScript. This JavaScript framework aimed and used to overcome hurdles encountered while working with Single Page applications. It makes easier binding of code between JavaScript objects and HTML UI elements.

New features of Angular 2

In Angular 2 here are the below discussion of new key features introduced.

1) Components in and Controllers out: Earlier version of Angular i.e. Angular or Angular 1.x worked in project using Controllers now in Angular 2 its work around changed to Components. In real sense, Controllers still exist as one part of what we are calling a Component. The Component is composed and has a View and a Controller. The View is what we have HTML template while Controller in actual the JavaScript behaviour. There is no need of separate API registration for the controller or other of the non-standard APIs like Angular 1.x, in Angular 2.0 we just need to create a simple class with some of the annotations. Using this approach in Angular 2 it helps to build the project applications into many different modules. And with that it becomes easy in maintaining the project over a period of time. Other components of Angular 2 are as below: -

Modules

• Modules – It breaks project into logical pieces of code called Module and each of them helps to perform as a single task. Module is made up of the following parts: -
• Bootstrap array − It tells Angular 2 which components need to be loaded so that its functionality can be accessed in the application. Once we load the component in the bootstrap array, we need to declare them so that they can be used across other components in the Angular 2 or Angular 4 project application.
• Export array – It is used to export components, directives and pipes so that it can then be used in other modules.
• Import array − It is used to import the functionality from other Angular modules.

Templates

• Templates – Using this we can define the views of an Angular 2 or Angular 4 application. There are two ways to define Templates in Angular 2. One is inline template as shown below

template: " 
   <div>
      <h1>{{AppTitle}}</h1> 
      <div>Learn Angular 2 Template</div> 
   </div> 
"

and other way is by using the templateURL command

templateURL:
sampleviewname.component.html

sampleviewname - This is the name of the app component module. After the sampleviewname, the component needs to be added to the file name.

Directive - A directive is typically a custom HTML which is used that only intends to extend the strength of HTML. Angular 2 has the following named directive which gets called as part of the "BrowserModule" module. There are three types of directives: -

• Component Directive - Can Create a complete custom component which is composed of a View and a Controller it enables to use it as a custom HTML element. While we have router which can map routes to the Components.
• Decorator Directive - It nicely does the decoration of an existing HTML element with additive behavior. The best example we have is "ng-show".
• Template Directive - Helps to Transforms HTML into a reusable template. Then the author of directive can handle it to when and how the template gets initialized and inserted into the DOM. Examples for it is to include "ng-if" and "ng-repeat".
  • Ngif :- The ngif basically is used to add elements to the HTML code if it evaluates to true, else it will not add the elements to the HTML code.
  • ngFor :- The ngFor is used to elements based on the condition of the For loop.

Metadata - It is data of data which can be used to add additional data to Angular 2 or Angular 4 class. Metadata helps us in decorating class so that it gets configured to achieve the expected behavior of the class. Following are the different parts for Metadata.

• Annotations - These are decorators which works at the class level.
• Parameters - These are set by the decorators in order it get worked at constructor level.

2) TypeScript writes JavaScript - As we know Angular 2 works behind with JavaScript. So now how to learn Angular 2 when you do not know write in JavaScript. Here TypeScript plays a vital role where you write simple program and backend it automatically gets converted to JavaScript i.e. (.ts) file is converted to (.js). TypeScript is a superset of JavaScript and is developed by Microsoft.

3) Services - They are sets of code which can be shared by different Components of an Angular 2 application. So if we have data component which gets data from a database this can be shared as service so that it could be consumed when required by others.

Other important features of Angular 2 are it has new improved better event-handling capabilities, powerful templates and full-fledged support for mobile devices.

Thanks for reading this article based on Angular 2 features. Down below we have link of one nice startup video based on Angular 2 from project series must recommended to view if you wish to learn Angular 2 practically: -