Angular 2 - Modules

Modules are used in Angular JS to put logical boundaries in your application. Hence, instead of coding everything into one application, you can instead build everything into separate modules to separate the functionality of your application. 

The following code will be present in the app.module.ts file.

import { NgModule }      from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser';  
import { AppComponent }  from './app.component';  

@NgModule ({ 
   imports:      [ BrowserModule ], 
   declarations: [ AppComponent ], 
   bootstrap:    [ AppComponent ] 
}) 
export class AppModule { } 

Let’s go through each line of the code in detail.

• The import statement is used to import functionality from the existing modules. Thus, the first 3 statements are used to import the NgModule, BrowserModule and AppComponent modules into this module.
• The NgModule decorator is used to later on define the imports, declarations, and bootstrapping options.
• The BrowserModule is required by default for any web based angular application.
• The bootstrap option tells Angular which Component to bootstrap in the application.

A module is made up of the following parts −

• Bootstrap array − This is used to tell Angular JS which components need to be loaded so that its functionality can be accessed in the application. Once you include the component in the bootstrap array, you need to declare them so that they can be used across other components in the Angular JS application.
• Export array − This is used to export components, directives, and pipes which can then be used in other modules.
• Import array − Just like the export array, the import array can be used to import the functionality from other Angular JS modules.

Angular 2 - Environment

To start working with Angular 2, you need to get the following key components installed.

• Npm − This is known as the node package manager that is used to work with the open source repositories. Angular JS as a framework has dependencies on other components. And npm can be used to download these dependencies and attach them to your project.
• Git − This is the source code software that can be used to get the sample application from the github angular site.
• Editor − There are many editors that can be used for Angular JS development such as Visual Studio code and WebStorm. In our tutorial, we will use Visual Studio code which comes free of cost from Microsoft.

Angular 2 Tutorial

Angular 2 is an open source JavaScript framework to build web applications in HTML and JavaScript.

Features of Angular 2

Following are the key features of Angular 2 −

• Components − The earlier version of Angular had a focus of Controllers but now has changed the focus to having components over controllers. Components help to build the applications into many modules. This helps in better maintaining the application over a period of time.
• TypeScript − The newer version of Angular is based on TypeScript. This is a superset of JavaScript and is maintained by Microsoft.
• Services − Services are a set of code that can be shared by different components of an application. So for example if you had a data component that picked data from a database, you could have it as a shared service that could be used across multiple applications.

In addition, Angular 2 has better event-handling capabilities, powerful templates, and better support for mobile devices.

Components of Angular 2

Angular 2 has the following components −

• Modules − This is used to break up the application into logical pieces of code. Each piece of code or module is designed to perform a single task.
• Component − This can be used to bring the modules together.
• Templates − This is used to define the views of an Angular JS application.
• Metadata − This can be used to add more data to an Angular JS class.
• Service − This is used to create components which can be shared across the entire application.

https://angular.io/

What is NPM?

npm is a NodeJS package manager. As its name would imply, you can use it toinstall node programs. Also, if you use it in development, it makes it easier to specify and link dependencies.