Introduction To Angular 2 - Day One

Polyfills.js

This file includes polyfills, which are required by Angular. You can add your own extra polyfills to this file. Polyfills allow us to add the functionality which we require during the development, like map, array, and date functionality.

Test.ts

This file contains the code related to unit testing. This file loads the karma to start the unit testing.

Tsconfig.js

This is the configuration file of the TypeScript. This file contains the library name, target version, base URL and other configuration information.

Package.json

This file contains all the packages and dependencies, which are used in our project with their version. This file also defines the version and the name of our Application.

Architecture of Angular 2

Angular 2 is not only the next or advanced version of Angular 1, it is fully redesigned and rewritten. Thus, the architecture of Angular 2 is completely different from Angular 1. Let’s understand the architecture of Angular 2.0

Image Source google

We can divide Angular 2 architecture given above into the parts given below.

• Modules
• Component
• Metadata
• Template
• Data Binding
• Services
• Directives
• Dependency Injection

Modules

We can describe the modules as a block of code, which are used to perform a single task. We can export the module in the form of class. Angular applications must have a root module and one or more featured module. Angular apps are called module and build our application, using the other modules.

You can find your module file in “src/app/app.modules.ts” file.

Angular module is a class, which is decorated with @NgModule. Let’s understand the code of the file given above.

On the top of the page, you can see “import { BrowserModule } from '@angular/platform-browser';” code of line. These lines describe the modules, which we import into our root module and also define the path, where these modules exists. In the code given above, we extract the BrowserModule, NgModule, FormsModule, HttpModule, AppComponent. You can find all of the module sin “node_modules/@angular” folder.

Declarations

It describes the view class for the module. Module can have three type of view components, directives, and pipes. In our module, we describe the “AppComponent”, as views for our modules.

When you right click on “AppComponent” and select the “Peek Definition” option, it will show you the view code for the module.

Now, a question arises how Angular 2 is bootstrap?

After completion of DOM reading by the Browser, first the Main.ts file is loaded. In main.ts file, first we export the “app.module” file by the class name (AppModule), which we define in app.module and in the next step, call the bootstrapModule() function and pass the name of AppModule, and bootstrap the AppModule.

Components

Component is similar to a controller class with a template, which mainly deals with a view of the Application and the logic on the page.

We can see in the code component above, which contains three properties, the selector defines the way to implement this component in HTML pages. To use this selector, we need to describe the “app-root” Directive in our HTML page, as shown below.

templateUrl defines the file, which will replace to the content of <app-root> and styleUrls describes the style for the content.

Templates

Templates define HTML content for the component. for our “app.component” we have a template file named “app.component.html”. In this file, we can define the design for our component.

Let’s define some properties in AppComponent class of the component.

Now, we use these properties in “app.component.html” file, which is the template file for the component, and define HTML layout as shown below.

When you run or refresh the application, you will get the output given below.

Metadata defines the way to process a class. We can define the metadata by using decorator. Let’s see our component class. In this class, you can see that we used the “@Component”, which is metadata that defines this class has a component. This metadata is attached with TypeScript by the decorator. If the “Component” is not defined, then TypeScript treats this as a simple class.

Data binding

Data binding is used to bind the data between view and business logic. In Angular 2, we perform the data binding between the component and the templates. In Angular 2, we can perform data binding in four ways.

• Interpolation- Displays the component values within DIV tags.
• Property binding- Passes the property from the parents to the child property.
• Event binding- It fires when you click on the component method name.
• Two-Way binding- in this binding, we bind the property and the component event, using single notation by ngModel Directives.

Services- Services in Angular 2 are similar to Angular 1, the Services are used to share the data across the application. The Services are similar to JavaScript functions, which are used to perform some specific tasks. A Service can have an object, functions and values.

Directives

Directives in Angular are used to extend HTML attributes and provide some special behaviors to HTML DOM elements. To create a Directive, we need to define the “@Directive” metadata to the class. In Angular 2, we have three types of the Directives, which are given below.

• Decorator Directive- Decorates the element, using additional behaviors for example ngModel.
• Template Directive- Converts HTML into reusable template.
• Component Directive- It is used to define Custom HTML element by using view and controller.

Dependency Injections

Dependency Injection is a mechanism to pass an object as a dependency in a different component. Using Dependency Injection, we can create reusable and testable components. The provider is a way to create the Services and register the providers along the injectors.

Conclusion

In this article, we had a brief introduction about Angular 2, its project structure, and architecture. In the next article, we will start to work with actual Angular 2 features. Thanks for reading this article.