How to install and work with Angular 2

Views

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

Test a Node RESTful API with M …

Test a Node RESTful API with Mocha and Chai. I still remember the satisfaction of being finally able to write the backend part of a bigger app in node and I am sure many of you do it too. And then? We need to make sure our app behaves the way we expe …

read more
Views

How To Set Up a Node.js Applic …

How To Set Up a Node.js Application for Production on Ubuntu 20.04 . Node.js is an open-source JavaScript runtime environment for building server-side and networking applications. The platform runs on Linux, macOS, FreeBSD, and Windows. Though you ca …

read more
Views