ANGULAR BASIC NOTES
Angular version is - 17 , node.js version is 19.7.0
what is angular ?
angular is an one of the front end framework its has to help to build the interactive and web site and its an single page application and its used for an client side application angular will be contains the components its an javascript framework writen in typescript
**
what is TypeScript ?**
typescript is an superset of javascript and it maintain the reliability its work very fine in any environment
Features of Angular ?
support type script
support web work
interactive UI
SPA
Advantage Of Angular ?
SPA
flexible and structure application,cross platform,reusable code and testability
what is node.js ?
node js is an back end frame work
what is NPM ?
NPM- Node Package Manager its an online repository its used to install and maintain the packages its provides features and functionalities for angular application we can see the libraries in node_modules in angular application
what is CLI?
CLI - Command Line Interface its used to develop and initialize the angular application with the help of CLI we can work with terminal create the component,class,service etc..
what is the Command of creating the Component?
ng g c componentname
what is ng serve command ?
used to build the server locally to execute the application
how to create the class in angular ?
ng g class classname
how to create the service in angular ?
ng g service servicename
which is used to convert the typescript file to javascript file ?
TS compiler convert the typescript to javascript the browser will understand only the javascript fromate only
Angular Data Binding ?
Its an Two way data binding its happen in both ways send and receiver end if your are changing anything in component it refeclts in view vice versa if you are changing anything in view it will be automatically refeclt in component
ngModel -directives make this two way data binding posible
Output date using String interpolation and Property binding
Input data using Event Binding
for both ways Two way Binding
Types of Data Binding in angular ?
There two types of data binding in angular
1.oneway binding - one way binding its used in single way like if you are modifying in model it will be refelect in the view page but if your view you are modifying anything it wont be refeclt in the model
Example of One way binding is : **Angular interpolation / string interpolation , property binding,Event binding
**
Angular interpolation / string interpolation : its an one way binding property and its shows output to model to view we can use this with in the syntax of {{}} its only work with string not with number,boolean,etc..
Ex: <li>Name:{{firstName}}</li>
Property Binding : its an one way binding property and here we are creating the property in dom file its an non-string data value like boolean
**
Ex: <input type="email" [value]="user.email">**
Event Binding : its an one way binding and here the event we are giving like mouse over, onclick,mouse out etc
2.two way binding : here we can interact with both way sender and receiver end like if you are modifying anything in component it will be refeclt in view similarly if you are modifying anything in view it will be refectl in component.its like [(ngModel)] this syntax
ngModel its makes the two way binding
3.Attribute Binding : Attribute binding in Angular helps you set values for attributes directly,With attribute binding, you can improve accessibility, style your application dynamically, and manage multiple CSS classes or styles simultaneously.
Ex:<!-- create and set an aria attribute for assistive technology -->
<button type="button" [attr.aria-label]="actionName">{{actionName}} with Aria</button>
4.Class And Style Binding
Directives in Angular :
Directives are used to change and modify the appreance of the DOM layout there are 3 types of directive in Angular
1.Component Directive : NgComponentOutlet and NgTemplateOutlet
2.Structural Directive : there are refers as *symbol these are use to change and modify the DOM elements
Ex:* ngIf Directive - its simlar to the the if statement, ngSwitch Directive *- similar to the switch statement
*ngFor Directive - its used to iterating the purpose
3.Attribute Directive : Its used to change the look and behaviour of the DOM elements Ngclass,Ngmodel,Ngstyle
Ex: ngClass Directive : its used to add or remove the CSS elements in HTML
<div [ngClass]="className">Hello</div>
with this className we can provides the styles in css file
ngStyle Directive : its used to the styles in your HTML page
compare to normal html NgStyle its provides an dynamic style
**<div style="background-color:red">Happy</div>
<div [ngStyle]="{'background-color':'red'}">Hello</div>**
What are The Types of Form in Angular ?
Reactive Forms and Template Driven Forms
These both forms are used to get the input from the view and it should be validate in that
The Reactive forms are more reliable,and its more scalable,these form are more preferable to use while forms are the key part of your application we can use that reactive forms
The Template Driven forms are simple forms,its very easy to use but not scalable like reactive forms,if they need any basic form we can go for this form
What is SPA ?
SPA - Single page Application Its an new feature of an angular it's does not load the new HTML page to display the new page content insted of generate dynamically its works faster
Diffrence Between Angular and Angular JS ?
Angular Js :
language support only Javascript , support model-view-controller,not supported by mobile browser,difficult to manage in bigger application,
Not contains CLI tool,its not uses the dependancy injection
Angular :
language support Javascript and TypeScript, support component and directives, supports all the mobile browser,easy to manage in bigger application,it contains CLI tool,its uses the dependancy injection
Decorators in Angular ?
Decorators are used to store the meta data about class,method,property
inside the component contains like selectors,templateUrl,StyleUrl also an meta data
undert the @NgModule also its contains the meta data like imports,providers,declarions,bootstrap
all decorators are represents with @ symbol
meta data - provides the information about the other data
There are 4 Types of Decoraters
1.class decorators - @NgModule,@Component
2.Property decorators - @Input,@Output
3.method decoraters - @HostListner
4.parameter decorators - @Inject,@Self**
What is Component ?
Components are the basic building blocks of the user interface in angular application
every component associate with template or directives its contains the root component which means AppComponent
app.component.ts its an base file(important)
What is Module In Angular and What is app.module.ts file?
Modules is a place we can add components,directives,pipes,services and related to the application
@NgModule its an decorater its contains the declaration,imports,bootstrap,providers
**How can angular App gets Loaded and sstarted? what are Index.html,app-root,selector and main.ts file?
**
index.html->main.ts->app.module.ts->app component
<app-root> its an root selector and its only loads first when the application starts
main.ts - is an entry point of web app and its bootstrap the appmodule
app.module.ts its bootstrap the appcomponent
app-component(or) app-route-component is the html which you will see finally
what is Bootstraped Module and Bootstraped Component ?
when the angular application start then the first module is launched is bootstrap module and bootstrap component
What is Pipes in Angular ?
Pipes are simple functions which accepts an input values and return a transformed values
There are two types of pipes1.Buildin pipes and 2.Custom pipes
Build in Pipes : Uppercase,lowercase,date,percentage,currency,decimal,slice,json
Ex: <h1>{{title | lowercase}}</h1>
<h2>{{title | uppercase}}</h2>
<h2>{{123.87 | currency}}</h2> - currency pipes (its in dollar)
<h2>{{1234.57 | currency:'INR' }} - converting as an indian ruppes
Chaining Pipes : its used with multiple pipes
{{dob | date | uppercase}}
Some key features include:
Pipes are defined using the pipe “|” symbol.
Pipes can be chained with other pipes.
Pipes can be provided with arguments by using the colon (:) sign.
ngModule in Angular ?
Its an module file its has contains the declarations,imports,providers,and the bootstrap
**
What is ParentComponet?**
A parent component can pass data to its child by binding the values to the child's component property //AppComponent
**
Angular Hook Life Cycle ?**
A component from creation to destruction goes through the several stages and these stages are the life cycle hooks
Constructor - its not an part of the hooks life cycle its always execute before the angular hooks
OnInit its an inteface implemented by the Component
ngOnChanges() - called when the input property changes(@Input) we can call multiple times
ngOnInit() - called when the component is created and its perfroms some initialization tasks
ngDoCheck() - Detect and act upon changes that Angular can't or won't detect on its own. these contaisn 4 child component
i.ngAfterContentInit() - Responds after Angular projects external content into the component's view.
ii.ngAfterContentChecked() - Respond after Angular checks the content projected into the component.
iii.ngAfterViewInit() - Respond after Angular initializes the component's views and child views.
iv.ngAfterViewChecked() - Respond after Angular checks the component's views and child views.
ngOnDestroy - Call when the component is destroyed
What is ngOnInit in angular life cycle hook ?
singlas the activation of component,its an 2 life cycle hooks in angular,its called only once in life cycle hooks,by default present in the component
Angular 17 New Featurs is ?
Declarative Control mechanisum
Where the Project Exceution will be start in Angular ?
From main.ts file its starts the execution of the Programme
When You Create the Component there are 4 files automatically deploys like html,css,spec.ts,ts
what is Sweet Alert ?
Sweet Alert is a custom dialog library that replaces JavaScript's "alert" and "prompt" features.
there are 4 tytpes of sweet alerts is there warning,error,info,sucessfull
What is onInit in angular ?
Its an lifecycle hook deployed after the angular has initialized all data-bound properties and directives
ngOnInit - its used to add the additional initialization tasks bussiness logic,invoked only once
ngInit - we can evaluate the expression in the current scope
constrctor - invoked first before the life cycle hooks
**
Types of Dependancy Injection :**
1.constructor based injection,2.setter based injection,3.interface injection
NgModule : its contains the group of component,directives and pipes so while we are using the ngModule its refers with @NgModule its has contains the imports,bootstrap,declarations,providers
NgModel : basically it will used in the two way data binding ngModel is typically used with form controls, such as input fields, text areas, and select elements. Here's an example of how to use ngModel with an input field:
**<input [(ngModel)]="name" type="text">
**In this example, the ngModel directive is used to bind the value of the input field to the name property in the component. The [(ngModel)] syntax is called "banana in a box" syntax and it provides two-way data binding.
When the user types into the input field, the name property in the component is updated automatically. Similarly, when the name property in the component is updated, the value of the input field is updated automatically.
**
Diffrence Between FormGroup and Form Controll?**
In Angular, FormGroup and FormControl are two **important classes used to create reactive forms.
**
A FormControl is a single form control element, such as an input, select, or textarea. It is used to create forms that collect a **single piece of data, such as a user's name, email address, or password.
**
A FormGroup, on the other hand, is a collection of FormControls. It is used to create forms that collect multiple pieces of data, such as a user's name, email address, and password.
To get the validity of a FormGroup, you can use the valid property. The valid property returns a boolean value indicating whether the FormGroup is valid. A FormGroup is valid if all of the FormControls in the FormGroup are valid.
FormGroups and FormControls are powerful tools that can be used to create complex and dynamic forms in Angular.
Flow Of Angular
Its starts with an main.ts from here to its goes to the app.module.ts and its goes to the bootstrap has contains the
Observable is used to handle the asynchronus events and Subscribe
Observable able to handle the multiple data without subscribe it wont work like Observable its an lazy one it would be an need of an subscribe
Asynchronous is a non-blocking architecture, so the execution of one task isn't dependent on another. Tasks can run simultaneously.
Synchronous is a blocking architecture, so the execution of each operation depends on completing the one before it.
**
Subscribe its used to display the message**
AOT stands for Ahead-of-Time compilation. It is a process in Angular where the templates and components of an application are compiled during the build phase, rather than at runtime. This improves the performance of the application by reducing the size of the bundle and optimizing the code.
JIT - Just In Time Compiler its an component of JVM its convert the Its works on the Runtime and JIT compiler converts byte code into native machine code
**npm install bootstrap and its should added the CDN in html file
**
<app root> - The app root in Angular is the root component of an Angular application. It is the first component that is called when the application starts. The app root component is responsible for rendering the entire application, including all of its child components.
**
Diffrence Between Let,Var,Const**
let - its used create the variable which are all used to access within the block its have an block of scope let variable can be reassigned
const - Used to create variables that can only be accessed within a block and remain unchanged. const variables have a block scope. const variables are constant and cannot be reassigned after initialization.
var - Used to create variables that can be accessed throughout a function. var has a functional or global scope.
What is Service ?
A service is an typescript class and reusable code which can be used in multiple components
service can be implemented with the help of dependancy injection
create the service use the command like:ng g service servicename
How to use Dependancy Injector with service in Angular ?
there are 3 ways
1.we need create the providers(service file) in @Component
2.pass the parameter inside the constructor(private logginService:LoginService)
3.using this property to access the service this.logginService.LogError();
**
Dependancy Injectors**
@Injectable in service.ts
@Injectable({
provideIn:'root'
})
**@Injectable decoratpr one service can be used by another service
**
we can use this with the help of this our service will be available in the throught out the application and all the components
Providers are deployed in first @NgModule providers and We can use inside the @Injectable here if you are using we can access throught the application in every component and third one in using inside the @Component
What is Constructor in Angular?
its an method in typescript class its called automatically when class in instanatied
constructor run before the angular hook and its not part of the life cycle hook
used to inject dependencies(service) in component class
**
Diffrence Between ngOnInit and Constructor ?**
Constructor :
Its not an part of the life cycle hook its created automatically when the class is being instained
its called before the lifecycle
its injecting the depedencies(service)
ngOnInit :
Its an part of the angular life cycle hook its called after the ngOnChanges in life cycle hook its signal about the creation of the component
used to perform in business logics
What is Asynchronous Operations ?
Observable are used to perform the asynchronous operations and handle the asychronous data
Synchronous - tasks are happen one by one if one completed its go for the another one task
Asnchronous - tasks are happend simultaneosuly
Diffrence between PROMISES AND OBSERVABLES ?
Promises - once all the data get from the server its send the data to the client its takes more time in that
Observables - its an streaming the data like continuous process it not going to wait for the whole data to receive and Observable aree lazy untill we use the subscribe() method we can cancellable using the unsubscribe() method
RxJS - its an father of an Observable
What is the Role Of HttpClient in Angular?
its an built in service class available in angular
@angular/common/http package
performs the Http Requests
**What is TypeScript and Advantage ?
**
Typescript contains types streams,custom types,enum,interfaces etc but browser can't understand the typescript it only understand the javascript so the typescript has converted into javascript using ts compiler
typescript detects the error at the compile time
TypeAnnotation in TS ?
it is used to assign the type to the variable like
let i :number insted of number if i am giving anything it will show the compile time error
Data Types in TS ?
Build In Types : string,number,boolean,void,null,undefined
**
User Defined Types :** array,enum,classes,interfaces
What is any?
If we declare as any we can assign the any kind of value to the variable the typechecking has done by the compiler
What is assertion?
its informs the compiler about the type of a variable
NgForm in Angular ?
NgForm is the directive provided by Angular's FormsModule that tracks the form and its controls. It can be used in template-driven forms to get a reference to the form and its controls
Reactive forms, on the other hand, are a way to programmatically create forms in Angular. They use the FormControl, FormGroup, and FormBuilder classes to create and manage form controls.
**
Comparable and Comparator ?**
Comparable used for single sorting
its an interafce and its used the method as compareTo()
Collections.sort(List)
Comparator used for diffrent ways of sorting
its an interface and its used the method as compare()
Collections.sort(List,comparator)
@ComponentScan its used to scan the package which are provided and its used register the beans in the spring container
Design patterns its provided the proved soloutions its have 3 types of design patterns
1.singleton - for every request only one object is created
2.dependancy injection
3.factors pattern - used for creation of objects
Write SQL Query To Select 2 Highest Salary ?
select *from employee
group by salary
order by salary desc limit 1,1;
scope of bean ?
singleton(stateless) - creates the only one instances when if you called that one instance will be retured
prototype(stateful) - create the new instances when its called each times
request - the instances will be created the HTTP request
session - the instances will be cretaed the HTTP session
global session - The bean instance will be created per HTTP global session
JSP is a server-side technology, whereas Servlet is a small Java class program that runs on the server.
Interceptors is an class that is used to handle between Http request and the responce from the backend its used for logging and authentication purpose
Design Pattern - its provides the proved solution for that problem
singleton,dependancy injection,factory pattern
Singleton type its provide single object
bean scope - singleton,prototype,session,global session
class loader - bootstrap,extension,system
#ridestartson=ngModel: This creates a template reference variable called ridestartson that is bound to the ngModel two way binding.
form-group,form-label,form-controls - bootstrap css class
What is HAVING In SQL ?
Having its comes with aggregate function with folows of an group by and its like an similar to the where
view in SQL- its like an virtual table its contains data from one or more table view name its should be unique in database the view is a result of sql query
@RunWith - @RunWith is a JUnit annotation. It is used to tell JUnit to run the test using a specific "runner" class instead of its default runner
<router-outlet></router-outlet> is a placeholder in Angular that is dynamically filled based on the current router state It is a directive that is available from the router library
<div class="container mt-4"> - bootstrap class and the mt means margin top 4 units
REST TEMPLATE - used to make API calls and its used to make a restful web services basically rest template has contains HTTP request like get,put,post,delete,update
JSP - Java Server Page its used to create the dynamic web pages
servelet - its an java programme its works with the web server actually its handle the request and its processed the request and its returns the responce to the web server
Spring IOC - InvertionofControll its provides the responsibility to create the Object for bean to container and its manages the lifecycle of the bean there are two types of IOC bean factory and application context
Beanfactory,application context these both are interface acts as an spring ioc container the application context built in top of the bean factory
Two ways we can inject dependancy in spring 1.constructor and 2.setter
diffrence between setter injection vs constrctor injection ?
Constrctor Injection - used for many properties,not over rides the setter injection ,create the new instances if any modification has done means
setter Injection - used for few properties,over rides the constrctor injection , not create the new instances if any modificaton done means
Spring AOP is an Aspect-oriented programming (AOP) framework that is part of the Spring Framework. AOP is a programming paradigm that allows developers to modularize cross-cutting concerns, such as logging, security, and transaction management
Routerlink active - lets you add a CSS class to an element when the link's route becomes active
nav-link and routerLink - these are used for navigation and styling purpose
app-navbar: This class is likely a custom class that is used to customize the navbar further.
router-outlet - basically used for routing purpose if the component its matches with the routing rules its will be help to to navigate when the user selects specific route
@Input and @Output - @Input decortaor used to share the data to the Parent to child and @Output decorator used to share the data to child to parent