Angular 2

Tutorials on Angular2

We have tutorials on as how to install and setup Angular2. Tutorial :Setup and Installation of Angular 2 Video

Why Angular is required?

This is a front-end JavaScript framework. It is a Component-based web development. Many people were happy with the functionality that Angular 1.x offered and Angular 2 improved on that functionality and made it faster, more scale able and more modern. It is easy to move from Organizations that found value in Angular 1.x will find more value in Angular 2. Angular 2 is a more streamlined framework that allows programmers to focus on simply building JavaScript classes. Views and controllers are replaced with components.

Despite being a complete rewrite from AngularJS 1.x, Angular 2 has retained many of its core concepts and conventions with Angular 1.x. Who are already proficient with Angular will have an easier time migrating to Angular 2.

It is Easier.

The new Angular codebase is more modern, more capable and easier for new programmers to learn.

Angular 2 is a more streamlined framework that allows to focus on simply building JavaScript classes.

Views and controllers are replaced with components, comparing AngularJS 1.x.

Angular 2 components are considerably easier to read, and their API features less jargon.

Why to use TypeScript.

Angular 2 was written in TypeScript, a superset of JavaScript that implements many new ES2016+ features.

By focusing on making the framework easier for computers to process, Angular 2 allows for a much richer development ecosystem. Using text editors and IDEs will notice dramatic improvements with auto-completion and type suggestions.

Let us see an sample anjular2 Code Implementation.

import {bootstrap, Component} from 'angular2';

@Component({

selector: 'my-component',

template: `<div>Hello, {{message}}</div>` })

class MyComponent

{

   message: string;

   constructor()

     {

       this.message = 'World';

     }

}

bootstrap(AppComponent); 

Performance and Mobile.

Angular 2 was designed for mobile like Touch interfaces, limited screen real estate and mobile hardware.Desktop computers will also see dramatic improvements in performance and responsiveness.

Project Architecture.

Angular 2.x makes use of the ES2015 module system, and modern packaging tools like webpack or SystemJS. It's easier to write more generic JavaScript and plug it into Angular. The new module system also makes it easier to develop effective tooling that can reason better about larger projects.

Interesting Features.

Some of the other interesting features in Angular 2 are:

• Form Builder
• Change Detection
• Templating
• Routing
• Annotations
• Observables
• Shadow DOM

Installation Steps

Command Line

1. Install Node.js and npm, if they are not already on Computer. This will install npm command on computer. This can be checked in control Panel->Uninstall a program.

2. The Angular CLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

3. Set Path.

Using command npm install -g @angular/cli will install Angular/core, etc.This normally gets installed c:/users/<username>/AppData/Roaming/npm (This should have ng.exe command). One need to set path variable to execute ng command, if not proper set.

4. Command Steps.

• Install from Node.js browser.
• Enter following commands from Command Line.
• npm install -g @angular/cli
• ng new my-app
• cd my-app
• ng serve --open

Open Project at localhost:4200

With entering command ng new my-app, this will create my-app project in c:\users\<username>\my-app folder.

my-app folder contains the following files.

app.componebt.css

app.component.html

app.component.spec.

app.component.ts

app.module.ts

Testing:
you can do the modification in following files.

Edit app.component.html or Add/Edit variables in app.component.ts file. For example- Add variables "subheading="sub heading" in app.component.ts file. Use it in app.component.html file as {{subheading}}.

In Eclipse

1. Install Node.js® and npm if they are not already on your machine.

2. The Angular CLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

3. Create Dynamic Project. Load Project from Directory. The directory is created through above command steps.

4. Setup Eclipse with Tomcat.

5. Run Project.

Installation Steps 
Now lets us review the installation steps in Detail.

1. Install Node.js and npm. Node.js is a prerequisite for developing Angular 2 apps in TypeScript.

2. Create project folder & add configuration files

Create project folder as 

    c:>mkdir my-app

3. Add the following package definition and configuration files to it.

• package.json: Lists packages that our app will depend on and defines some useful scripts.
• tsconfig.json : Is a TypeScript compiler configuration file
• typings.json  : Identifies TypeScript definition files
• systemjs.config.js : The SystemJS configuration file.

4. At command line with with project.

• cd my-app
• npm install

5. Once the installation is complete we have all the dependencies installed. The project folder will now have additional folders as follows

• node_modules
• typings 

6. Within the app folder create a file called app.component.ts. This is where we will be writing our first component. Open the file and add the following content to it.

import { Component } from '@angular/core';

@Component({ selector: 'my-app',

template: '<h1>My First Angular 2 App</h1>'

})

export class AppComponent { }

7. Add main.ts. 
Create the file app/main.ts with the following content to load the root component

import { bootstrap } from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';

bootstrap(AppComponent);

8. Add index.html. 
In the project root folder, create an index.html file and paste the following lines into it:

<html>

<head>

<title>Angular2App</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="styles.css">

<!-- 1. Load libraries -->

<!-- Polyfill(s) for older browsers -->

<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>

<!-- 2. Configure SystemJS -->

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

<script>

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

</script>

</head>

<!-- 3. Display the application -->

<body>

<my-app>Loading...</my-app>

</body>

</html> 

9. Add styles.css. 
Create a styles.css file in the project root folder and add some minimal styles for this example as shown below:

h1 {

color: #369;

font-family: Arial, Helvetica, sans-serif;

font-size: 250%;

}

body {

margin: 2em;

} 

10. Build and Run. 
The final step is to build and run the app. For this, go to the Node.js command prompt and assuming you are in the project root folder type the following command :

C:>npm start.

11. Once we run the above command, our application gets built and opens up index.html in a browser.
In the browser run the command. Localhost:4200

Why we need Node.js and npm to create Angular 2 Apps?

TypeScript: . Transpiling is Compiling source code written in one language and transforming into another language that has a similar level of abstraction. That is transpile .ts files to get them into .js, on-the-fly. Once Node.js and NPM is installed it is possible to transpile.

Web Server: Having Node.js helps in serving your Angular SPA from a “real” albeit light web server.

Download Packages: On a command line we need to type npm install in the project folder to install dependencies and get our angular project going. This download libraries and packages required for Angular 2.

Add the content to following files before compilation.

package.json -A package.json file contains meta data about our app. Most importantly, it includes the list of dependencies to install from npm when running npm install.

tsconfig.json - As we have learnt earlier, we need to transpile our .ts files to .js files and tsconfig.json is a TypeScript configuration file that guides the compiler as it generates JavaScript files.

typings.json - Many JavaScript libraries such as jQuery, the Jasmine testing library, and Angular itself, extend the JavaScript environment with features and syntax that the TypeScript compiler doesn’t recognize natively. When the compiler doesn’t recognize something, it throws an error. We use TypeScript type definition files — d.ts files — to tell the compiler about the libraries we load.

systemjs.config.js -We use SystemJS to load application and library modules. There are alternatives that work just fine including the well-regarded webpack. SystemJS happens to be a good choice. All module loaders require configuration and this is what we use this file for.

Add content to each of files.

package.json

{

"name": "Angular2App",

"version": "1.0.0",

"scripts": {

"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",

"lite": "lite-server",

"postinstall": "typings install",

"tsc": "tsc",

"tsc:w": "tsc -w",

"typings": "typings"

},

"license": "ISC",

"dependencies": {

"@angular/common": "2.0.0-rc.4",

"@angular/compiler": "2.0.0-rc.4",

"@angular/core": "2.0.0-rc.4",

"@angular/forms": "0.2.0",

"@angular/http": "2.0.0-rc.4",

"@angular/platform-browser": "2.0.0-rc.4",

"@angular/platform-browser-dynamic": "2.0.0-rc.4",

"@angular/router": "3.0.0-beta.1",

"@angular/router-deprecated": "2.0.0-rc.2",

"@angular/upgrade": "2.0.0-rc.4",

"systemjs": "0.19.27",

"core-js": "^2.4.0",

"reflect-metadata": "^0.1.3",

"rxjs": "5.0.0-beta.6",

"zone.js": "^0.6.12",

"angular2-in-memory-web-api": "0.0.14",

"bootstrap": "^3.3.6"

},

"devDependencies": {

"concurrently": "^2.0.0",

"lite-server": "^2.2.0",

"typescript": "^1.8.10",

"typings":"^1.0.4"

}

}

tsconfig.json

{

"compilerOptions": {

"target": "es5",

"module": "commonjs",

"moduleResolution": "node",

"sourceMap": true,

"emitDecoratorMetadata": true,

"experimentalDecorators": true,

"removeComments": false,

"noImplicitAny": false

}

}

typings.json

{

"globalDependencies": {

"core-js": "registry:dt/core-js#0.0.0+20160602141332",

"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",

"node": "registry:dt/node#6.0.0+20160621231320"

}

}

systemjs.config.js

/**

* System configuration for Angular 2 samples

* Adjust as necessary for your application needs.

*/

(function(global) {

// map tells the System loader where to look for things

var map = {

'app': 'app', // 'dist',

'@angular': 'node_modules/@angular',

'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',

'rxjs': 'node_modules/rxjs'

};

// packages tells the System loader how to load when no filename and/or no extension

var packages = {

'app': { main: 'main.js', defaultExtension: 'js' },

'rxjs': { defaultExtension: 'js' },

'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },

};

var ngPackageNames = [

'common',

'compiler',

'core',

'forms',

'http',

'platform-browser',

'platform-browser-dynamic',

'router',

'router-deprecated',

'upgrade',

];

function packIndex(pkgName) {

packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };

}

function packUmd(pkgName) {

packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };

}

var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

// Add package entries for angular packages

ngPackageNames.forEach(setPackageConfig);

var config = {

map: map,

packages: packages

};

System.config(config);

})(this);

Project folder should like this:

My-app

tslint.json

Package.json

Src

 Index.html

 Main.ts

 Systemjs-angular-loader.js

 Systemjs.config.js

 Tsconfig.json

node-modules

typing

App

App.component.ts

App.module.ts

Reference: http://angular.io

Tutorials Links

Setup and Installation of Angular 2 Video