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
