aws
Learning

AWS Concepts

This article lays out the basic AWS concepts to get a fundamental understanding of the AWS services and their usage. Storage Types S3 Types of S3 S3 – 2+ AZ (Availability Zone) S3 IA (Infrequently Accessed) S3 One Zone IA Reduced Redundancy Storage – 99.99% availability Glacier– Also supports Intelligent Tiering which moves objects around S3 types based on 30 days access. Writing to S3 has immediate consistency, but update/delete has eventual consistency. A random prefix can be used before folder/file names to make better partitioning, which will help in faster read/writes Allow users to read private data on S3,  … [Read More]

deployment
Learning

Deploying an Angular App

This article on Deploying an Angular App is part of the Learning Angular series. Deployment Preparations and Important Steps Steps:a) Build the app for production. Better to consider AIT or whatevr method we follow. ng build –prod –aot b) Set the correct elementIf Angular is being served form any folder that is not the root of the server, then the base href needs to be set to that folder.For an Angular app that is hosted on www.xyz.com/myapp, then we should set in the index.html fileor add it in the build script like ng build –prod –base-href=/myapp/ c) Need to make sure that  … [Read More]

angular modules lazy loading
Learning

Angular Modules and Lazy Loading

This article on Angular Modules & Lazy Loading is part of the Learning Angular series. Understanding the App Module Imports are a language feature that tells the compiler to where to look for the files and features that are required.Modules are a part of Angular which it sees as a way of binding multiple things together.Modules are a bunch of codes bundled together and imported as a single statement in the imports array, thus minizing the number of codes that are written in the AppModule.Everything provided in providers array in the AppModule gives a single instance on which the whole app works.Bootstrap  … [Read More]

http interceptor
Learning

HTTP Interceptor in Angular

This article on HTTP Interceptor in Angular is part of the Learning Angular series. Typically when we want to do soemthing with every request, it can be passe on to be done by an interceptor. In the current application case, the firebase auth token in the params.auth.interceptor.ts import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from ‘@angular/common/http’; import { Observable } from ‘rxjs/Observable’; export class AuthInterceptor implements HttpInterceptor { intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent> { console.log(‘Intercepted ‘, req); return next.handle(req); } } HttpHandler gives a special method to let the request continue its journer\y, and if not done, the request won’t proceed.Now to  … [Read More]

httpclient
Learning

Making HTTP Requests in Angular (HTTPClient)

This article on Making HTTP Requests in Angular is part of the Learning Angular series. MUST READ: Angular 6 and HTTP Angular 6 is currently the latest version of Angular and it deprecates the Http-access method taught in this module.What does this mean?It means that the method still works, still is secure – you can use it! But there is a better Http module to use now: HttpClient.I added a module (section 23) on that new client months ago, even before Angular 5 was released. You’ll meet it later in the course and we’ll easily update all our Http calls with the  … [Read More]

angular pipes
Learning

Pipes in Angular

This article on Pipes in Angular is part of the Learning Angular series. Introduction and Why Pipes are Useful Pipes are used to transform the output.For a case where one has a name as a string ‘Max’ and wants to output all in uppercase without making it uppercase throughotut the application.It would be better to modify the value just on display. For that one can use a builtin pipe ‘uppercase’Using it is simple {{ username | uppercase }} This would transform the username in whatever case to uppercase just for displaying and without affecting the original valueAs the job of a pipe  … [Read More]

angular forms template driven reactive
Learning

Angular Forms (Template Driven, Reactive)

This article on Angular Forms is part of the Learning Angular series. A typical structure how Angular handles forms { value: { name: ‘Murari’, email: ‘someone@gmail.com’ }, valid: true } Template Driven (TD) vs Reactive Approach Template Driven – Angular infers the Form Object from the DOM.Reactive Approach – Form is created programmatically as well as in the HTML, giving more granular control over the form. TD: Creating the Form and Registering the Controls Import the FormsModule in the AppComopnent importsThis will make sure that Angular is able to parse any form tag that is available in the HTML.Considering an example form:  … [Read More]

rxjs angular subject observable
Learning

RxJS in Angular (Observables, Subjects)

This article on RxJS in Angular is part of the Learning Angular series. Angular 6 and RxJS 6 If one is using Angular 6 and RxJS 6, and want to have their older codes work, need to use rxjs-compatnpm install rxjs-compat –save Analyzing a built-in Angular Observable A subscriber takes in 3 parameters as follows: this.route.params.subscribe( () => {}, // On Result () => {}, // On Error () => {} // On Complete ); Building and Using a First Simple Observable // Create this app import { Observable } from ‘rxjs/Observable’; import ‘rxjs/Rx’; // This provides some utility functions for use.  … [Read More]

routing guards
Learning

Angular Routing and Guards

This article on Routing in Angular is part of the Learning Angular series. In the app, we will have 3 sections:1. Home2. Servers– View and Edit Servers– A service is used to load and update Servers3. Users– View users. Setting Up and Loading Routes In the AppModule import { Routes, RouterModel } from ‘@angular/router’; const appRoutes:Routes = [ {path: ”, component: HomeComponent}, {path: ‘users’, component: UsersComponent}, {path: ‘servers’, component: ServersComponent} ] In the imports, add RouterModule.forRoot(appRoutes) Add directive to the place where you want to render the routed views. <div class=”row”> <router-outlet></router-outlet> </div> Navigating with Router Links And in <a> tags, pass  … [Read More]

angular services
Learning

Services in Angular (Dependency Injection)

This article on Services in Angular is part of the Learning Angular series. To write reusable tasks that can be used across multiple components. This is called as Services in Angular.Duplication of Code and Data persistence are two use-cases of Services in Angular. Why would you need Services When app becomes large, it is very difficult to manage the code and replicate them at multiple places. Services come to rescue. Creating a Logging Service A Service file is just a normal Typescript file and doesn’t need any declaration like that of @Component or @Directive.One can import, initialize and access the functions in  … [Read More]