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

What is SEO

What is SEO

SEO is the part of digital marketing. SEO are two types one is on page SEO and another is off page SEO. …

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