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

How To Open a Port on Linux

Opening a port on Linux involves configuring the firewall to allow traffic through the specified port. Here's a step-by-step guide to achieve this, assuming you are using ufw (Uncomplicated Firewall) or iptables for managing your firewall settings. u …

read more

How To Create SSH Keys with OpenSSH on macOS, Linux, or Windows Subsystem f …

Creating SSH keys with OpenSSH on macOS, Linux, or Windows Subsystem for Linux (WSL) involves a few simple steps. Here's a guide: Open Terminal (macOS/Linux) or WSL (Windows), Generate SSH Key Pair, Generate SSH Key Pair, Verify SSH Key Generation,Vi …

read more