Learn Angular 2 Step by Step

Angular 2

Java-script binding framework which allow you to develop the application for any platform like web, SPA mobile, desktop-installed apps across Mac, Windows. The framework is based on MVW (Model, View, Whatever), which is computer programming paradigm adopted by the Angular-JS framework. I started learning about AngularJS based on MVC (or rather one of its client-side variants), but over time it now closer to MVVM. The main goal of framework is to separate the presentation logic from the business logic where JavaScript holds the model and logic, and html the presentation layer. Rather than waste time arguing about MV* I hereby declare AngularJS to be MVW framework - Model-View-Whatever. Where Whatever stands for "whatever works for you".

MVW

Prerequisite for angular 2 

Angular 2 is not depend of Angular 1.x so it is not compulsory to know about 1.x before start with angular 2. The knowledge of HTML5, CSS3 and JavaScript is enough to learn Angular2. If you have just started you journey of application development you can learn the above skills for my favorite site HERE

Once you have finished the basic of JavaScript, there are certain advance topics to be required to complete before start with Angular2.js. but you have already learned or aware about the purpose of below technology then you can directly jump and start Angular 2 Lab-1.

Node.js

Node.js is an open-source, JavaScript runtime built on Chrome's V8 JavaScript engine for executing JavaScript code server-side. Click to Learn Node.js details about node.js

Type Script

Typescript is a free and open-source programming language developed and maintained by Microsoft. It is a strict syntactical super set of JavaScript, and adds optional static typing to the language. Typescript is awesome, I highly recommend learning this thing. Please follow my post Learn TypeScript in 30 min for more details about TypeScript.

CommonJs

CommonJs is one of the specification of module format. Please follow my post 
CommonJs - SystemJs for more details about CommonJs.


SystemJs
Dynamic module Loader , Load Module on demand. Please follow my post 
CommonJs - SystemJs for more details about SystemJs.

Now the time to start with angular 2.0, The structure of angular 2.0 is different from angular 1.x, I will not talk about on angular 1.x structure, we will focus here on angular 2.0.  my favorite IDE is visual studio. I hope you would have VS 2015 IDE, if not please go ahead install the VS 2015 community addition, make sure you should have update 3. Microsoft has already released 2017, you can also use VS 2017, it is your choice. Here I am going to demonstrate using VS 2015 update 3.

Download visual studio community addition 

VS2015 https://imagine.microsoft.com/en-us/Catalog/Product/101
VS2017 https://www.visualstudio.com/vs/older-downloads/

We would need startup file for angular 2 application, Please download from here

As we have discussed angular 2 follow MVW architecture pattern so we need following component for any angular 2 application.

1. Model  : - Business logic of application.

2. View: - Display the model object in form of html.

3. Whatever fit for you: - This bind the business logic to UI. Which is called Component in angular 2.

4. Modules grouped the logically Components.

Let us open your visual studio, under the web category select ASP.NET web application. you can give application name “Angular2Lab-1”

Select Project type “Empty” then click on “OK” button.

Please add the startup file in project.

I Hope you would be ready with same folder structure and have added four file, please download the startup file from here.

Let have a quick look on startup files.

package.json:- This file has the list of all the Angular 2 modules which we need in angular 2 application. You would need to run the node command to install the module in your project directory.

Open Node command prompt and navigate to your root folder of project directory.

Cd “root folder of your project directory”

root folder of your project directory > npm install 

Once you have competed the installation then a node_modules folder will be created in project directory, which should have all dependency module files.

System.config.js: - This is configuration file for SystemJS, the file's job is to tell System.js where to look for specific packages. SystemJS is modular loader which loads the module dynamically.


tsconfig.json:-  This file define the configuration setting of type script , this file specified the compiler options required to compile the project.

typings.json:- we are going to use type script for development but some of the old JS frameworks cannot be consumed in typescript. For those frameworks, we need to define the typing.

Create Model

I have added new class Student which is having three property. studentName , studentCode and StudentFee. Below is the type script syntax to create a new class, I hope you might be gone through my tutorial Learn Typescript in 30 min. if not please go through it will help you to understand Type-Script syntax.

//Stundent.ts
export class Student {

     studentName: string = "";

     studentCode: string = "";

     studentFee: number = 0;

}


Create Component

Component binds the business Model with UI. Under the Component folder, please create a new file “StudentComponent.ts”

//StundentComponent.ts

    //Reference core componet of angular 2.

    import {Component} from "@angular/core"

    //Reference of Student Model class.

    import {Student} from "../Model/Student"

    //Component MetaData Attribute.

    @Component({

        selector: "student-ui",

        templateUrl: "../Student.html",

        //styles: ["h1{color:red}"],

        styleUrls: ["../Css/Student.css"]

    })

    //StudentComponent class to bind the Student Model with UI.

    export class StudentComponent {

        studentobj: Student = new Student();

        public applymyclass: boolean = true;

        public applystyle: boolean = false;

        public showstudent:boolean = true;

        public students: any = [];

     

        onclick() {

            alert("you hv entered the following value for student" +

                "\n student name :" + this.studentobj.studentName);

            var formstudent: Student = new Student();

            formstudent.studentName = this.studentobj.studentName;

            formstudent.studentCode = this.studentobj.studentCode;

            formstudent.studentFee = this.studentobj.studentFee;

            this.students.push(formstudent);

        }

        //Attribute Directive

        public applyclass = true;

        public fontstyle = "italic";

        //Pipes

        public title = "INDIA";

        public todayDate = new Date();

        public amout = 100;

    }

Let Understand the code of StudentComponent.ts.

    //Reference core componet of angular 2.

    import {Component} from "@angular/core"

    //Reference of Student Model class.

    import {Student} from "../Model/Student"

In first line of code we have loaded angular 2 modules which is require for application. 
in second line of code we have added reference of Student Model which will be resolved by SystemJS at runtime.

You might be knowing that why we have added “../” , this denote to reaching one level up in folder structure and take reference of file. same way “./” , this basically use to reference the file in same directory.

Then we have

@Component({

        selector: "student-ui",

        templateUrl: "../Student.html",

        //styles: ["h1{color:red}"],

        styleUrls: ["../Css/Student.css"]

    })

This is “Component MetaData Attribute”. this is similar of C# class attribute to add additional behavior on class. This attribute specifies binding between component and html, it starts with “@Component” which has a “templateUrl” property which specifies the HTML UI with which the component class is tied up with.

Then we have studentComponent class

   export class StudentComponent {

                                                             .
                                                                 .
                                                                 .
                                        }



which basically used to bind the Student Model and UI, here we have exposed the Model object which is tide up with UI and add event handler which will triggered form UI component.

Create Student UI

//Student.html

<div class="student" >

    <h4>I am student component body </h4>

    <div class="row">

        <div class="column" >Student Name:</div>

        <div class="column"><input type="text"  [(ngModel)]="studentobj.studentName" /></div>

    </div>

    <div class="row">

        <div class="column">Student Code:</div>

        <div class="column"><input type="text"  [(ngModel)]="studentobj.studentCode" /></div>

    </div>

    <div class="row">

        <div [class.column]="applymyclass">Student Amount:</div>

        <div class="column"><input type="text"  [(ngModel)]="studentobj.studentFee" /></div>

    </div>

    <div class="row">

        <input type="button" value="Submit" [style.background-color]="applystyle?'blue':'green'" (click)="onclick()"/>

    </div>

   <!-- {{studentobj.studentFee}}

    {{applymyclass}}

    {{applystyle}}-->

    <!--Structural Directive-->

    <table *ngIf="showstudent">

        <tr *ngFor="let student of students" [ngSwitch]="student.studentFee">

            {{student.studentFee}}

            <td>{{student.studentName}}</td>

            <td>{{student.studentCode}}</td>

            <td *ngSwitchCase="'1000'" style="background-color:red">{{student.studentFee}}</td>   

            <td *ngSwitchCase="'500'" style="background-color:yellow">{{student.studentFee}}</td>

            <td *ngSwitchCase="'100'" style="background-color:green">{{student.studentFee}}</td>

            <td *ngSwitchDefault>{{student.studentFee}}</td>

        </tr>

    </table>

    <!--Attribute Directive-->

    <p [ngClass]="{mytestclass:applyclass}" [ngStyle]="{'font-style':fontstyle}">This Attribute Directive Test</p>

    <!--Pipe-->

    <p>your country: {{title | lowercase}}</p>

    <p>your country: {{title | uppercase}}</p>

    <p>your country: {{title | slice:'1':'2'}}</p>

    <p>Today Date: {{todayDate | date:fullDate}}</p>

    <p>Amount : {{amout | currency:'USD':true}}</p>

</div>

You will see, the binding notation is different from angular 1.x . basically, we have three kind of binding in Angular 2. 

1. Binding from Model to UI (One way).  This denotes with [ ]

2. Binding from UI to Model (One way).  This denotes with ( )

3. Binding from UI to Model and Model to UI (Two way. This denote with [( )]

For directive we follow {ngDirectiveName } instead of ng-DirectiveName , you can see I have used to ngClass and ngStyle to apply the CSS dynamically.

Add CSS File

Add css file under Css folder

//Student.css

body {

}

h4{color:red}

.student

{

    width:300px;

}

    .student .row {

      height:40px;

    }

    .student .column{

        width:50%;

        float:left;

    }

.mytestclass {

 background-color:yellow;

 font-size:small;

}

//HomeStyle.css

body {

  

}

h1 {

   color : blue;

}

Create Module

Add StudentModule.ts under the Module Folder.

// StudentModule.ts

import {NgModule} from "@angular/core"

import {BrowserModule} from "@angular/platform-browser"

import {StudentComponent} from "../Component/StudentComponent"

import {FormsModule} from "@angular/forms"

@NgModule({

    imports: [BrowserModule, FormsModule],

    declarations: [StudentComponent],

    bootstrap: [StudentComponent]

})

export class studentModule{

}

Let understand the module code.

import {NgModule} from "@angular/core"

import {BrowserModule} from "@angular/platform-browser"

import {FormsModule} from "@angular/forms"

import {StudentComponent} from "../Component/StudentComponent"

In first line of code we have reference the angular 2 modules which require by application.
in second line, we have reference the platform-browser module which includes built-in directives like NgIf and NgFor. This means we can use these built-in directives in any of this module's component templates.
In third line, we have referenced of FormsModule which allow us to use ngModel and other form-related directives are not available by default.
In last line we have referenced of StudentComponent class.

@NgModule({

   // imports: to import the other module which is used by this module.

   // declarations: to declare the app component belong to this app module.

   // bootstrap: setting the startup component of this module.

})

Create startup.ts

//startup.ts

import {platformBrowserDynamic} from "@angular/platform-browser-dynamic"

import {studentModule} from "./Module/studentModule"

const platform = platformBrowserDynamic();

platform.bootstrapModule(studentModule);

The platformBrowserDynamic module used bootstrapping function that allows us to instantiate our app.Then we have reference of StudentModule , then we have set as startup module as student Module.

Finally Create Home.html

<!--Home.html-->

<!DOCTYPE html>

<html>

<head>

    <title></title>

       <meta charset="utf-8" />

</head>

<link href="Css/HomeStyle.css" rel="stylesheet" />

<script src="node_modules/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>

<script src="node_modules/reflect-metadata/Reflect.js"></script>

<script src="node_modules/systemjs/dist/system.src.js"></script>

<script src="systemjs.config.js"></script>

<script>

    System.config({

        "defaultJSExtensions": true

    });

    System.import('startup').catch(function (err) { console.error(err); });

</script>

<body>

    <h1>My First Angular 2 Home Page</h1>

    <student-ui></student-ui>

</body>

</html>

We have added reference of some javascript files. Let understand the purpose of those file.

Shim.min.js -> This framework ensures that ES 6 javascript can run in old browsers.

Zone.js -> This framework ensures us to treat group of Async activities as one zone.

Reflect.js -> Helps us to apply meta-data on Javascript classes. We are currently using @NgModule and @NgComponent as attributes.

System.js -> This module will help to load JS file dynamically.

Then we have reference of systemjs.config.js and we import the reference of startup file. and we have to define the place holder of component selector. Which would be similar tag has define in component metadata.

Now see the execution plan how StudentComponent will load on Home page.

Now the time to Run the application, Just F5 your First Angular 2 application will be running in browser.

I hope , you would have learnt the various features of Angular 2. Happy Learning :)