- Angular is a JavaScript framework.
- Create reactive Single Page Applications.
- MVC framework.
- Maintainability, Productivity, Consistency
- Components are the main building block for Angular applications
- class
- template
- metadata
- It is a deacter.
- Supplaying confication metadata.
- ngModule like java pakeges,c++ namespaces.
- properties :Declarations(components, directives, and pipes local scope ), Exports, Imports, Bootstrap, Providers(global scope).
-
Decorators- Typescript feature used for passing metadata.
-
Decorators- Decorators are functions that will retrun function.
-
Decorators- invoke at runtime.
-
Decorators- start with @ sign .
-
Decotrator where expression must evaluate to a function that will be called at runtime with information about the decorated declaration(behaviors).
-
Decorators types
- Class Decorators - @ngModule @Component
- Proparty Decorators- @Input @Output
- Methord Decorators- @HostListaner
- Parameter Decorators- @Inject
- Decorators
- @ ngModule
- Supplaying confication metadata.
- @ Component
- identifies the class it as a component class, and specifies its metadata
- @ Input
- Parent to Child share data.
- @ Output
- Child to Parent share data.
- @ ViewChild
- access and manipulate DOM elements, directives and components (multiple not posbblie use viewChildern)
- @ ViewChildren
- Returns the specified elements or directives from the view DOM as QueryList
- @ Directive
- custom behavior to elements in the DOM.
- attrubute Custom
- strcteral custom
- @ HostBinding and @HostListener
- useful in custom directives
- @HostBinding lets you set properties on the element or component that hosts the directive
- @HostListener lets you listen for events on the host element or component.
- @ ContentChild and @ ContentChildren
- ContentChild is used to select projected content.
- ContentChild get access to an element in the content of the component or directive.
- ContentChild has an equivalent decorator to select multiple elements.
- MetaData tells the angular on how to process typescrpit class.
- metadata proparties in a JSON format.
- @Service not a decoatator.have to use the @injecble for angualr services.
- A template is a chunk of HTML.
- just like regular HTML, but with a lot more functionality.
- Control the UX/UI by coordinating data between the class and the template.
-
Interpolation.
-
Template expressions.
-
Template statements.
-
Template reference variables
-
Property binding.
-
Event binding.
-
Two-way binding.
-
Attribute, class, and style bindings
-
Built-in directives
- Built-in attribute directives
- Built-in structural directives
- Template expression operators.
- pipe (|)
- transform data
- Pipes are simple functions you can use in template expressions to accept an input value and return a transformed value.
- bulit in pipe and Custom pipe
- safe navigation operator ( ?. )
- Binding syntax.
- One-way Binding:- Interpolation, Proparty, Attribute, Class, Style ( data source to view target)
- One-way Binding:- Event( view target to data source)
- Two-way Binding:-Two-way
- Data binding automatically keeps your page up-to-date based on your application's state.
- HTML attributes and DOM properties
- attributes is string value
- attributes is not change
- Attributes are refering to additional information of an object.
- Properties are describing the characteristics of an object
- Property and attribute comparison( boolean value is easy to read, the syntax is shorter, and a property is more performant.)
- disabled(boolan property) property of the button's DOM element, not the attribute.
- Remember that HTML attributes and DOM properties are different things, even when they have the same name.
- Directives are classes additional behavior to elements (tempate or html).
- common, form, router (ngIf, formGroup, routerLink)..
- Type of Directives
- Components
- it has its own tempates
- directives with a template
- Attribute directives.
- change the appearance or behavior of an element, component, or another directive.
- ngClass
- ngStyle
- ngModel
- Structural directives
- change the DOM layout by adding and removing DOM elements.
- ngfor
- ngIf
- ngSwitch
- Custom directive
- extend the functionality of HTML
- Custom Attribute Directive
- Custom Structural Directive
- Parent to Child: @Input
- Child to Parent: @Output() and EventEmitter
- Child to Parent: @ViewChild
- sibling: Use Serviecs Unrelated Components
- Dom Element
- ng-container - hold directives without creating an HTML element.
- ng-content - project content inside a component template.
- ng-template - render the content manually.doesn't render anything by default.only stucteral directives for use
- number of methods called in a sequence to execute a component at specific moments is known as lifecycle hook.
- Interface is a fundamental instrument to hook into the lifecycle
- Interface is “AfterViewInit,” and the method for this is ” ngAfterViewInit.”
- Constructor() -One time
- one Time Call
- constructor is a special method which will be called whenever we create new objects
- generally used of initializing the class members
- ngOnChanges() -Every Time
- handle the changes.
- @input poparty change
- changed property name to a SimpleChange object, which holds the current and previous property values
- ngOnInit() -One time
- after the constructor is called and all the variables are initialized.
- ngDoCheck() -Every Time
- becarefully handile
- any change working start this methord infintiy call.
- First parent after child after all componet.(app componet all paces work this ngDoCheck())
- each time anything that can trigger change detection has fired (e.g. click handlers, HTTP requests, route changes, etc…). This lifecycle hook is mostly used for debug purposes;
- ngAfterContentInit()-one Time
- This is called after components external content(through ng-content) has been initialized.
- ngAfterContentChecked() -Every Time
- fully initialized the component/directive's content.
- ngAfterViewInit() -one Time
- Fully initialized all content of a directive.
- First Child after parent
- ngAfterViewChecked() -Every Time
- method that is invoked immediately after the default change detector has completed one change-check cycle for a component's view.
- ngOnDestroy() -one time
- data and functinally reusable.
- Easy data access and manipulation
- Share data across one or multiple components
- sequences of data which is emitted asynchronously over period of time.
- angualr use Observables most asyc opertions.
- http
- Routing
- Event handing
- Observer are just objects with three callbacks
- Observer is keep traking observable
- Observer is continuously listeing observable use three methords
- next()
- error()
- complete()
- third-party library called Reactive Extensions (RxJS)
- Observables help you pass data asynchronously and are great for calling on an API
- They are similar to promises
- Promises execute once and then are done.Observable continue to be observed after the event occurs
- Promises cannot be cancelled
- RxJs provides a method called “pipe” to interact with streams
- map
- fillter
- subject - communcate croess component
- catchError
- Handling user input with forms
- perform many other data-entry tasks.
- two approch
- Template-driven forms
-
simple form
-
esay to use
-
don't scale as well as reactive forms
-
Data flow - Asynchronous
-
Data modal - Unstructured and mutable
-
Form validation - Directives
-
FormModule, ngForm, ngSubmit, ngModel, ngModelGroup
-
way to handling valudations
- Highligth the errors
- Disable the submit button
- Custom felid valudation -show/hide Error Message
-
Set value in template-driven forms
- Two-way data binding
- Set value default
- Set value individually
- Reset form
- Use the template reference variable
- Set value default
- Set value individually
- Set value of nested FormGroup
- patch value
- Reset values
- Reactive forms
-
used to create Angular reactive form.
-
scalable, reusable, testable
-
Data model - Structured and immutable
-
Data flow - Synchronous
-
Form validation - Functions
-
setValue and patchValue
- both set the value of a control in a FormGroup.
- setValue - we have to set the value of All controls
- patchValue - we have to set the value of sapific controls
-
three fundamental API
- FormControl
- it is a class. get and set values and valudation.(input tag)
- FormControl Directive - FormControl instance to form a control element.
- FormControlName - FormGroup under FormControl control.
- FormGroup
- track value and validity state of group of FormControl
- FormArray
- tracks the value and validity state of array of FormControl, FormGroup or FormArray
- FormBuilder
- The FormBuilder provides syntactic sugar that shortens creating instances of a FormControl, FormGroup, or FormArray
-
Grouping form controls
- FormGroup with FormControl
- FormGroup with FormControl, FormArray, Nexted FormGroup
- FormBuilder with FormControl
- FormBuilder with FormControl,FormArray, Nexted FormBuilder
-
Control status CSS classes
- .ng-valid
- .ng-invalid
- .ng-pending
- .ng-pristine
- .ng-dirty
- .ng-untouched
- .ng-touched
- .ng-submitted
- navigate from one view to another view
- RouterModule
- Configaring Routes
- RouterOutlet
- Routerlink
- Wildcard router
- Redirecting router
- router parameter
- Child Routes / Nested Routes
- Relative router (:id)
- Types of module loading
- Eager loading
- by defult loading
- root module is always eager loading
- All module are downloaded after application strat
- working fine small apllication
- Lazy loading
- Lazy loading helps you render an application faster
- Feature modules under Lazy Loading would be loaded on demand after the application starts
- Preloading
- enable preloading of all lazy loaded modules
- Lazy loaded Modules in the background asynchronously
- two type bulit-in and Custom-type
- Router guads
- canActivate( LoginGuard, LoginOutGuard )
- HTTP is a protocol (protocol is systm rule that define how data is exchanged)
- OSI modal Application layout
- http - Hyper Text Transfer Protocol
- communication between web clients and servers
- Table Of Contents
-
HTTP Client module
-
HTTP GET, POST, PUT, DELETE
-
Type Safety
-
Request Parameters
-
HTTP Headers
-
RxJs operator
- map - map to transform a collection of items into a collection of different items.
- filter - fitering data
-
HTTP Error Handling
- Catching Errors in HTTP Request
- track your errors to improve UX
-
Component
- observable The second callback error
-
Service
- catchError Retrun throw it back to component
-
Globally
- You are unauthorized to access the API Service,
- You are authorized, but forbidden to access a particular resource
- The API End Point is invalid or does not exist
- Network error
- Server down
-
HTTP Interceptors
- Interceptors are a unique type of Angular Service
- intercept incoming or outgoing HTTP requests using the HttpClient modify
- similar to the concept of middle-ware with a framework like Express
- chain Interceptors
- Interceptors Applications
- Handling HTTP Headers (Auth)
- The Global HTTP error handling(404,500,401)
- BasePath set
- Request respone time calculate
- Loading spnner using
-
Progress HTTP Events
-
HTTP Status Codes
- 401 - Unauthorized
- 403 - Forbidden
- 404 - Not found
- 500 - internal Server Error
-
Change Detection means updating the view (DOM) when the data has changed.
-
two Change Detection Strategies
- default
- Change Detection checks for all components from top to bottom if a template value has changed.
- onPush
- This change detection strategy provides the possibility to skip unnecessary checks for this component and all it’s child components.
- the change detector is only triggered if a new reference is passed as @Input() value.
- Be careful - not do not trigger change detection(setTimeout,setInterval, any RxJS observable subscription(http))
-
that cause change detection trigger ?
- any browser event (click, keyup, etc.)
- setInterval() and setTimeout()
- HTTP requests via XMLHttpRequest
-
value types
- data types (number,string,boolean,etc..)
- data structures (array,object,etc..)
-
Memory Type
- stack memory
- store their value on the stack memory(data types) technically not true
- heap memory
- store a reference on the stack memory.which points to their actual value on the heap memory.(data structures)
- Understanding ChangeDetectorRef
- detectChanges
- markForCheck
- detach
- Animation provides the illusion of motion: HTML elements change styling over time.
- npm install @angular/animations@latest --save
- import BrowserAnimationsModule preferably in your root module.
- Angular Material UI component library
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent