DEV Community: abi

GIT Under the Hood

abi — Mon, 03 Oct 2022 16:35:25 +0000

# Git Under the hood

“Git is modern distributed version control system helps developers or anyone who want to keep track of changes in their file system” We can name it as a timeline of our project from beginning to end.

As an software engineers lot of us use Git ,only few know the exact internals or what happens under the hood.

what happens internally when you do a file change and commit it?

How is git tracking all the changes occurred for the file?

Sometime you may run into issues which you won’t know how to resolve without understanding how git works in the backend.

In this article, I am sharing a deep dive understanding on How Git works under the hood by taking simple examples.

Note : This article is to understand how git works using low level commands and what happens behind the scenes. It is not a guide to work with Git

Initialize a Git Repository

Lets start with initializing a Git repository using git init command.

It creates a hidden folder called .git which contains different files and folders inside

This folder contains all information and configuration needed for git to version control. Here we are mainly concentrated on objects folder where this will contain the tracking information of our file system.

Git 3 states or repository states

Working State - This is when you add, remove or modify something in the file. Git will notice the change but you will not formerly inform Git to save the changes. In traditional way these are “Untracked/ Not Staged Changes”

Staging State - This is when you inform Git of the change and tell Git to take note of that change. Commonly Known as Staging area. Staging changes can be done using git add command. Modification of file can be done even after staging it, which lets you see the file both in Working state and staged state.

Committed Stage - This is the stage where Git has saved your Working state changes in .git folder in the form of git objects. In Traditional way It is achieved using git commit command.

Here lets look into the Git Internals/ Behind the scenes How Git stores the changes

Git is a content-addressable file system or a simple key value data file system. That means If you insert any kind of content into the Git It will return you hand you back with a unique key so you can use that later to retrieve the content.

Unique Key is nothing but a Secure hash algorithm (SHA-1), which is a cryptographic hash function that takes an input and produces a 160-bit (20-byte) hash value typically rendered as a hexadecimal which is 40 digits long*.*

Using this Hash function we can reference any file content, commits etc.

A single space change in content will lead to different Hash value/ Unique key generation

Each Hash value generated will be linked with the git objects in Git to understand the changes made by developer in working stage to save it in committed stage.

Now its time for Git Objects. Git File system uses 4 types of git objects. These are the only object types required for git to save the necessary data

Blob - any type of files it may be photo, video or any file extensions is stored as a blob
Tree - Information of Directories is stores as a Tree. Tree can contain a set of Blobs and even it can contain set of trees with blobs. Tree is representation of folder/directory in Git
Commit - With the help of commit object type, You can save different versions of our project
Annotated Tag - Its actually persistent text pointer to specific commit

Lets create a sample file named gitsample.txt. lets stage and commit it and see how the file is stored in .git folder as an object types

According to above explanation there will be three object types created when we commit the file.

Blob to store the content, tree which has information of the latest blob which was created when file is created/Changed and next is Commit object type which has information of the latest tree created

Hierarchy can be assumed like this for object types

Steps to reproduce the above scenario

Create a file named gitsample.txt inside the git repository. Save “Hello World” inside the file

Run git status command in git bash pointing to the git repo folder. As we previously discussed the file changed/ created will be in the Working state or also known as Untracked changes so now here gitsample.txt will be shown as an untracked change.

Next step is to move file from Working state to Staging state by running command git add . Run git status after this command. gitsample.txt will be moved to Staging state.

One more thing to observe i.e. in .git/objects folder new blob object will be created with a unique key/ SHA 1 key as a file name. First 2 numbers of hash key will be used for a folder name.

Combining both folder name and file name will be the hash key of gitsample.txt file. so the hash key will be 3ee2d77fee2bc1ac806a945df84ad530a5de6fd8

To ensure this run a git low level command git cat-file -p . This should retrieve the content “Hello World” used in gitsample.txt

Next from Staging state it should be moved to Committed State,

To Commit we have to run the command git commit -m “Initial Commit”.

When changes are moved to committed state it creates other 2 objects Tree and commit object.
- Tree will also have its own new Hash key generated and It will be holding the file name and hash key of the blob object created during staging
- Commit will also have its own Hash key generated and it will be holding the the tree objects hash key which newly got created and the commit message.

To ensure these are the tree and commit objects run the low level command git cat-file using -t extension and respective hash keys. It will show the type of the object

With these object changes in .git/objects folder, HEAD file in .git/refs folder will have a file naming branch name master with latest commit hash key inside it.

What happens when there is a change in same file and its committed?

Again the same process repeats which will create new blob, commit and tree with their own hash keys.
Commit will hold information of previous commit key.

What happens when New Branch Created and checked out?

.git/refs/HEAD folder will have another file with branch name and latest commit hash key derived from the parent branch

HEAD in .git folder will point to that branch.

Wrapping Up

I hope this article gives you a clear understanding on how Git works on back scenes. And hopefully you will be aware of most crucial parts of the git after reading this article.

If you have reached this point, thanks for reading. I am Abilash S, You can check my latest posts regarding technology in these platforms. Feel Free to connect in any of these platforms

CodeHunt Channel Youtube

Abi Aradhya - Medium

JavaScript is not available.

Vulnerabilities need to checked while deploying a node or any web application

abi — Wed, 13 Oct 2021 08:05:04 +0000

Forced Browser Vulnerability

Most applications require authentication for gaining access to restricted information or perform tasks. If adequate security is not in place, malicious users can circumvent the authentication process and gain access to these pages by simply skipping the login page and directly calling an internal page that is supposed to be accessed only after authentication has been performed. By directly browsing to the below listed pages without logging in, we are able to access and view its content without logging into the application.

Solution :

Implement session management to ensure that only users logged into the system and with appropriate access levels are allowed access to the file.
Check for the AUTH token to ensure only proper users logged into the system.

🤫 Wanna know deep dive JavaScript stuff on modern web applications and how are they maintained in large environments🤯. Check out below link for JavaScript related articles

Abi Aradhya - Medium

Bypass IP restrictions

Some web applications implement IP-based protection rules that restrict users from accessing particular pages of an application if their IP addresses are not in the allowed list. These rules are used as an access control mechanism.

In here, we are able to bypass the whitelisted IP by X-Forwarded-For header

Attackers will use VPN and get different IP and then also they will get their response back.

Solution :

X-Forwarded-For HTTP header should not be used for any Access Control List (ACL) checks because it can be spoofed by attackers. Use the real IP address for this type of restrictions.
Add IP validation in the backend code if IP whitelisted list is maintained.

In-secure HTTP Method is Enabled

HTTP Methods such as TRACK, TRACE, DEBUG, PUT, DELETE, OPTIONS are intended for debugging or testing purposes. Production environments that allow these HTTP methods can be vulnerable to a range of attacks that are facilitated by these HTTP methods.

Solution:

Possibly disable the above descripted HTTP methods in production

SSL not enforced

SSL is an encryption protocol that is based on a chain of trust between users, browsers, and certificate authorities. For compatibility purposes, browsers and SSL certificates support a wide range of encryption algorithms.

Using a non-SSL page for transmitting sensitive parameter makes it vulnerable to network sniffing as data is sent in cleartext. An attacker can thus obtain users credentials and in-turn compromises his account.

Solution:

It is recommended, to enforce the application to use SSL for every request.

Server Remote Version or Server Name Disclosure

Lets say I am hosting an backend app in Nginx . As we know NGINX is a free, open-source, high performance HTTP server and reverse proxy, as well as an IMAP/POP3 proxy server. NGINX is known for its high performance, stability, rich feature set, simple configuration, and low resource consumption. An attacker can search for specific security vulnerabilities for the version of NGINX identified within the
SERVER header.

Solution:

Configure your web server to prevent information leakage from the SERVER header of its HTTP response

Cross Origin Resource Sharing misconfigured

Cross-origin resource sharing (CORS) is a mechanism that allows web page to make XMLHttpRequests to another domain. CORS defines a way in which the browser and the server can interact to determine whether or not to allow the cross-origin request. In this case, a web client can put any value into the Origin request HTTP header in
order to force web application to provide it the target resource content.

Solution:

An Access-Control-Allow-Origin header should not allow with *(wildcard) that allows all
domains

Several Security Headers

When a user tries to access a page, his browser requests it from a web server. The server then responds with the content along with appropriate HTTP Response Headers which contain meta data, status error codes, cache rules and so on. A big subset of those headers are security headers which instruct your browser exactly how to behave when it handles your websites content and data. HTTP security headers are a fundamental part of website security. Upon implementation, they protect you against the types of attacks that your site is most likely to come across. These headers protect against XSS, code injection, clickjacking, etc.

HTTP Strict-Transport-Security : The HTTP Strict Transport Security (HSTS) header is a mechanism that web sites have to communicate to the web browsers that all traffic exchanged with a given domain must always be sent over https, this will help protect
the information from being passed over unencrypted requests.

Content-Security-Policy : The content-security-policy HTTP header provides an additional layer of security. The HTTP Content Security Policy response header gives website admins a sense of control by giving them the authority to restrict the resources a user is allowed to load within site. In other words, you can whitelist your sites content sources.

X-XSS-Protection : This header is used to configure the built in reflective XSS protection found in Internet Explorer, Chrome and Safari (Webkit). Valid settings for the header are 0, which disables the protection, 1 which enables the protection and 1; mode=block which tells the browser to block the response if it detects an attack rather
than sanitizing the script.

X-Frame-Options: The X-Frame-Options header (RFC), or XFO header, protects your visitors against clickjacking attacks. An attacker can load up an iframe on their site and set your site as the source, it's quite easy: . Using some crafty CSS they can hide your site in the background and create some genuine looking overlays. When your visitors click on what they think is a harmless link, they're actually clicking on links on your website in the background.

Conclusion:

🤫 Wanna know deep dive JavaScript stuff on modern web applications and how are they maintained in large environments🤯. Check out below link for JavaScript related articles and if you really liked it clap and subscribe.

Abi Aradhya - Medium

You can catch me up on other platforms too

abi - DEV Community Profile

Angular Dependency Injection(Custom Provider)

abi — Sat, 19 Jun 2021 08:19:36 +0000

Angular Dependency Injection

Before discussing dependency injection lets understand what are dependencies first

Dependencies are services or objects that the class needs to perform its function
Dependency Injection is a design pattern in which a class/ component request dependencies from external sources rather than creating them.

In Angular, Component or services are injected with dependencies via the constructor arguments. Angular DI's framework will provide dependencies calling the factory function to instantiate the dependencies.

How Services are exposed to Inject?

Its using @Injectable decorator and dependency injection provider which is declared in service.

In the above service named AngProvidedDepService the if provided In is removed then you will get following error

No provider for "service_name". This is because Angular not able to find any provider which will provide AngProvidedDepService.

Lets create our own Custom Provider

Provider is simply a function which needs to be passed to Angular dependency Injection system. System will call this function and this function will provide the dependency its needed

In our case we have to return AngProvideDepService which needs to provide its own dependencies also as shown below inside the function.

We created a Custom service provider which will return new AngProvidedDepService. Here comes one more question how will you provide dependencies to the provider that is also through Angular Dependency Injection system.

Next step is to plug this provider into Angular Dependency Injection system. There are multiple ways doing that lets provide to component inside Component decorator

We will use providers property and pass it an configuration object. In this Configuration object we will telling exactly what we are providing using a unique name to service via Injection Token.

Lets create one Unique Injection token for Angular Provided service and then pass it to the providers property available in Component annotation

Lets provide Configuration object to provider

provide will have unique token for the service i.e. Injection token which is created
use factory will be provided with custom provider created
deps will have the dependencies which is needed for AngDepProvidedService to run.

We have provided all these to Angular dependency Injection system so that whenever any component use this via constructor Service will be provided

Lets inject it in one of the compoent using inject decorator

Summarize :

Angular Dependency Injection system will provide services or objects which were injected into components via constructor. Each Dependency has its own Injection token and provider function which will provide the instantiation. To go deeper into we have created our custom provider and Custom injection token and updated into one of the component.

Thanks for Reading...

If you liked this reading follow me on this for technical blogs

Abi Aradhya - Medium

abi - DEV Community Profile

Abilash S - Software Developer - Siemens Healthineers | LinkedIn

follow me on insta for personal profile

For Subscribing my next upcoming articles click here

CodeWithAbi

RxJS CheatSheet

abi — Thu, 31 Dec 2020 18:21:00 +0000

Understanding RxJs - What are streams?

core notion of RxJs is stream of values, before understanding observables, first Stream of values should be understood. Lets take an example of an click event triggered

It emits a stream of multiple values on every click.

Its the same for setInterval() which will be calling the function inside for every 'x' seconds. This also emits a stream of values.

so you guys may be confused why am i explaining this is RxJs Course let me get into it.🙂

What is RxJs?

If we wish to trigger set interval after every 3 seconds of a mouse click event then we need to nest 3 stream of values/callbacks which sometimes leads to callback hell.

If mouse double clicked here then two streams are emitted. Here we ne

ed a multiple stream of values to be connected and respond to events, http requests , timeouts and intervals.

Instead of using native callbacks, RxJs library is introduced to combine multiple stream of values in maintainable way.

Whats is RxJs Observable?

To define a stream which emits values Observable is used in RxJs or in simple terms Observables are the definition/blueprint of stream of values.

Below interval$ of type Observable is defined which will emit numbers

if Observable need to emit stream of values then we should subscribe it like how we subscribe to Netflix/amazon prime😉

interval() is a function from RxJs library which emits series of number values.

3 Core RxJs Concepts - Error, Completion and Subscriptions

subscription : callback which emits the stream of values
error : when the stream of values combined didn't work properly and throws an error than error callback is called.
complete : completion callback is called when stream of values are completely emitted successfully.

Note: Both error and completion cannot happen, either one of those will be triggered based on the stream of values emitted successfully or failed.

Observables under the hood

lets take an example by calling an api using fetch api

fetch is a promise, it is very different from observables it gets executed when defined.

Lets create a custom observable and include this above promise request inside that observable.



Observable.create() // this create function is used to create custom observable

fetch function getting courses is included into the create function of an observable and fetch function takes one parameter known as observer.

Observer is the one which allows to emit stream of values, or throw error and also trigger when function gets completed and it is kept private. Its is defined inside observable.

Observable doesn't allow values to emit on its behalf we can only subscribe and get stream of values.

Observer functions to emit, complete and throwing error.

next():



observer.next() // function which emits values

complete() :



observer.complete() //function which emits complete value

error():



observer.error();

Custom Http Observable with the promise function fetch code is below

What is the use of converting promise into an Observable ?

As we converted a promise into a Observable which means a stream of values. this stream can be combined with many Rxjs operators which parallelly states that it can combine many streams like set interval, set timeout and other apis with HTTP Observable.

RxJs Operator - Map operator

Operator is a way of deriving one Observable from another observable

Map operator takes an input observable and converts into to an another Observable based on the operator specified.

Passing a chain or stream of values to map function is done through pipe function.

Below code converts the payload data to array using map functionality

Building components with RxJs - Imperative design

In the above example lets say we need to categorize the courses into two categories beginner and advanced so that we will declare two courses array and filter inside the subscribe method.

Too much of logic inside the subscribe method doesn't help good in scaling complexity which leads to nested subscribe call and reach callback hell. Its not recommended to use nested subscribe also.

Above is the imperative design or approach to filter categories inside the subscribe method.

Building components with RxJs - Reactive design

Create 2 observables Beginner and advanced ,which is a definition and its not directly mutable and then use map operator to filter. this wont create nested subscriptions.

To display it in Html using async pipe

async : Angular pipe which directly subscribe to observable and emits stream of values directly to html

sharereplay and tap operator :

In the above example we have defined two observables (beginner and advanced) and these observables are each subscribed using async pipe . here we have two different subscriptions derived from same http$ Observable which leads to two http calls to backend which is not a feasible scenario.

To avoid multiple http requests we will use new operator sharereplay which shares the existing stream of data to all subscriptions instead of creating new.

If any logs to be produced while stream of values are emitted then tap() operator is used which will produce side effects while performing observable operations.

Observable Concatenation - InDepth explanation

lets define three observable which emits series of numbers if subscribed . We will concat them sequentially

of() : this function is helpful for defining al*l type of observables*

concat() : concat function which combines stream of values will subscribe internally to the above observables and concat them only when the successor subscription completes.

Below example concatinates 3 observables sequentially. If Observable source2$ gets concatinated with source1$ only when the source1$ stops emiting values.

Form Draft Pre-Save Example and the RxJs Filter Operator

Let say we have one form which has some form fields as below example and user needs to auto save the draft.

angular provides a form which is observable

form has a link to value observable which can connect to other observables.

Now the form field as we know its a stream of values it should be filtered and we need to get only the valid form data using filter() RxJs operator. this will filter out the valid forms.

This is the first stream of values which should be combined or concatenated with second stream which will call backend api and save the draft every time any changes occur. here is the code which will combine above form Observable changes with the Http request observable. This is the practical example for Observable concatenation

first we will define a Observable which calls the Http put request to save the draft form and put inside a function like below

savecourse is a method which returns observable which takes form 'changes' as an input and call an http put request.

fromPromise() : function of rxjs which converts promise call into an observable.

after defining an second stream of observable both stream of observables should be concatenated via concatMap operator.

concatMap : Rxjs operator which takes an stream of source observable and combines with the derived observable. Second input value of source observable is concatenated with derived observable only when first value of source observable completes its operation with derived observable.

Here whenever the form data is edited many times, many http requests will be triggered continuously in parallel. It should be avoided. Http request should be called only previous request is completed so to achieve this concatMap is used as below.

Understanding the merge Observable combination Strategy

merge : Rxjs operator which combines multiple observable to convert into a an observable which will have stream of values emitted whenever a new values emitted in any input observable

mergeMap :

Maps each value from stream emitted to an Observable whenever value is emitted it doesn't wait for the previous value of source variable operation to get completed.

Practically used in calling multiple Http requests at the same time.

exhaust map :

Rxjs operator which ignores source observable emitted value when previous value of source observable is still not completed operation with derived observable. below example 5 is ignored.

practical use case : Multiple times button click will lead to multiple asynchronous calls to avoid those exhaust map is used so that until the operation of first value gets completed, other values emitted will be ignored.

Unsubscription In Detail - Implementing a Cancellable HTTP Observable

If Httprequest should be cancelled for onflight requests then unsubscribe() should be used for the type subscription.
There are some Observables which cancellable logic should be written using AbortController.

debounceTime and distinct until changed:

If using a search option and search text is directly calling Http requests, observable will emits new value when a new character is added in search text and it creates huge backend requests to avoid debounceTime will be used.

debounce Rxjs operator takes an input argument of time to wait, When one value is emitted then operator wait until the that time ends to emit the new value of the observable.

distinct until changed : if search box emitting same value than to stop calling duplicate requests with same value we will use this operator

fromevent : converts events into observables

switchmap operator: Rxjs Operator which unsubscribes previous value of source observable and subscribes to new value when emitted. Helpful in search functionality

Rxjs Error Handling strategy

catchError: provide an alternative source when error occurred and continue the observable errored out to complete.

throwerror() : function which returns the observable which emits the value of error used inside catchError block to emit the error outside as an observable.

retrywhen: retry when operator is used to call Http request after an previous http request throw an error

startwith: startwith operator is used to initiate the stream with the starting value instead of concat and rest all based on input element event.

RxJs Throttling

Throttle time is to limit the values coming from the source observable and send only one value for a period of time and leave other values until the time elapses. It can be mainly used for fetching the data from the web page continuously and limit multiple values coming across the stream

Custom Debug RxJs Operator for Tap Rxjs Operator :

This will log data based on levels. Code is to demonstrate how to create custom rxjs operator .

Its a higher order function which contains two functions where first function you will sending parameters what is needed and second function parameters contain source observble.

Usage of Debug Rxjs Operator

RxJs ForkJoin operator

forkjoin Rxjs operator is used to call parallel operations at a same time and receive the observables. Helpful in completing large running tasks.

Subjects and Stores

Notion of Subject :

Subject is a combination of both Observable and observer which has all properties of emitting values and subscribing. It has no unsubscribe logic to our observable shared from subject.

Subject is a best way to create custom Observable and also to multicast

Behavioral subject

supports late subscription by emitting providing last value to the subscriber

Async Subject:

Subject emits values after completion of subject. Async subject will emit last value when completed.

Replay Subject

Subject emits complete values after subscription.

Hope this cheat sheet works I added almost every example I could add. this could help understanding most of the topics involved in RxJs.

Angular architecture ready book

abi — Tue, 08 Dec 2020 18:35:41 +0000

In this article we are going to learn how to scaffold new angular application with clean and maintainable and extendable architecture in almost no time and what are the benefits of doing so, we will also discuss the most reusable services and feature specific components.

I am inspired by Tomas Trajan angular architecture blog. I am explaining same concepts with different examples and tools.

From last year I am learning angular and have been developed more 9 to 10 applications. So with that understanding pitching in these concepts.

this article brings all lessons learned in a distilled cleanup form you to cut down your learning curve and help you guys create angular project epic.

Starting a project

Need Angular CLI, download it using npm

npm install -g @angular/cli

as of now(November 2020) the current angular version is 10.2.1and I would strongly recommend to create new apps using that version (or any latest versions) and start using goodies like IVY or --strict flag right from the beginning

IVY is a rendering engine for Angular which minifies the code into very minimal size.
strict flag enabling initializes your project with few new settings that improve maintainability , help you catch bugs ahead of time, and allow the CLI to perform advanced optimizations on your application. Additionally, applications that use these stricter settings are easier to statically analyze, which can help the ng update command refactor code more safely and precisely when you are updating to future versions of Angular.

As a coding enthusiast, always try to update angular to the latest version by running below command on your timeline.

npm i -g @angular/cli@latest

First after installing angular cli, we have to generate fresh new Angular workspace and this can be achieved by running

ng new angular-arch --create-application false --strict

angular-arch is project name
”create-application false will create an empty workspace
”strict will adjust the values of some Typescript compiler flags to nudge us to do right things

to see available schematics type ng g

Application

In the list of available schematics contains one called application and we will use it to create our first application in the workspace by running

ng g application my-ang-arch --prefix my-ang --style scss --routing

my-ang-arch will be created in the projects folder. It will have angular router and will be using Sass styles ( with .scss file extension)
”prefix will be used in the name of every component tag and directive selector so we will get my-ang in every component as a selector.

For styling we will use Angular material which comes with simple and elegant components!

To add Angular Material run following command using angular cli

ng add @angular/material

This will install lib using npm and we will be prompted about couple of initial options

select any default themes or if you want to customize select custom as an option later style with own theme in style.scss like this.
install typography

Once finished we can start importing Angular material components in our app but more on that later.

The Tooling

**Prettier** : An opinionated code formatter which integrates with most of the IDE. We can even format whole project with the help of short npm script!

Lets add it using

npm i -D prettier

Once installed, we can create .prettierrc file which allows to customize copule of formatting options as specified here. Sample configuration as shown below

{
"singleQuote" : true
}

For Angular, we can make prettier play nicely with tslint which is provided by AngularCLI,

to do that we can install tslint-config-prettier and add it in last item in the extends array filed in tslint.json file.

{
"extends" : ["tslint:recommended", "tslint-config-prettier"]
}

we can add npm script to package.json just to run the command to format code before checkin

add this piece of commands scripts section of package.json

"format:write" : "prettier \"projects/**/*.{ts,html,md,scss,json}\" --write"

webpack-bundle-analyzer : It can help us understand content of the bundle size produced during the prod build helpful for debugging correct structure and hence architecture of our app.

Install webpack-bundle-analyzer by running command

npm i -D webpack-bundle-analyzer

once installed add following script in package.json in scripts section

"analyze" : "ng build --prod --stats-json && webpack-bundle-analyzer ./dist/<app-name>/stats.json"

Script do the following things

builds application for production as we are using â€”prod flag
collects statistics of all the modules by build because we are using â€”stats-json flag
last step will call webpack bundle analyzer and specify the stats.json file.

&& operator wont work in windows just create two commands in script by dividing them

"analyze" : "ng build --prod --stats-json"
"analyze:webpack": "webpack-bundle-analyzer ./dist/<app-name>/stats.json"

running both npm commands will open a new page which will show the amount of surface covered by each module.

Compodoc : Static documentation tool for angular application which generates angular documentation in seconds by parsing all the components , services and pipes etc

Install Compodoc using command globally

npm install -g @compodoc/compodoc

define a script task in your package.json

"compodoc": "npx compodoc -p tsconfig.json src"

and run it

npm run compodoc

Start the application

Run application using command

npm start

ng serve -o

If everything went well then application must be running in http://localhost:4200

Cool our initial setup is done. We have a workspace with empty Angular application and we have added some cool tooling to improve our developer experience!

The Architecture

Before generating and writing code lets sit back and see bigger picture

Lets organize code this way based on the functionality we implement.

We have two parts above :

Eager part which will be loaded from start(the main.js bundle).It will contain the AppModule with top-level routes and CoreModule with basic layout like navbar/main layout and all the core singleton services which will be used through out the application.

Lazy loaded part which will be loaded as a result of user navigation to these features. The lazy modules will also import shared module. Shared module consists of reusable components directives, pipes by all lazy modules hence which makes it a smaller bundle size and reasonable developer experience!

Great our architecture structure is finished ,now we can organize our code and start adding features based on functionality

Summary

We have created our angular application with extensible architecture in a very short time!

While creating application we added --strict flag to maintain strict null checks, strict function types, restricting any type and strict property initialization
We added necessary tools to format code(prettier), to check bundle size(webpack-bundle-analyzer) and for documentation(Compodoc)
We saw angular architecture modules on what needs to be created at what place
Core Module : will be the base of whole project which consists of base layout or nav bar and core singleton services
Share Module : consists of reusable components, pipes ,directives that will be used by lazy features.
Lazy Module :Lazy module will implement the feature business logic (services) and views(components) that are specific to features

Please support this article and developer with your claps and sharing because it helps to spread wider audience. Follow me on medium and also other blogs to get updated on tech stuff.

In-Depth Angular - Medium

abi - DEV Profile

CodeWithAbi

Other than technical stuff follow me on instagram

Till the next article ba bye!!!

Angular Bookmarks much needed

abi — Mon, 07 Dec 2020 18:35:35 +0000

Angular architecture

How to architect epic Angular app in less than 10 minutes! ⏱️😅

Theming Angular Project

The complete guide to Angular Material Themes

Angular Static code analysis

Automating the Angular Application Development Process: Part 2 | MOWEDE Blog

State management with ngrx

Angular Tutorial: State Management With NgRx - DZone Web Dev

Angular Cheat sheet

Angular Cheat Sheet

Angular Router explained

Angular Router: A Complete Example (Bootstrap Navigation Menu)

Angular CLI behind the scenes

Angular CLI Behind the Scenes - Part One

Angular Forms

Template driven forms

Template-driven Forms in Angular

Custom validators

Custom Validators in Angular

Angular 8 & Express File Upload Tutorial with Reactive Forms - positronX

Angular databinding

Understanding Data Binding in Angular

Angular with Firebase

Angular, Firebase and AngularFire Crash Course - Why Firebase ?

Build your own observables - Angular 4 series

Build Your Own Observable Part 1: Arrays

Angular 2 training book

Introduction

Angular clean code

Introduction

RXJS bookmarks

RxJS

Shareplay :

RxJS: Welcome on Board Upgraded ShareReplay Operator

Angular CDK overlay

[Angular Material](Link)

Angular ng-Template, ng-container and ngTemplateoutlet

Angular ng-template, ng-container and ngTemplateOutlet: Guided Tour

Angular 300 questions covered

sudheerj/angular-interview-questions

Popular Angular experts Blog

Netanel Basal

Tomas Trojan

Tomas Trajan - Medium

Angular In Depth - Part 1

abi — Mon, 07 Dec 2020 18:15:58 +0000

Exploring core concepts of Angular in depth

This series of Angular in depth will cover all the following features part by part :

Basic Understanding of Angular and features
Custom components with @Component
Components @Input and @Output, event Emitters
ngFor
ngIf
ngClass
ngStyle
ngSwitch
Built-In Pipes
Async Pipe
Custom Pipes
@Injectable and Custom Services
HTTP Client - GET POST PUT DELETE

This article concentrates on key features of Angular and basics setup to start with any application.

We will build an example application throughout the whole series and understanding all core features

Basic Understanding of Angular and features

Things required to start Angular development

Understanding on HTML, CSS, Typescript
Node installed in system

Download | Node.js

install angular cli to scaffold application

npm install -g @angular/cli

Take a tour of the example application

Lets take a tour on example application "Crazy developers" together by exploring all Angular topics one by one

Create new Angular application using Angular CLI

ng new crazydevelopersapp

ng : referring to angular CLI
new : is the keyword to create new angular application
crazydevelopersapp : application name

If project needs to be created in existing folder

ng new *crazydevelopersapp* --directory ./

CLI asks to enable routing choose yes and choose SCSS for stylesheets. folder structure after scaffolding the template looks like this

Okay now Why Angular ?

we will see main features of Angular Core with an example

custom HTML content: You can create your own custom HTML content and extend application functionality.

app-root is the custom HTML Tag for app component html

separating data or the model of the application from view template

below example shows title in html tag is a variable consists of string "crazydeveloper" in component.ts

component based architecture co ordinates between view and data

built in change detection mechanism which is completely transparent which synchronizes with view
Updating of data in secure way

We will discuss on components, @Input, @Output and Event emitter in our next article.