What is Typescript?

1. Typescript is a typed superset of JavaScript. JavaScript that scales. It's not replacement of JavaScript nor does it add any new feature of JavaScript.
2. It's compiled to generate JavaScript.
3. It was designed by Anders Hejlsberg (founder of C#) at Microsoft. Its open source and can be used in any place where we would need JavaScript.
4. Its object oriented and supports core features like interfaces and classes.
5. Typescript generated JavaScript can reuse all of the existing JavaScript frameworks, tools, and libraries.
6. Also any valid .js file can be renamed to .ts and compiled with other Typescript files.
7. The reader of this tutorial needs to have good knowledge on Object Oriented Programming and basic knowledge on JavaScript.
8. It’s not mandatory to strongly type everything when we are type scripting.
9. There are almost 40 languages which are superset of JavaScript. On which they generate .js on compiling, typescript is one of these languages.
Few of the languages are: typescript, purescript, coffeescript, livescript


Versions:
1. Typescript 0.8 was released on Oct 2012
2. Typescript 0.9 was released in 2013
3. Typescript 1.0 was released in 2014
4. Typescript 2.0 was released on Sep 22 2016

Benefits of TypeScript:
1. It compiles the code and generate syntax errors if any. This helps to highlight errors before the script is executed.
2. Because of Object Oriented features, it's reusable and easier to manage in large and complicated projects.
3. Angular 2 framework is written in Typescript and it’s recommended that developers use the language in their projects as well.
4. Due to the static typing, code written in Typescript is more predictable, and is generally easier to debug.

Small example:

Ex: Hello world

function sample() {
    var message: string = "Hello world"
console.log(message);
}
sample();

AngularJs Setup for local Environment

Setup for local Environment

Setting up Angular2/Angular4 is a quite complex, it needs a lot of work when compared with the installation for Angular1.X applications.

To setup with the quick start files follow these steps:

Step1: Install Node JS and npm
Step2: Install visual studio 2015 update3
Step3: Configuring External Web Tools.
Step4: Install Typescript
Step5: Download quick start files
Step6: Create ASP.NET Project
Step7: Copy the quick start files into your ASP.NET Project
Step8: Restore Packages

Step9: Build and Run

Install Node JS and npm

1. To work with Angular2/Angular4 you must have Node JS version 4.6.X or higher and npm 3.X.X or higher. Older versions produce errors. 

2. Before installing make sure whether you have already installed Node JS before. For checking the Node JS and npm versions follow these commands in command prompt.

For Node JS: node –v

For npm: npm –v

3. If the PC don’t have Node JS installed it will show you like “node” is not recognized as an internal or external command, “npm” is not recognized as an internal or external command. Or if your PC has older version than the required please update to the latest versions.

4. For installing latest version of Node JS and npm go to https://nodejs.org/en/download/ 

5. Your first step will be completed if you have installed the required versions.

Install visual studio 2015 update3

Minimum requirement for developing Angular2/ Angular4 applications is Visual Studio Update3 because the earlier versions do not follow the best practice for developing applications with Typescript. 

1. To check the version of Visual Studio 2015

Open Visual Studio 2015  ->  go to Help -> click on About Microsoft Visual Studio

 

2. If you don’t have update3 go to the following links (or) you can directly install from visual studio go to Tools -> Extensions and Updates

Visual Studio Enterprise 2015 - Update 3

http://download.microsoft.com/download/8/4/3/843ec655-1b67-46c3-a7a4-10a1159cfa84/vs2015.3.ent_enu.iso 

Visual Studio Professional 2015 - Update 3

http://download.microsoft.com/download/e/b/c/ebc2c43f-3821-4a0b-82b1-d05368af1604/vs2015.3.pro_enu.iso 

Visual Studio Community 2015 - Update 3

http://download.microsoft.com/download/b/e/d/bedddfc4-55f4-4748-90a8-ffe38a40e89f/vs2015.3.com_enu.iso   

Configuring External Web Tools

1. We need to configure Visual Studio to use the global external web tools before the tools that ship with visual studio.

2. Go to Visual Studio -> Click on Tools -> Options -> Expand Projects and Solutions -> click on External Web Tools  now in the right hand side move $(PATH) entry above the $(DevEnvDir) entries. This tells the visual studio to use the external tools like (npm) found in the global path before using its own version of the external tools.

3. Now click OK and restart the Visual Studio to reflect these changes. Visual Studio now looks first for external tools in the current workspace and if it doesn't find them, it looks in the global path. If Visual Studio doesn't find them in either location, it will use its own versions of the tools.

Install Typescript

1. To develop Angular applications we need Typescript 2.2.0 or its higher versions, as Visual studio Update3 doesn’t have such specifications we need to install it externally

2. Before installation we can check our Typescript version in the Visual Studio 

Open Visual Studio 2015  ->  go to Help -> click on About Microsoft Visual Studio

3. To get the latest version of typescript for Visual studio 2015 go to https://www.microsoft.com/en-us/download/details.aspx?id=48593 

Download quick start files

You can download the quick start files from Git hub https://github.com/angular/quickstart and then extract the files.

Create ASP.NET Project

Create ASP.NET 4.X or above project in the visual studio

Go to Visual Studio -> File -> New -> Project -> select Visual C# under Templates -> click on 

ASP.NET Web Application -> select Desired Templates -> give the project name and click on OK.

Copy the quick start files into your ASP.NET Project

Copy the quick start files into your project, but all the files are not necessary to be included into your project. So copy only selected files from the extracted folder.

Copy the following files into your .csproj

• Src
• Bs-config.json
• Package.json
• Tslint.json

Restore Packages

Restore the packages required for your application

1. For restoring packages right click on package.json -> select Restore Packages. This uses npm to install all the packages defined in package.json.

2. In between you can open the Output window to watch the npm commands that are executed. Simply we can ignore the warnings.

3. After you see the message Installing Packages Complete make sure that your project doesn’t includes node_modules folder.

Build and Run

1. After Installing packages build the Application.

2. To run the application open Command Prompt -> go to your Project Directory -> execute command npm start.

3.When this command is executed,

   -> firstly it will launch typescript compiler and compiles the application with the following command tsc –p src/

   -> Now it will start the lite-server and launches the browser where you can see the 

Output: Hello Angular

4. But if you run the index.html by pressing F5 in visual studio it will not show the same output.

To Run in VS with F5 follow these steps

1. In index.html, change base href from <base href="/"> to <base href="/src/">.

2. Also in index.html, change the scripts from node_modules  to /node_modules with a slash 

3. In src/systemjs.config.js, near the top of the file, change the npm path to /node_modules/ with a slash.

4. After these changes npm start command no longer works, you must choose to configure either for F5 with IIS or for npm start with the lite-server.

5. Now run the application using  F5

Angular2 vs Angular4

Angular 2 and Angular 4 Doesn’t have much differences, it’s just an update for the features that are existed in angular2.

Angular2	Angular4 / Just Angular
Angular2 application size is larger when compared to angular4.	Angular4 application is smaller and faster when compared to angular2 app.
*ngIf is not build with if/else syntax	*ngIf has if/else syntax that make sense when you are making ajax calls we can show loading within the page.
For changing a text to title case, we need to write our own logic.	Angular 4 has introduced a  new ‘titlecase’ pipe for converting first letter of each word to uppercase Ex: <h1>{{‘hello world’ | titlecase}}</h1>
For creating templates we need to use template property	New directive ng-template has introduced.
For animations need to import multiple packages and apply transactions	For animations we now have own package @angular/platform-browser/animations

AngularJs 1 (vs) AngularJs 2

First thing to be clear is AngularJs 2is not an upgrade of Angular, it is completely different from Angular Js 1

Angular JS 1.X	Angular 2
Setting up application is very easy, need to just add the reference of angular.js	Setting up application is quite complex, and it takes lot of work because it’s dependent on Gulp or Grunt.
Angular JS is not built with mobile support in mind.	Whereas Angular2 was built for specially taking care of mobile support, so it’s mobile oriented.
Angular JS core concept was $scope, without scope we can’t communicate between views and controller.	Angular2 is using Zone.js for detecting changes made in the DOM.
For communicating with views/templates it require controllers.	It’s build with components. Template Directives + controllers =    components
Performance is less when compared to angular2.	Unidirectional tree based change detection increases its performance. As per ng-conf angular 2 is five times faster than angular1.
Angular1.X has ES5, ES6 and Dart	Whereas angular2 has more choice, it can use any of the languages from ES5, ES6, and typescript/dart.
Ng-repeat is used for iterating through list of objects.	Structural directives syntax is completely changed. Ng-repeat is replaced with *ngFor
Mostly built-in directives are used for events and element properties. Ex: ng-src, ng-href, ng-click etc.	It directly uses the HTML DOM element properties. Ex: (click)
Ng-bind is used for one-way binding	Whereas ng-bind is replaced with [property], where property is HTML DOM element property.
It has two ways to bootstrap the application, one is automatic bootstrapping (ng-app) and manual bootstrapping.	It has only one way which is manual bootstrapping.
For routing it uses $routeProvider.when()	It uses @RouteConfig {{…}}

Angular4 - Introduction

      What is Angular?

      AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it handles all of the DOM and AJAX code you once wrote by hand and puts it in a well-defined structure.

• History: AJAX -> jQuery / Prototype -> MVC Frameworks (Knockout / Backbone) -> AngularJS
• AngularJS is a very powerful open source and absolutely free JavaScript library distributed as   Angular.js file. 
• It's majorly used for developing Single Page Applications (SPA). 
• It's based on Model View Controller design pattern.
• It's an extension of HTML DOM and has additional attributes which reduces code and makes it easy to program dynamic and responsive applications.
• Its features include everything we need to build a CRUD app: data-binding, basic templating, directives, form validation, routing, deep-linking, reusable components, dependency injection.
• Angular is built around the belief that declarative code is better than imperative when it comes to building UIs and wiring software components together, while imperative code is excellent for expressing business logic.
• In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing.
• AngularJS applications can run on all major browsers and smart phones, including Android and IOS based phones/tablets.