Introduction To Angular 2 - Day One

AngularJS is the world’s most popular JavaScript framework, which is used to create SPA (Single Page Applications). AngularJS extends HTML with new attributes. AngularJS allows us to write applications in a clean Model-View-Controller way. Google started the work on Angular in 2009 but officially released it in 2012. Features that make AngularJS 1.0 the most powerful and popular JavaScript framework are given below.

• AngularJS MVC's (Model View Controller) approach to develop the RIA (Rich Internet Application).
• Applications written in AngularJS are cross browser compatible, meaning AngularJS automatically runs JavaScript files for each browser without any error.
• Unit testing can easily be performed for AngularJS Applications.
• Controller and $scope are removed from AngularJS2.0 replaced by directives.
• AngularjS 2.0 comes with an improved dependency Injection

When everything was going so well, then why did Google introduce a completely new version of AngularJS(2.0)? Some reasons are given below:

• AngularJS 1.0 was not compatible with the mobile applications. AngularJS 1.0 has poor performances and takes more time loading mobile Applications.
• AngularJS 1.0 was modules based but AngularJS 2.0 is component based and some modules are removed from AngularJS 2.0 which increases its performances.
• AngularJS 1.0 was the target for the ECMAScript 5.0 and AngularJS 2.0 is targeted for ECMAScript 6.0, which means in AngularJS 1.0, everything was defined as a prototype but in AngularJS 2.0, everything is defined as the objects.
• AngularJS 2.0 is fully written in TypeScript, which is an extension of JavaScript. TypeScript enables us to write JavaScript code in an Object Oriented Programming (OOPS) manner.

After a brief introduction to AngularJS 2.0 and the differences betwen AngularJS 1.0 and AngularJS 2.0, now we set up our first project for AngularJS 2.0. Follow the steps given below to set up an AngularJS 2.0 project.

Step 1

Install Node.js

 

First, go to the official Website of Node.js and download the latest version of Node.js. We require Node.js because it will provide a Server for our Application to run and we need Angular 2 CLI for setting our AngularJS 2.0 Application and downloading the required files. Thus, for the installation of Angular 2 CLI, we need Node.js. Thus, first download and install Node.js.

Step 2

Install Angular CLI

Angular CLI(Command Line Interface) is a command line interface to scaffold and build Angular apps, using Node.js style modules. Not only does it provide you with a scalable project structure,  it handles all common tedious tasks for you out of the box. Write “npm install –g angular-cli” in your command prompt Window and press enter. It will take little time and then install the required files for Angular CLI.

Step 3

Create Angular app

Write “ng new demo-app” at the command prompt Window and press enter. In this command, “ng” indicates to Angular CLI and “new” keyword defines a new project and the name is “demo-app”. When you press enter Angular CLI installs the many files and dependencies.

After successful execution of the command, now you find that a project with “demo-app” name has been created and contains the structure given below.

Step 4

Start the Server

Now, navigate to “demo-app” folder and write the “ng serve” command. This command runs an Angular Server and watch for the changes, if you make any changes, it will automatically show the changes on the Browser.

Step 5

Run URL in the Browser.

Now, open any Browser, paste “localhost4200/” URL and press enter, if everything works correctly, you will get the Window given below.

If you see the result in your Browser, then Congrats. Your first AngularJS 2 app is created and running successfully. 

Structure of Project

After successful setup, run AngularJS project. Now, let’s understand the structure of the project. When you open this project in any IDE , you find it and it contains some folders like e2e,node_modules, src and files like editorconfig, karma.confg.js, packages.json etc. Now, we will learn some brief information about these files and the folder.

E2E

Protractor, formally known as the E2E testing framework, is an open source functional automation framework, which is designed specifically for AngularJS Web Applications. Protractor runs tests against your Application runs in a real Browser, and interacts with it as a user would.

node_modules

This folder contains all the dependencies and the modules for our projects.

App

This folder contains the most important files of our projects. In this folder, we place all our components, which we will use during the development.

Assets

 In this folder, we can save our images, style sheets, JavaScript and third party library files.

Environments

AngularJS 2 makes the development and release easy compared to other JavaScript frameworks by providing the environment setup functionality. In this folder, we put our environment related settings.

Index.html

This is the page that our Server launches, when the Application is run.

Main.ts

This file is responsible for starting our application. This bootstraps AngularJS Application.

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.

• Imports- Define the modules that we want to import in our module.
• Providers- It is used to define the Services that are accessible in all the applications.
• Exports- Defines the name for the module, using which we can use this module.
• Bootstrap- It defines the main component to be Bootstrap in main.ts file.

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

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.