From c02fbc5db1f6d8cd3e457d655e6c061558118755 Mon Sep 17 00:00:00 2001 From: Ibteasm Ahmed <111435568+GetIbetsamAhmed@users.noreply.github.com> Date: Tue, 4 Oct 2022 17:48:08 +0500 Subject: [PATCH] Add angular content for state management (#2107) * Adding an angular content on severals topics * add for content files * add extra below heading * Update content/roadmaps/104-angular/content/107-routing/105-lazy-loading.md * Update content/roadmaps/104-angular/content/107-routing/readme.md * Update content/roadmaps/104-angular/content/108-services-remote-data/100-dependency-injection.md * Update content/roadmaps/104-angular/content/108-services-remote-data/readme.md * Update content/roadmaps/104-angular/content/110-state-management/101-ngrx.md * Update content/roadmaps/104-angular/content/110-state-management/readme.md * Update content/roadmaps/104-angular/content/110-state-management/readme.md Co-authored-by: Ibtesam Ahmed ( SK ) <51031949+SkyLineProgrammers@users.noreply.github.com> Co-authored-by: Kamran Ahmed --- .../content/107-routing/105-lazy-loading.md | 8 +++++++- .../104-angular/content/107-routing/readme.md | 9 ++++++++- .../100-dependency-injection.md | 9 ++++++++- .../content/108-services-remote-data/readme.md | 8 +++++++- .../104-angular/content/109-lifecycle-hooks.md | 14 +++++++++++++- .../content/110-state-management/100-ngxs.md | 10 +++++++++- .../content/110-state-management/101-ngrx.md | 9 ++++++++- .../content/110-state-management/readme.md | 10 +++++++++- 8 files changed, 69 insertions(+), 8 deletions(-) diff --git a/content/roadmaps/104-angular/content/107-routing/105-lazy-loading.md b/content/roadmaps/104-angular/content/107-routing/105-lazy-loading.md index 5d92f6288..67a72d995 100644 --- a/content/roadmaps/104-angular/content/107-routing/105-lazy-loading.md +++ b/content/roadmaps/104-angular/content/107-routing/105-lazy-loading.md @@ -1 +1,7 @@ -# Lazy loading \ No newline at end of file +# Lazy loading + +Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated. It improves the application load time speed by splitting the application into several bundles. The bundles are loaded as required when the user navigates through the app. + +Free Content +What is Lazy loading ? - Angular.io +Angular Tutorial - Lazy Loading diff --git a/content/roadmaps/104-angular/content/107-routing/readme.md b/content/roadmaps/104-angular/content/107-routing/readme.md index 5904c1e21..06b729f8e 100644 --- a/content/roadmaps/104-angular/content/107-routing/readme.md +++ b/content/roadmaps/104-angular/content/107-routing/readme.md @@ -1 +1,8 @@ -# Routing \ No newline at end of file +# Routing + +Routing in Angular allows the users to create a single-page application with multiple views and navigation between them. Users can switch between these views without losing the application state and properties. + +Free Content +What is Routing ? - Geeksforgeeks +Explanation of Routing ? - Angular.io +Angular Tutorial - Routing and Navigation diff --git a/content/roadmaps/104-angular/content/108-services-remote-data/100-dependency-injection.md b/content/roadmaps/104-angular/content/108-services-remote-data/100-dependency-injection.md index 450bde1c7..8563e8280 100644 --- a/content/roadmaps/104-angular/content/108-services-remote-data/100-dependency-injection.md +++ b/content/roadmaps/104-angular/content/108-services-remote-data/100-dependency-injection.md @@ -1 +1,8 @@ -# Dependency injection \ No newline at end of file +# Dependency Injection + +Dependency Injection (DI) is a design pattern that creates the dependencies of a class and provides those objects to the class when required. Angular being a nice framework, provides a built-in dependency injection mechanism that creates and provides a runtime version of a dependency value using dependency injectors. + +Free Content +What is Dependency Injection ? - angular.io +Introduction of Dependency injection + diff --git a/content/roadmaps/104-angular/content/108-services-remote-data/readme.md b/content/roadmaps/104-angular/content/108-services-remote-data/readme.md index b66ecd41f..0fd240f20 100644 --- a/content/roadmaps/104-angular/content/108-services-remote-data/readme.md +++ b/content/roadmaps/104-angular/content/108-services-remote-data/readme.md @@ -1 +1,7 @@ -# Services remote data \ No newline at end of file +# Services + +Components shouldn't fetch or save data directly and shouldn't knowingly present fake data. They should focus on presenting data and delegate data access to a service. Service is where all the remote API calls exist to retrieve and provide data to components. + +Free Content +Adding Services in Angular +Get Data from Server diff --git a/content/roadmaps/104-angular/content/109-lifecycle-hooks.md b/content/roadmaps/104-angular/content/109-lifecycle-hooks.md index 08c5ee17c..d9d100762 100644 --- a/content/roadmaps/104-angular/content/109-lifecycle-hooks.md +++ b/content/roadmaps/104-angular/content/109-lifecycle-hooks.md @@ -1 +1,13 @@ -# Lifecycle hooks \ No newline at end of file +# Lifecycle hooks + +A component instance has a lifecycle that starts when Angular instantiates the component class and renders the component view along with its child views. The lifecycle continues with change detection, as Angular checks to see when data-bound properties change, and updates both the view and the component instance as needed. The lifecycle ends when Angular destroys the component instance and removes its rendered template from the DOM. Directives have a similar lifecycle, as Angular creates, updates, and destroys instances in the course of execution. + +Your application can use lifecycle hook methods to tap into key events in the lifecycle of a component or directive to initialize new instances, initiate change detection when needed, respond to updates during change detection, and clean up before deletion of instances. + +The following life cycle hooks of angular are : + +`OnChanges` , `OnInit` , `DoCheck` , `OnDestroy` , `AfterContentInit` , `AfterContentChecked` , `AfterViewInit` , `AfterViewChecked` + +Free Content +What is Life Cycle Hooks? - Angular.io +The life cycle hooks of angular - Blog diff --git a/content/roadmaps/104-angular/content/110-state-management/100-ngxs.md b/content/roadmaps/104-angular/content/110-state-management/100-ngxs.md index f57c4c61d..223125cb3 100644 --- a/content/roadmaps/104-angular/content/110-state-management/100-ngxs.md +++ b/content/roadmaps/104-angular/content/110-state-management/100-ngxs.md @@ -1 +1,9 @@ -# Ngxs \ No newline at end of file +# Ngxs + +Ngxs is a state management pattern for the Angular framework. It acts as a single source of truth for our application. Ngxs is very simple and easily implementable. It reduce lots of boilerplate code . It is a replacement for Ngrx. In Ngrx we are creating state, action, reducer, and effects but in Ngxs, we are creating only state and actions instead of all of this. Like Ngrx, Ngxs is also asynchronous and when we dispatch any action we can get a response back. + +Free Content +What is NGXS ? - Ngxs.io +Details about NGXS - Medium +Practise of NGXS + diff --git a/content/roadmaps/104-angular/content/110-state-management/101-ngrx.md b/content/roadmaps/104-angular/content/110-state-management/101-ngrx.md index 30c9ae709..a4bd256e7 100644 --- a/content/roadmaps/104-angular/content/110-state-management/101-ngrx.md +++ b/content/roadmaps/104-angular/content/110-state-management/101-ngrx.md @@ -1 +1,8 @@ -# Ngrx \ No newline at end of file +# Ngrx + +Ngrx is a group of Angular libraries for reactive extensions that implements the Redux pattern and it’s supercharged with RXJS. +Free Content +What is NGRX ? - ngrx.io +Details about NGRX - Medium +Practise of NGRX + diff --git a/content/roadmaps/104-angular/content/110-state-management/readme.md b/content/roadmaps/104-angular/content/110-state-management/readme.md index c9ab9d07b..3bb91f719 100644 --- a/content/roadmaps/104-angular/content/110-state-management/readme.md +++ b/content/roadmaps/104-angular/content/110-state-management/readme.md @@ -1 +1,9 @@ -# State management \ No newline at end of file +# State Management + +Application state management is the process of maintaining knowledge of an application's inputs across multiple related data flows that form a complete business transaction -- or a session -- to understand the condition of the app at any given moment. In computer science, an input is information put into the program by the user and state refers to the condition of an application according to its stored inputs -- saved as variables or constants. State can also be described as the collection of preserved information that forms a complete session. + +Free Content + +What is State Management? + Angular state management made simple with NgRx +Angular State Management with NgRx