INTRODUCTION TO ANGULAR

ANGULAR

 Angular is component based MVC framework written in Typescript language.

 It is used especially to develop SPA (web applications)
HISTORY OF ANGULARJS
 Angular 1 was released in October,2010.
 Angular 2 was released in September,2016.
 Angular 4 out in March, 2017

 Why not Angular 3?

-Semantic versioning 2.3.x (MAJOR.MINOR.PATCH)

-Router package already at version 3.3.0

INTRODUCTION TO ANGULAR
Why Angular?
 Performance : Angular is 5 times faster compared to AngularJs 1.
 Mobile Support : With angular we can build a Single Page Application(SPA) that works across mobile and desktop devices.
 Component based development : In Angular, everything is a component. Components are the building block to Angular
application.
 Major Language choices :
 ECMAScript 5.
 ECMAScript 6 (also called ES 2015).
 TypeScript.
 Dart.
 PureScript, etc..
INTRODUCTION TO ANGULAR CONTD..
Angular itself, is built using TypeScript. TypeScript has great support of ECMAScript 6 standard.
What is ECMAScript ?
 The JavaScript language standard is officially called ECMAScript.
 ECMAScript version 1 to till ECMAScript version 8 were released over the past 20 years.
 Most of the modern browsers available today support ECMAScript 5.
 The browser support for ECMAScript 6 or later is still incomplete.

 Transpilation : ECMAScript 6 can be converted to ECMAScript 5.

ECMAScript : https://en.wikipedia.org/wiki/ECMAScript
INTRODUCTION TO ANGULAR CONTD..
What is Type Script ?
 Free and open-source programming language developed by Microsoft.
 Superset of JavaScript.
 Transpilation compiles typescript to JavaScript.

TypeScript Benefits
1. Intellisense
2. Autocompletion
3. Code navigation
4. Strong Typing
5. Supports ES 2015 (also called ES 6) features like classes, interfaces and inheritance.
SETTING UP ANGULAR IN VS
How to set up Angular in Visual Studio?
Step 1 : Install Node.js and npm.
 Node version 4.6.x or greater
 npm 3.x.x or greater.
 To check the use commands in a command window.
node -v
npm -v
You can get the latest version of Node.js from the following website.
https://nodejs.org/en/download
Step 2 : Make sure you have Visual Studio 2015 Update 3 installed. To check the version of Visual Studio you have click on
the "Help" menu and then select "About Microsoft Visual Studio"
SETTING UP ANGULAR IN VS
Step 3 : Configure environment settings for node and npm in Visual Studio.

Step 4 : Install Typescript for Visual Studio 2015

To develop Angular applications you need TypeScript 2.2.0 or later
To check the version of TypeScript, clik on the "Help" menu in Visual Studio and select "About Microsoft Visual
Studio" .
Step 5 : Create Empty ASP.NET Web Application project

Step 6 : Download the "Quick Start Files" from the Angular web site.
https://github.com/angular/quickstart

Step 7 : Copy the required "Starter files" to the web application project.
SETTING UP ANGULAR IN VS

 Step 8 : Restore the package and run the solution.

ANGULAR COMPONENT

What is a component in Angular ?

- A component in Angular is a class with a template and a decorator.

1. Template - Defines the user interface. Contains the HTML, directives and bindings.

2. Class - Contains the code required for template.

3. Decorator - Decorators add metadata to the class. A class becomes an Angular component, when it is
decorated with the Component decorator.
BINDINGS IN ANGULAR

1. One way binding: Data flow in one direction only. Achieved using property or event binding.

2. Two way binding: Data flows two directions. Achieved using property and event binding together.
ANGULAR SERVICES (DI)
 A service is used when common functionality is required.
 Single reusable service injected via dependency injection.
 Singleton instance is created.
 Why dependency injection?
 ANGULAR ROUTING
 Step 1 : Set <base href=“/src/”> in index.html
 Step 2 : Import router module and define routes

 Step 3 : Tie the routes to application menu.

WHAT’S NEW IN ANGULAR 4 ?
Upgarde 2 to 4
npm install @angular/common@latest @angular/compiler@latest @angular/core@latest @angular/forms@latest
@angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest
@angular/router@latest @angular/animations@latest typescript@latest –save

No breaking change introduced in Angular 4

 New view engine (Major)
 Compatibility with TS 2.1 and 2.2
 Introduction of ‘else’ in *ngIf
 Introduced ‘as’ keyword
 Separate addition of animation package @angular/platform-browser/animations (deprecation)
 New Renderer2 (deprecation)
Thank you !