My learning curve with Angular

Introduction 🖊:

Hello everyone, this a blog of my “blogging challenge 2020”, I will write about my learning curve with angular , some tricks that i tried to implement with angular and thinks that should be shared with community , I just tried to make some advancement implementation and check different use cases with different angular modules .

Happy learning :)

1) Recommended Angular project structure : ⛑

Before start coding, we should set the best-recommended project structure from the community, from a lot of blogs that I have read and recommended GitHub repositories, I think this is the most commonly used project structure

  • Modules:

This is the folder dedicated to features implemented inside the application, for example, if you have an Authentication module to handle all the (sign-in) and (signup feature), Module: Dashboard if you have feature Dashboard management, they can all be set under the folder “Modules” or “Features”

  • Core:

⚡ The core module is dedicated to containing all elements that continue to core like services, interceptors , guards , mocks , helpers , utils etc ..

  • ⚠️ The core module must be imported only in the root module. Other modules must not import the core modules. You can use the following code to stop the other modules from importing the core module
  • Shared :

The shared module must declare the pipes, directives, services and alll the components and modules shared among different pages, such as a footer or the Material modules. You must declare them or import them in the _shared module, as well as export them.

2) Lazy Loading with Angular: ▶️ ◀️

Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It’s a way to shorten the length of the critical rendering path, which translates into reduced page load times.

So if you plan to implement a large scale application, it’s worthless to implement the lazy loading pattern, before to start coding you need to divide your features into modules and make some hierarchy for your application

Utility? ✔️✔️ ✔:

  • To improve the performance
  • Generates a better user experience by shortening load times and only loading necessary info.

Implementation:

This is an example of a lazy loading implementation feature with Angular10

3) TypeScript module resolution with AngularCLI:🛠

This section dedicated to explaining the module resolution strategy that we can implement with our angular project .

You need to add paths to your tsconfig.json to make it easy to import your modules.!

4) Sub routing : 🏹🏹

In this section, I will show you a basic example of navigation form component A in module A+ to component B in Module B+

What is Sub-routing :

Routing means navigating between the pages. , Sub-routing or Child-routing means navigation between sub-modules or form child route to another,

In our application, we will have a main root ( root route), and other routes for each module for its own children (component of course )

Implementation:

This example fo routes definition in each module

Routing Authentication Module :

Routing Admin Module :

Task: navigation from sign-up — -> dashboard?

Solution :

5) Advanced Interceptors to our Angular project:📞

What is an interceptor :

Interceptor is a way to add some work or modification for each HTTP request or response.

There are a lot of uses cases that I discovered and it looks interesting to me that’ why I want to share here :

  • HTTP Error Handler : 💥 💥

First, we can retry the HTTP call.

Secondly, we can check the status of the exception. And depending on the status, we can decide what we should do.

  • Converting CSV TO JSON : 💥 💥

This an example of an Interceptor that will convert from some HTTTP Calls that will get a CSV format response and you will need it to display it JSON, so let’s intercept it!

  • Caching: 💥

Another cool use case is HTTP response caching ,

7) Auth Guard :

In this section, I will try to explain some basic examples of the ‘Auth Guard ‘ concept used to check access and authorization for a route based on a role!

There are five different types of Guards:

  • CanActivate: checks to see if a user can visit a route.
  • CanActivateChild: checks to see if a user can visit a route’s children.
  • CanDeactivate: checks to see if a user can exit a route.
  • Resolve: performs route data retrieval before route activation.
  • CanLoad: checks to see if a user can route to a module that is lazy loaded.

And the next step is to Add it to the routing module :

8) Rxjs 📕 :

In this section, I will explain some Rxjs used operators that are so helpful for javascript developers and I thinks we should care about this powerful library

Whats is Rxjs 📕 :

RxJS is a javascript library that brings the concept of “reactive programming” to the web.

it is defined as a library for composing asynchronous and event-based programs by using observable sequences. It provides one core type, the Observable, satellite types (Observer, Schedulers, Subjects) and operators inspired by Array#extras (map, filter, reduce, every, etc.) to allow handling asynchronous events as collections.

Some Rxjs operations:

  • Observable :

“An observable is a function that creates an observer and attaches it to the source where values are expected, for example, clicks, mouse events from a dom element or an HTTP request, etc.”

  • You can often use observables instead of promises to deliver values asynchronously.

Example implementation :

  • forkJoin :

This operator is best used when you have a group of observables and only care about the final emitted value of each.

image houni

Example implementation:

  • retry:

-Useful for retrying HTTP requests!

  • If you want to repeat FAILED data fetching wrapped in observable — use retry.

Implementation :

  • catch / catchError:

CatchError is an RxJs Operator, which we can use to handle the errors thrown by the Angular Observable.

9) Never forgot to write Clean Code : ❎

Write readable code. Focus on writing code that is easy to understand.

Separation of concerns. Encapsulate and limit logic inside your components, services, and directives. Each file should only be responsible for a single functionality.

Utilize TypeScript. TypeScript provides advanced autocompletion, navigation, and refactoring. Having such a tool at your disposal shouldn’t be taken for granted.

Use TSLint. TSLint checks if TypeScript code complies with the coding rules in place. Combined with Prettier and Husky makes for an excellent workflow.

Next Step Add state management to my App?

In the Next Blog, I will talk about State Management with Angular application: concepts, advantages, implementations, best tools, and some discussion about when we should add state management to my app.

Conclusion :

In conclusion

“Develop a passion for learning. If you do, you will never cease to grow.”

You can find the Github repository called learning-angular-advanced ✌️✌️

<script>alert('try your best')</script>