Angular Folder Structure
node_module - 3rd third party library - excluding from including it into git
(code recides)/ notmoved into production environment
src -
app folder
assets - static assest
environment - serveer ip address,db connection
environment - specific configurations are stored in this place
src
app
compo
Environment
Prod
Test - db cred
index.html - main html rendered when angular app runs
references not presented , injected when angular runs
fav - browser icon
main.ts - starting point of program - boostraps main module/appModule
bootstrapping main module to app module
polyfill file - feature supported by angular vs features supported by browser
polyfill file - import script required for running angular - not available
in current version of javascript
angular uses features which are not available in current version of
javascript
polyfill fills the gap between features of angular and features present in
javascript from browser
test.ts file - this file is used for testing file
editor config - define set of rules while coding the application
styles.css - global styles
edit config - setup environment ,different coding standard ,standard rules
gitignore file - managing version tools - tool managing source code
angular.cli.json - project name,root folder name , source folder name
karma.config.js - test config file
package.json - dependencies are listed in this as json
tsconfig.json - bunch of settings for typescript compilation - typescript
code into javascript
Typescript language:
strongly typed language
Interface,Types,Generic,fields,access modifier,properties,class
SuperSet of javascript
Transpiler can catch errors if javascript is having some issues
I need to earn 15 lakhs per annum and invest it aggressively
Execution flow
1) index.html is rendered in html view upon ng serve command / angular app
runs
2) main.ts file is hitted
3) appmodule
4) appcomponent
5) apphtmlview
Component is a typescript class which which contains properties like
( templateURLS,styleURL,styles,template,selector)
its decorated with @Component decorator - @Component decorator which is a function
that serves as a metadata which angular uses to determine
behavior
decorator can be applied to parameters,methods,properties,class
Component -
interact with service or handle user action
implement business logic
handle data binding
emitting events or responding to user actions
different types of selector
Components - selector property - [angular_bracket] as attribute , '.class_name'
class="class_name" as class attribute
template,styles vs templateURL ,styles
different types of binding
1) two-way data binding ( property binding and event binding )
2) one-way data binding ( property binding )
3) event-binding ( event binding ) component class to view template and view
template to component class
(data) = "expression"
[property] = "expression | propert_name_component "
[html_property] = "expression"
selector_name -> attribute vs class property
String interpolation - property binding
{{ expresssion }}
{{ methodname() }}
Property of DOM object is binded to property of a component class
all html tag are available as objects in DOM
[src]="property_name"
[hidden]="expression or methodName()"
eventBinding - capturing the event we get from ui view html page bind it to
components prop , field or method
(input)="methodCall($event)"
(click)="methodCall($event)"
[(ngModel)] = "methodCall($event)"
directive is an instruction to DOM
two types of directive
1) Attribute directive
2) Structure directive
components are building blocks for our application - handles user interactions ,
emits events data ,
interacts with services or makes http fetch call
directive is a class similar to component decorated with @Decorator which tells the
angular that its a decorator
*ngFor - structural directive - it modifies the content of the file
"let ite of item; let i = index"
{{ i }}
ngStyle directive - for dynamically changing the style or behavior using ngStyle
using property
[ngStyle] = "{isAvailable ? class1 : class2}"
<button class="btn-class" *ngIf="{isavailable=='available' else
ngTempElsePart }"></button>
<#ngTempElsePart ng-template>
</ng-template>
<div class="btn" [ngclass]= "cssclass: predicate"/>
example
<div class="btn" [ngclass]= "cssclass: fadeoutvariable
<span [ngclass]="{class_css: expression}"/>
ngclass is used to add css to a webpage element dynamically
Custom event binding ->
View to component - event binding
component to view - property binding
data binding - string interpolation
Custom Event Binding
@Input - child component properties
parent component to child component using @Input decorator
Cross origin resource sharing
- security feature implemented in wb application/browser which controls
sharing
resources between two different instances (domains,protocol,ports ) in
network
- define rules at server i.e. Allow-access-control-origin , Allow-access-
control-methods,
allow-access-control-credential,preflight
courses component is parent component
filter component is child component
<app-courses_component>
<div>
<app-filter [oneChild]="parentFunction1()"
[twoChild]="parentFunction2()" [threeChild]="parentFunction3()"></app-filter>
</div>
</app-courses_component>
parentFunction1(){
this.courses.length;
}
parentFunction2(){
this.courses.filter(x => x.category==='value2').length;
}
parentFunction3(){
this.courses.filter(x => x.category==='value3').length;
}
inside child component - filter component
export class filtercomponent{
@Input('alias_name') oneChild : number = 0; /*alias_name should be used at
parent component*/
@Input twoChild : number = 1;
@Input twoChild : number = 2;
constructor()
{
}
ngOnInit(): void /*return_type*/ {
}
}
// Blob_string + ByteStream
// HttpClient
// WebRTC
// CSS_Painting
// Browser_Optimization
selectedChildTag : string = 'All';
@Output decorator
childpropertyOutputEmitter : EventEmitter<String> = new EventEmitter<String>();
ChildUsedMethodToUpdateOutputEmitter()
{
childpropertyOutputEmitter.emit(this.selectedChildTag);
}
parent-component
<app-child (childpropertyOutputEmitter)="receiver($event)"/>
<app-child #reference></app-child>
<app-child (click)="func(reference)"></app-child>
<app-child *ngFor="reference.property"></app-child>
store a reference to a DOM element, component,directive,template
ViewChild - query and get a reference to DOM element in component from html. first
matching element
@viewChild('templatename') prop : ElementRef;
viewchildren -
@viewchildren(('templatename') prop : QueryListener<ElementRef>;
<div *ngIf="condition ;else ref">
<ngtemplate #ref>
</ngtemplate>
ngtemplateoutlet
type cast / convert / property setting at child class
f_e(x) = f_e(x^2) + x*f_e(x^2)
f_o(-x) = f_o(x^2) - x*f_o(x^2)
t = x^2
replace x with -x still t is not -t as (-x)^2 -> (x)^2
f_e(t) = f_e(t^2) + t*f_e(t^2)
f_o(-t) = f_o(t^2) - t*f_o(t^2)
as recursion breaks here we need to consider performing this convolution in
complex number domain in euler form ?
convert number from coefficient form to point form
perform convolution
point form to coefficient form
