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 <kamranahmed.se@gmail.com>pull/2108/head
Ibteasm Ahmed
2 years ago
committed by
GitHub
parent
484b67b0e9
commit
c02fbc5db1
8 changed files with 69 additions and 8 deletions
@ -1 +1,7 @@ |
||||
# Lazy loading |
||||
# 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. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://angular.io/guide/lazy-loading-ngmodules'>What is Lazy loading ? - Angular.io </BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=JjIQq9lh-Bw'>Angular Tutorial - Lazy Loading</BadgeLink> |
||||
|
||||
@ -1 +1,8 @@ |
||||
# Routing |
||||
# 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. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/routing-in-angular-9-10/'>What is Routing ? - Geeksforgeeks </BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://angular.io/guide/router'>Explanation of Routing ? - Angular.io </BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Nehk4tBxD4o'>Angular Tutorial - Routing and Navigation</BadgeLink> |
||||
|
||||
@ -1 +1,8 @@ |
||||
# Dependency injection |
||||
# 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. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://angular.io/guide/dependency-injection'>What is Dependency Injection ? - angular.io </BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=OFPIGlxunL0'>Introduction of Dependency injection</BadgeLink> |
||||
|
||||
|
||||
@ -1 +1,7 @@ |
||||
# Services remote data |
||||
# 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. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://angular.io/tutorial/toh-pt4'>Adding Services in Angular</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://angular.io/tutorial/toh-pt6'>Get Data from Server</BadgeLink> |
||||
|
||||
@ -1 +1,13 @@ |
||||
# Lifecycle hooks |
||||
# 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` |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://angular.io/guide/lifecycle-hooks'>What is Life Cycle Hooks? - Angular.io </BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.logrocket.com/angular-lifecycle-hooks/'>The life cycle hooks of angular - Blog </BadgeLink> |
||||
|
||||
@ -1 +1,9 @@ |
||||
# Ngxs |
||||
# 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. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.ngxs.io/'>What is NGXS ? - Ngxs.io </BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/@knoldus/introduction-to-ngxs-state-management-pattern-library-for-angular-ec76f681ceba'>Details about NGXS - Medium </BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SGj11j4hxmg'>Practise of NGXS</BadgeLink> |
||||
|
||||
|
||||
@ -1 +1,8 @@ |
||||
# Ngrx |
||||
# Ngrx |
||||
|
||||
Ngrx is a group of Angular libraries for reactive extensions that implements the Redux pattern and it’s supercharged with RXJS. |
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://ngrx.io/'>What is NGRX ? - ngrx.io </BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://ahmedrebai.medium.com/introduction-to-state-management-with-ngrx-and-angular-91f4ff27ec9f'>Details about NGRX - Medium </BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=f97ICOaekNU'>Practise of NGRX</BadgeLink> |
||||
|
||||
|
||||
@ -1 +1,9 @@ |
||||
# State management |
||||
# 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. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.techtarget.com/searchapparchitecture/definition/state-management'>What is State Management?</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.logrocket.com/angular-state-management-made-simple-with-ngrx/'> Angular state management made simple with NgRx</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.syncfusion.com/blogs/post/angular-state-management-with-ngrx.aspx'>Angular State Management with NgRx</BadgeLink> |
||||
|
||||
Loading…
Reference in new issue