Angular is a js framework for (SPA’s) Single page applications
What is a SPA
Single page application
Single html file is loaded at the start, but as you navigate around the site it is still the same html file, It is only rendering different views on the page with javascript loading it in the background
Why is this good?
good for performance
the client no longer has to go out and talk to the server with every request like it used to. Instead it only reaches out to the server in the background when it needs some additional info from the server making it very responsive
I am using ts-node for typescript REPL for practice and experimenting
just type ts-node in the terminal after installing it via npm and you will get a REPL environment for ts
How angular works
The typescript we write gets compiled to javascript so that way when the code is deployed, the client can do all the processing on their side
How the does the index.html file know to load angular
The script imports at the end of the html file are what the cli imports automatically. This triggers angular
Where is the main method that gets triggered in angular project
src/main.ts
1
2
3
4
5
6
7
import{platformBrowserDynamic}from'@angular/platform-browser-dynamic';import{AppModule}from'./app/app.module';// bootstrap the AppModule and start the applicationplatformBrowserDynamic().bootstrapModule(AppModule).catch(err=>console.error(err));
Where is this AppModule that gets bootstrapped and starts the angular app
src/app
this folder has all the parts for the AppModule where app.module.ts has the outer layer
We have simple html code for our component like this
1
<h2>server component</h2>
We have to tell the main AppModule to load our component
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import{NgModule}from'@angular/core';import{BrowserModule}from'@angular/platform-browser';import{AppComponent}from'./app.component';// our new server componentimport{ServerComponent}from'./server/server.component';@NgModule({declarations:[AppComponent,ServerComponent// register our server component in the app module],imports:[BrowserModule],providers:[],bootstrap:[AppComponent]})exportclassAppModule{}
Now finally we can render our new component in the app-root
1
2
3
4
5
<h3>I'm in the app component</h3><br><app-server></app-server>
Creating our own component via (CLI)
ng generate component servers or for short ng g c servers
This will generate the same code and will even update the app.module.ts to add the component to be used
THIS IS AWESOME!!!
Inline template & Css
you can have your html templates inline with the typescript code instead of in a separate file
import{Component,OnInit}from'@angular/core';@Component({selector:'app-servers',// use a html file// templateUrl: './servers.component.html',// use html inlinetemplate:'<app-server></app-server><app-server></app-server>',// use a css file// styleUrls: ['./servers.component.css']// use css inlinestyles:[`
h3 {
color: dodgerblue;
}
`]})exportclassServersComponentimplementsOnInit{ngOnInit():void{console.log('')}}
Component Selector
we can tell angular to have our component be an html element, an id or an attribute
Communication between typescript business logic and html template code
4 types of Databinding
String interpolation
``
just display the data
Property Binding
[property] = "data"
have the the property be tied to an element
Event Binding
(event) = "expression"
have an even trigger an expression
Two-Way-Binding
[(ngModel)] = "data"
String interpolation
expression placed between the
As long as the expression resolves to a string it will work without issue
You also cannot write multi-line expression between the curly braces
1
2
3
4
5
6
7
8
9
10
11
12
import{Component}from"@angular/core";@Component({selector:'app-server',templateUrl:'./server.component.html'})exportclassServerComponent{// our two variablesserver_id:number=1000;status:string='Down';}
1
<p>Server with ID: is </p>
Property Binding
bind a property like disabled for a button to a variable
[disabled]="allowNewServer"
This will bind the !allowNewServer variable to the disabled property
so when the allowNewServer is true, the button will be disabled
and when allowNewServer is false, the button will not be disabled
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import{Component,OnInit}from'@angular/core';@Component({selector:'app-servers',templateUrl:'./servers.component.html',})exportclassServersComponent{allowNewServer:boolean=false;// after two seconds allowNewServerWillBeSetToTrueconstructor(){setTimeout(()=>{this.allowNewServer=true;},2000);}}
import{Component,OnInit}from'@angular/core';@Component({selector:'app-servers',templateUrl:'./servers.component.html',})exportclassServersComponent{// variablesallowNewServer:boolean=false;serverCreationStatus="No server was created!"// after the button is created, it will wait for two seconds then disable itconstructor(){setTimeout(()=>{this.allowNewServer=true;},2000);}onCreateServer():void{this.serverCreationStatus="Server was created!";}}
@Component({//})exportclassServersComponent{// variablesallowNewServer:boolean=false;serverCreationStatus="No server was created!"serverName='';onCreateServer():void{this.serverCreationStatus="Server was created!";}// $event gets passed hereonUpdateServerName(event:Event){// the stuff in parens are just to make tyepscript happythis.serverName=(<HTMLInputElement>event.target).value;}}
<!-- Binded to the variable --><inputtype="text"class="form-control"[(ngModel)]="serverName"><!-- Not binded to the model
meaning if it were to change somewhere else, the change would not be reflected here
--><inputtype="text"class="form-control"(input)="onUpdateServerName($event)"><p></p>
Directives
directives are instructions in the DOM
They are built-in directives into angular
You can also create your own like we have been doing like below
<p *ngIf="serverCreated">Server was created, server name is </p>
the *** at the beginning of *ngIf indicates that this is a **STRUCTURAL DIRECTIVE
used to change the structure of the view by manipulating the DOM
note that p element will not be there if serverCreated is false
if serverCreated is true angular will place the p element on the page
else for NgIf
we can add an else condition to an *ngIf by looking at the following example
*ngIf="serverCreated; else noServer "
noServer is referring to the local reference in the code below
<ng-template #noServer>
the #noServer specifies a local reference that is referred to in the *ngIf above
1
2
3
4
5
6
7
8
<!-- Server created --><p*ngIf="serverCreated; else noServer ">Server was created, server name is </p><!-- no server created --><ng-template#noServer><p>No server was created!</p></ng-template>
ng-template
The ng-template directive itself doesn’t produce any visible output in the DOM; instead, it acts as a placeholder for content that can be used in conjunction with other directives to control the rendering of that content.
It is often used with other structural directives like *ngIf, *ngFor, and *ngSwitch, allowing you to define template fragments
Local References
local references, also known as template reference variables
are used to capture references to elements or directives in the template and make them accessible within the component’s TypeScript code.
Local references are prefixed with a hash (#) in the template
1
2
3
4
5
<!-- Using a local reference with an input element --><input#myInputtype="text"><!-- Using a local reference with an Angular directive (ngIf) --><div*ngIf="showElement"#conditionalDiv>This element is conditionally displayed.</div>
In the examples above, #myInput and #conditionalDiv are local references to the input element and the ngIf-controlled div element, respectively.
You can then access these local references in your component’s TypeScript code by using @ViewChild or @ViewChildren decorators. For example:
