Getting started with Angular 2.0

Angular 2 helps you to build modern application for Web and Mobile.

What is included in Angular 1.x

  • Expressive HTML
  • Powerful Data Binding
  • Modular By Design
  • Built-in Back-End Integration

What is included in Angular 2.x

  • Built for speed
  • Modern
  • Simplified API
  • Enhance Productivity

Prerequisites
Before you begin, here are some of prerequisites to start with,
Required : Javascript, HTML, CSS
Helpful : Object Oriented programming concepts, C#, Java
Not Required : Prior knowledge of Angular, TypeScript

Angular 2.x requires “Visual Studio Code” and Node Package Manager(npm)

What is TypeScript?

  • Open source language
  • Superset of Javascript
  • Transpiles to plain JavaScript
  • Strongly typed
  • Class based object-orientation
  • Component, directives, pipes, services all are written in Typescript

Steps to create application with using angular CLI (Command line interface) in Angular 2.0 or more:

  1. Open Visual studio Code
  2. Click on View Menu -> Integrated Terminal (Ctrl + `)
  3. First check node js is installed in your system or what version of node js installed by writing node –v command
  4. You can also check npm version by npm –v command
  5. If required you can update npm version by npm install
  6. Install Angular CLI using npm install –g @angular/cli
  7. To check Angular CLI version  ng v
  8. For any help or flags ng help
  9. Final to create new applications write in integrated terminal.ng new AngularSample<<name of project>> –routing –skip-git –directory AngularSample<<name of project>> -ng-c
    After executing command Angular CLI will generate automatically with required files as below with sample demo:
  10. To open created demo in visual studio code write code. (Dot)
  11. To compile application (Launches a server): ng serve
  12. To run application: ng serve –o or npm start
  13. For production compilation: ng build –prod
  14. To change port: ng serve -o –port 5000
  15. To terminate batch compilation hit (CTRL+C)

Basic Folder Structure:

When we create the project, we’ll notice that it creates a bunch of files. Below is explanation of some files which is more important to know:

  1. json: includes node dependencies which are needed.
  2. src/styles.css: global CSS available throughout the application.
  3. src/main.ts: The main file which starts the Angular Application (AppModule is bootstrapped here as seen in the code ). Here the Extension .ts stands for TypeScript.
  4. src/index.html: This the first file which executes along main.ts when the page loads.
  5. src/app/app.module.ts: This is the file where all the components, providers, and modules are defined. Without defining them here, they can’t be used elsewhere in the code.
  6. src/app/app.component.html: This is the main component of an angular app, and all other components are usually present within this component. src/app/app.component.ts is the logic for this component, and src/app/app.component.css is the CSS for this component. This component itself does not do any important logic, but acts as a container for other components.
  7. dist: This folder is where the built files are present. TypeScript is basically converted to JavaScript and the resulting files are stored here after bundling and minification. (This Folder appears only if the application is built. A simple “npm start” will not create this folder. ) Since web browsers understand only JavaScript, it is therefore necessary to convert TypeScript to JavaScript before deploying the code. To see this folder, you can type the following in the command prompt: ng build

We can also generate application, class, component, directive, enum, guard, interface, module, pipe, service, serviceworker, universal, appShell, library using angular CLI

Here are some examples to generate using Angular CLI

Angular CLI generate Command Example
Class ng g cl ng g cl RateMaster
Component ng g c ng g c Rate/RateDetails
Directive ng g d ng g d OnlyNumber
Enum ng g e ng g e Service
Guard ng g g ng g g Product
Interface ng g i ng g I Model
Module ng g m ng g m Material
Pipe ng g p ng g p date
Service ng g s ng g s Admin

What is Component?
An angular is built by using various components.As we discussed above, we can generate component by angular CLI command which generate a folder called “TestApp” inside src/app folder.So Component generated below files:
TestApp.component.html : decide how UI looks
TestApp.component.ts : include logic here
TestApp.component.css : include particular UI css
TestApp.component.spec.ts : used for unit testing
So, Component = Template + Class + Metadata.

Let’s create TestApp Component for example:
TestApp.component.ts

import { Component } from '@angular/core';
@Component({
    selector:'rate-detail', 
    templateUrl: './TestApp.component.html', 
    styleUrls: ['./TestApp.component.css']  
   
  })

  export class TestAppComponent
  {
    pageTitle:string ='Test Master'
  }

TestApp.component.html

<div>
    <h1>{{pageTitle}}</h1>
    <p>Please enter your rates here</p>
</div>

And at final need to add in app.module.ts file, component will be declared as below:

import { NgModule } from '@angular/core';
import { BrowserModule } from '../@angular/platform-browser';
import { AppComponent } from '../app.component';
import { RateDetailComponent } from './Test/TestApp.component';
@NgModule({
    imports: [
     BrowserModule      
    ],    
    declarations: [AppComponent,TestAppComponent],
    bootstrap:[AppComponent]
  })
  export class AppModule { }

If you have large application, you have to create different component module wise with different module and then import all modules in app.module file.

Types of template

  1. Inline Template

Ex: template:'<h1>{{pageTitle}}</h1>'

  1. Linked Template

Ex: templateUrl: './TestApp.component.html'

Angular has two directive types, one is Custom directives and another is built in directives.
In above example, our directive name ‘<Test-app>’ declared in component is defined as Custom directive. There are two types in Built in directives:

  1. *ngIf – to check property exists (same as ng-if in angularjs)
  2. *ngFor – to bind list in table or div(same as ng-repeat in angularjs)

Using Custom directives, you can use one html into another html.
Ex: Display Product list in main page, you need to create product related html and ts file and use it in main page.

Angular has two types of binding one is template driven and another is using reactive forms.
Example of Template Driven method:
HTML file:

<div>
<input id=”email” [(ngModel)]=”Email”>
</div>

And in .ts file:
Email:string;

Example of Reactive Form method:
HTML file:
<div [formGroup]=”reactiveForm”>
<input id=”email” formControlName=”Email”>
</div>

And in .ts file:

Export class component implements OnInit
{
reactiveForm:FormGroup;
  Constructor(private form:FormBuilder)
{}

ngOnInit()
{
  this.reactiveForm = this.form.Group({
    Email:[]
})
}
}

Binding property with interpolation:
Binding pageTitle using {{pageTitle}} is called as interpolation.

Different types of binding with template driven method:

  1. <img [src] = ‘imgUrl’>
  2. <img src = {{ imgUrl }}>
  3. <img src = ‘http://openclipart.org/{{imgUrl}}’>

We can give title to image using [title] attribute.

Ex: <img [src] = ‘imgUrl’ [title] =’name’>
To apply style, [style.width.px], [style.margin.px] etc..:
<img [src] = ‘imgUrl’ [title] =’name’ [style.width.px] = ‘50’ [style.margin.px] = ‘5’>

Event Binding:
Ex: for click event – <button (click) =’toggleImage()’></button>

Pipes
Transform property using pipes
Ex: Convert property in Upper or lower case
<span>{{Name | lowercase}}</span>

Interface:
A specification identifying a related set of properties and methods.

Use of interface:

  • A class commits to supporting the specification by implementing the interface.
  • Use the interface as a Data type.
  • Development time only.