Angular Beginner

Last updated: July 24th, 2019

Before we start learning Angular

  • before learn Typescript learn Node.js how its work.
    • You can find demo in (node demo) folder to understand how to node.js works

Download

  • Angular requires Node.js version 10.9.0 or later.
Download Node.js

Angular Architecture

Angular Architecture
Basically Three Things Are Important
  • Component
    • Component act as controller, component control template data and output.
  • Service
    • Service act as data provider, service used to collect data from API or json file.
  • Module
    • Module used to combine all component and generate output.

Installation

Step One (Install Angular)

  • you can use command prompt or PowerShell for run command.
  • first install npm(Node Package Manager) for use npm.
Example:
npm install -g @angular/cli

Step Two (Create Project)

=> ng stands for aNGular
Example:
ng new ProjectName

Step Three (Run Project)

Example:
ng serve -o
ng serve --port 8080 -o
ng serve --host 192.168.200.19 --port 8080 -o
  • Explanation
    • serve -o used to serve application in browser
    • --port used to run application on that port
      • Example : http://localhost:8080
    • --host used to give domain name.
      • Example : http://localhost OR http://192.168.200.19

Step Four (Deploye Project)

Example:
ng build --prod
  • Explanation
    • --prod used to build product for production Mode
  • Dist Folder
    • dist/project-name above command create dist folder on root
  • Changes In Index
    • <base href="/"> // if your project in sub-directory then add sub-directory path in href

Displaying Data

Useful Tip:

  • Don't forget the leading asterisk (*) in *ngIf and *ngFor. It is an essential part of the syntax.
  • {{ Anything }} Angular replaces that name with the string value of the corresponding component property. However, interpolation is a special syntax that Angular converts into a property binding.
*ngFor Example:
<li *ngFor="let customer of customers"> {{customer.name}}</li>
  • Explanation
    • let use as var. (use let insted of var).
    • Above example create multiple li depend on loop count.
    • In Above Example (customers) contain array and (let customer) is variable with is hold array values, like php foreach.
*ngIf Example:
<div *ngIf="currentCustomer">Hello, {{currentCustomer.name}}</div>
  • Explanation
    • ngIf to conditionally display a chunk of HTML based on a boolean expression.
    • In Above Example if (currentCustomer) true then print data.
*ngIf ( IF ELSE )Example:
<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>Content to render when condition is true.</ng-template>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>
  • Explanation
    • if condition is true then #thenBlock template render
    • else condition is false then #elseBlock template render

Dynamic BaseUrl

Dynamic BaseUrl Used:

: Dynamic BaseUrl can be used in api service
: BaseUrl used in dynamic Breadcrumb also.

How To implement Dynamic BaseUrl
  • Step 1:
    • Goto App.module
    • Put code before @NgModule: 
      export function getBaseUrl() { 
	return document.getElementsByTagName('base')[0].href;
}
    • add function in providers for use in any component 
      providers: [yourOtherProvider,{ provide: 'BASE_URL', useFactory: getBaseUrl }]
  • Step 2:
    • Now Goto Component
    • add Inject in @angular/core 
      import { Component, OnInit, Inject } from '@angular/core';
    • Create variable above constructor and implement live below 
      BaseUrl:string;
constructor(OtherPrivateFunction,@Inject('BASE_URL') baseUrl: string) {
	this.BaseUrl = baseUrl;
}

Api Basic

Create Service

Service used for CRUD oprations with api

Example:
ng g s ServiceName
Start With Simple Get
  • create Service
    • Component act as controller, component control template data and output.
  • Service
    • Service act as data provider, service used to collect data from API or json file.
  • Module
    • Module used to combine all component and generate output.
Some Example:
  • Get Data:
    getData(): Observable { return this.http.get('YOUR API URL', {
	headers: new HttpHeaders({ 'Content-Type': 'text/plain' }) })
	.pipe(map(res => res));
}
  • Post Data:
    postData(formData): Observable {return this.http.post("YOUR API URL", formData, {
	headers: new HttpHeaders({ 'Content-Type': 'text/plain' })})
	.pipe(map(data => data));
}
    • formData contain all form data

Schema Implement

SEO Related Things

create seo_header_content, seo_footer_content SITECONFIG in admin panel and add in api response
: below code place in component to execute script for seo use
: place code in OnInt()

Example:
return new Promise(resolve => {
	const scriptElementHeader = document.createElement('script');
	// scriptElementHeader.src = "";
	scriptElementHeader.innerHTML = data['seo_header_content'];
	scriptElementHeader.onload = resolve;
	document.head.appendChild(scriptElementHeader);

	const scriptElementFooter = document.createElement('script');
	// scriptElementFooter.src = "";
	scriptElementFooter.innerHTML = data['seo_footer_content'];
	scriptElementFooter.onload = resolve;
	document.body.appendChild(scriptElementFooter);

	const BreadcrumbSchema = document.createElement('script');
	BreadcrumbSchema.type = "application/ld+json";
	BreadcrumbSchema.innerHTML = '{"@context":"https://schema.org/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"' + this.BaseUrl + '"},{"@type":"ListItem","position":2,"name":"PageName","item":"' + location.href + '"}]}';
	BreadcrumbSchema.onload = resolve;
	document.body.appendChild(BreadcrumbSchema);
});

Angular Videos

Suggestion Box