Angular Tutorial
For creating new Project in Angular :
ng new Project_Name
(opt routing --yes,styling according to your choice )
For creating new component in Angular :
ng g c Component_Name
for creating module
ng g m Module_Name
For creating component inside folder or module
ng g c folder or module_name/component_name
Folder Structure in Angular:
App component.ts (typescript file we use for writing logic)
App component.html(we use for html )
App component.css (for styling the elements which we have declared in app component.html)
App module.ts(for importing module,service,directives,pipes)
index.html(main html file)
styles.css(main css we can specify styling of whole project here)
App routing file we use to give routing path to any component.
lets start first we will create a component home
open terminal
inside project directory
ng g c home
we have generated a component with a Name home component.
for testing that our home component is working or not
in App Component.html file we will declare
in home component.ts file check selector of app
and then declared like
<app-home></app-home>
in App routing.ts
we can give path
in App Routing module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path:"home",
component:UsersComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
App component.html
{{data.title}}
<!--
<h1>Routing Tutorial</h1>
<a routerLink="users">users</a>
<br><br>
<a routerLink="admin">admin</a>
{{name}}
<router-outlet></router-outlet>
-->
<!--
<button (click)="getName(myName)" >Cilck</button>
<app-newcomp [hero]="data"></app-newcomp>
<app-newcomp (parentFunction)="parentFunction($event)"></app-newcomp>
<h1>Hello World</h1>
<h2>{{ data | titlecase }}</h2>
<h2>{{ data | uppercase }}</h2>
<h3>{{ today | date }}</h3>
<h3>{{ today | date:'fullDate' }}</h3>
<h3>{{ str | slice:2:6 }}</h3>
<h3>{{ money | currency:'USD' }}</h3>
-->
<!--
<input type="text" (keyup)="getValue($event.target.value)"/>
<h2>{{cvalue}}</h2>
-->
<!-- Getting value
<input type="text" (keyup)="getValue($event.target.value)"/>
<h2>{{cvalue}}</h2>
-->
<!-- Getting value using button
<input type="text" #box/>
<button (click)="getValue(box.value)" >Cilck</button>
<h2>{{cvalue}}</h2>
-->
<!-- Properly Binding
<input type="text" [disabled]=disabled [value]="name"/>
<input type="text" disabled={{disabled}} value={{name}}/>
<button (click)="enabledBox()" >Cilck</button>
-->
<!-- only if block
<h3 *ngIf="show else elseBlock" >
IF BLOCK
</h3>
<ng-template #elseBlock>
<h3>else block</h3>
</ng-template>
-->
<!--
<h2 *ngIf="show=='yes' ;then IfBlock else elseBlock" ></h2>
<ng-template #IfBlock>
<h1>if block</h1>
</ng-template>
<ng-template #elseBlock>
<h1>else block</h1>
</ng-template>
-->
<!-- Switch case
<div [ngSwitch]="color">
<h2 style="color:green;" *ngSwitchCase="'green'">Green Color</h2>
<h2 style="color:red;" *ngSwitchCase="'red'">Red Color</h2>
<h2 style="color:blue;" *ngSwitchCase="'blue'">Blue Color</h2>
<h2 style="color:gray;" *ngSwitchDefault>Gray Color</h2>
</div>
-->
<!-- array items
<h4 *ngFor="let item of data ">
{{item}}
</h4>
-->
<!--
<h4 *ngFor="let item of data ">
{{item.name}}
{{item.Age}}
</h4>
-->
<!--
<form #simpleForm="ngForm" (ngSubmit)="getValues(simpleForm.value)" >
<input type="text" ngModel name="user" placeholder="Enter User Name">
<br><br>
<input type="text" ngModel name="age" placeholder="Enter User Age">
<br><br>
<input type="text" ngModel name="user" placeholder="Enter User Address">
<br><br>
<button>Get User values</button>
</form>
-->
<app-home></app-home>
App component.ts
import { Component } from '@angular/core';
import { EmployeeService } from './employee.service'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'firstproj';
data=[]
constructor(private employeee:EmployeeService){
this.employeee.getData().subscribe(data=>{
console.warn(data)
this.data=data;
})
}
/*
name="";
constructor(private employee:EmployeeService){
console.warn(this.employee.getData())
this.name=this.employee.getData().name
}
data="bruce";
today=Date.now();
str="hello Angular";
money=100;
myName="Rahul";
getName(name){
alert(name);
}
cvalue="";
getValue(val){
this.cvalue=val;
}
name="john";
disabled=true;
enabledBox(){
this.disabled=false;
show="yes";
color="blue";
}
data =['anil','john','sam']
data=[
{
name:'sam',
Age:20
},
{
name:'peter',
Age:35
},
{
name:'bruce',
Age:30
},
{
name:'john',
Age:25
}
]
*/
getValues(val) {
console.log(val);
}
parentFunction(data){
console.warn(data)
}
}
Employee service.ts
ng g s Employee(for creating service)
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class EmployeeService {
constructor(private http: HttpClient){}
getData()
{
let url ="https://jsonplaceholder.typicode.com/todos/1";
return this.http.get(url);
}
}
Comments
Post a Comment