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
5.
->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';
