Steps for Angular App
Step1 : create a directory AngularApp
Step 2: cd AngularApp
step 3: git clone https://github.com/angular/quickstart.git frontend THIS will clone angular to Frontend folder
step 4: open Frontend folder through VSCode
setp 5: view --Integrated Terminal --
npm install
npm start
You will see hello angular
step 6: File Preferences--settings add
step 7: Add a Component
Add the dependecies of the component in appmodule (imports and also in declarations)
also import the message component in appcomponent
and use the selector of the messagecomponent in appcomponent like below
AppModule
AppComonent
MessageComponent
Step 2: cd AngularApp
step 3: git clone https://github.com/angular/quickstart.git frontend THIS will clone angular to Frontend folder
step 4: open Frontend folder through VSCode
setp 5: view --Integrated Terminal --
npm install
npm start
You will see hello angular
step 6: File Preferences--settings add
{
"files.autoSave": "afterDelay",
"files.exclude": {
"**/*.js.map": true,
"**/*js":{"when":"$(basename).ts"}
}
}
Add the dependecies of the component in appmodule (imports and also in declarations)
also import the message component in appcomponent
and use the selector of the messagecomponent in appcomponent like below
AppModule
import { MessagesComponent } from './messages-component';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent,MessagesComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
AppComonent
import { MessagesComponent } from './messages-component';
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1><messages></messages>`,
})
export class AppComponent { name = 'World'; }
MessageComponent
import { Component } from '@angular/core';
@Component(
{
selector:'messages',
template:"Hello this is a message template"
}
)
export class MessagesComponent {}
Comments
Post a Comment