ALL PROGRAMMING LANGUAGE

ch-1 angular setups and intro

1.npm install -g @angular/cli

2.ng

3.cd desktop

ng new demo

4.cd demo

ng serve --open

5.<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> </head> <body> <script> class wap{ demo(){ alert(); } } var x=new wap(); x.demo(); </script> </body> </html>

6.<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> </head> <body> <script> class wap{ myname="saurav"; demo(){ alert(this.myname); } } var x=new wap(); x.demo(); </script> </body> </html>

7.<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> </head> <body> <script> class wap{ x=12; y=15; z=this.x+this.y; demo(){ alert(this.z); } } var x=new wap(); x.demo(); </script> </body> </html>

8.<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> </head> <body> <script> class wap{ demo(){ var x="saurav";//wrong to use var alert(x); } } var x=new wap(); x.demo(); </script> </body> </html>

9.<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> </head> <body> <script> class wap{ demo(){ this.x="saurav"; alert(this.x); } wap(){ alert(this.x); } cad(){ alert(this.x); } } var x=new wap(); x.demo(); x.wap(); x.cad(); </script> </body> </html>

10.<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> </head> <body> <script> class wap{ constructor(){ alert(); } } new wap(); </script> </body> </html>

11.<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> </head> <body> <script> function demo(){ alert(); } new demo(); </script> </body> </html>

ch-2 angular coding concepts

1.cd desktop

cd demo

ng serve --open

2.ng generate component homepage

3.ng add @ng-bootstrap/ng-bootstrap

4.ng serve

->app.componenet.html

<h1 class="text-danger">My root component</h1>

<homepage></homepage>

->homepage.component.html

<h2>My homepage</h2>
<button class="btn btn-primary" (click)="demo()">testing</button>

->homepage.component.html

<h2>My homepage</h2>
<button class="btn btn-primary" (mouseover)="demo()">testing</button>

->homepage.component.html

<h2>{{ x }}</h2>
<button class="btn btn-primary" (mouseover)="demo()">testing</button>

->homepage.component.html

<h2>{{ x }}</h2>
<button class="btn btn-primary" (click)="demo()">testing</button>

ch-3 angular spa with basic routing

1.ng generate component header

2.ng generate component section

3.ng generate component footer

4.ng generate component courses

5.ng generate component about-us

6.ng generate component contact-us

ch-69 angular intro to sass language

1.<ul>
	<li><a href="#">home</a></li>
	<li><a href="#">images</a></li>
	<li><a href="#">videos</a></li>
	<li><a href="#">movies</a></li>
	<li><a href="#">about us</a></li>
</ul>

->

//variables
$a_tag:green;
$large_font:40px;



ul{
	list-style:none;
	background-color:$a_tag;
	li{
	display:inline-block;
	a{
	text-decoration:none;
	padding:0px 32px;
	color:$a_tag;
	}
	a:hover{
	color:blue;
	font-size:$large_font;
	}
	}
}

->

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100&family=Open+Sans:wght@300&family=Roboto:wght@100&display=swap');

//sass map
$font_size:(
large:60px,
medium:40px,
small:20px,
);

$fonts: (
  one: Lato,
  two: "Open Sans",
  three: Roboto
);

$colors: (
  primary: blue,
  secondary: #323232,
  warning: yellow,
  danger: red,
  info: navy
);


ul{
	list-style:none;
	
	li{
	display:inline-block;
	a{
	text-decoration:none;
	padding:0px 32px;
	color:map-get($colors,info);
	}
	a:hover{
	color:blue;
	font-size:map-get($font_size,large);
	font-family:map-get($fonts,one);
	}
	}
}

2.<button class="border-remove">Testing</button>

<input class="border-remove">

->app.component.scss

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100&family=Open+Sans:wght@300&family=Roboto:wght@100&display=swap');

@import "./framework/sass/design";


//sass map
$font_size:(
large:60px,
medium:40px,
small:20px,
);

$fonts: (
  one: Lato,
  two: "Open Sans",
  three: Roboto
);

$colors: (
  primary: blue,
  secondary: #323232,
  warning: yellow,
  danger: red,
  info: navy
);


// function
@function demo($x,$el){
	@if($el == ul){
	@return green;
	}

	@else{
	@return map-get($colors,$x);
	}
}

ul{
	list-style:none;
	background-color:demo(danger,ul);
	li{
	display:inline-block;
	a{
	text-decoration:none;
	padding:0px 32px;
	color:demo(danger,a);
	}
	a:hover{
	color:blue;
	
	}
	}
}

button,input{
	@include remove-border;
	@include myshadow(blue);
	@include bgcolor(deeppink);
}

->design.css

@mixin remove-border{
  border: none
}


@mixin myshadow($color){
  box-shadow: 0px 8px 16px 0px $color;
}

@mixin bgcolor($color){
	background-color:$color;
}

ch-70 angular crm project setup

1.ng g m modules/all --flat --module app.module

2.ng add @angular/material

3.npm i -s @angular/flex-layout @angular/cdk

4.import { FlexLayoutModule } from '@angular/flex-layout';

5.ng add @angular/fire

6.npm install font-awesome

ch-71 angular firebase email signup

1.ng g m signup --route signup --module app.module

2.ng g s services/auth

ch-72 angular firebase route guard

1.ng g m profile --route profile --module app.module

2.ng g m signin --route signin --module app.module

ch-73 angular firebase email verification

1.npm install sweetalert2 --save

2.import Swal from 'sweetalert2'

3.npm install animate.css --save

ch-74 angular crm customers part 1

1.ng g m profile-data/customers --route profile-data/customers --module profile/profile.module

2.ng g s services/firestore

ch-74 angular crm customers part 2

1.https://www.npmjs.com/package/ngx-cookie-service

2.npm install ngx-cookie-service --save

3.import { CookieService } from 'ngx-cookie-service';

4.ng g s services/storage

ch-75 angular firebase drop upload and image crop

1. npm install ngx-image-cropper –save

2.import { ImageCropperModule } from 'ngx-image-cropper';

3.import { ImageCroppedEvent } from 'ngx-image-cropper';

Sunday, 11 April 2021

ANGULAR