How to install and work with Angular 2

How to install and work with Angular 2

How to install and work with Angular 2

Angular 2 is an open source JavaScript Framework to build Web and Mobile applications in HTML and JavaScript.

To start work with Angular 2. You should be familiar with the basics of HTML, CSS, and JavaScript before starting the Angular 2.

To install before the Angular. You need to install Node Package Manager (NPM). You can install NPM from the official site https://www.npmjs.com

Now you need to create a folder where you want to create the Angular 2 App.

Now you can install Angular 2 with Angular command Line Interface (CLI). To install Angular with CLI you need to open the command prompt in same folder which you create and run this command

 npm install -g angular-cli

As soon command install and download all the CLI component then you need to run another command to create the project.

ng new angular2Demo

Here ng new is the cli command to create the new project and angular2Demo is the name of project.

As you run the above command. A new project folder will create with the same name as you provide "angular2Demo" and following directory structure.

 angular2Demo/ 	e2e/ 	node_modules/ 	src/ 		app/ 			app.component.css 			app.component.html 			app.component.spec.ts 			app.component.ts 			app.module.ts 		assets/ 		environments/ 		favicon.ico 		index.html 		main.ts 		polyfills.ts 		style.css 		test.ts 		tsconfig.app.json 		tsconfig.spec.json 		typings.d.ts 	.angular-cli.json 	.editorconfig 	.gitignore 	karma.conf 	package.json 	protractor.conf 	README.md 	tsconfig.json 	tslint.json 

So this is the directory structure

To run this project you need to run the command on Command prompt.

 ng serve 

As you run this command your application will run and you can browse it on http://localhost:4200 by default Angular 2 Apps runs on 4200 port.

Now you can modify your app. For modifying the app you need to changes in the following files.

app.component.html

 app works! 

app.component.ts

 import { Component } from '@angular/core';  @Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css'] }) export class AppComponent {   title = 'Angular 2 Demo App'; } 

app.module.ts

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

So you can changes in these files to make modification in app.

You can find this app on my GitHub site https://github.com/eranilkapoor/angular2-demo-app

Security Checks in Node Js

Security Checks in Node Js

We can use lots of security check on node js for development and production environment. …

read more
What is scope in JavaScript

What is scope in JavaScript

What is scope in JavaScript …

read more