Add all roadmaps and their content

src/roadmaps/android/android.md

@@ -0,0 +1,128 @@
+---
+jsonUrl: "/jsons/android.json"
+pdfUrl: "/pdfs/android.pdf"
+order: 4
+featuredTitle: "Android"
+featuredDescription: "Step by step guide to becoming an Android Developer in 2022"
+title: "Android Developer"
+description: "Step by step guide to becoming an Android developer in 2022"
+hasTopics: false
+seo:
+  title: "Android Developer Roadmap: Learn to become an Android developer"
+  description: "Community driven, articles, resources, guides, interview questions, quizzes for android development. Learn to become a modern Android developer by following the steps, skills, resources and guides listed in this roadmap."
+  keywords:
+    - "guide to becoming an android developer"
+    - "android developer roadmap"
+    - "android roadmap"
+    - "become android developer"
+    - "android developer skills"
+    - "android skills test"
+    - "skills for android development"
+    - "learn android development"
+    - "what is android"
+    - "android quiz"
+    - "android interview questions"
+relatedRoadmaps:
+  - "frontend"
+  - "javascript"
+  - "react"
+  - "nodejs"
+sitemap:
+  priority: 1
+  changefreq: "monthly"
+tags:
+  - "roadmap"
+  - "main-sitemap"
+  - "role-roadmap"
+---
+
+The intent of this guide is to give you an idea about the Android development landscape and to help guide your learning if you are confused. Before we start, please note that the roadmap is opinionated, and you might have different opinions than those of the author. Having said that, [we would love to hear your opinions](https://github.com/kamranahmedse/developer-roadmap/issues/new) and incorporate them in the roadmap if suitable.
+
+There are multiple ways to develop applications for the android; you can go down the path of hybrid application development where [flutter](https://flutter.dev/), [react-native](https://reactnative.dev/), or [NativeScript](https://www.nativescript.org/) are the most common contenders. Flutter uses Dart, whereas React Native and Native Script rely on JavaScript. Answering the question of hybrid vs native is out of the scope of this roadmap. This roadmap is focused on the native Android apps development but if you are interested in learning any hybrid framework, my personal preference is [react-native](https://reactnative.dev) and I would recommend you to checkout the [Frontend Developer Roadmap](/frontend).
+
+## Complete Roadmap
+
+Here is the full version of the roadmap in a single image and after that we have the broken down version with the resources and links to learn more about each of the boxes.
+
+<img alt='Android Developer Roadmap' style='--aspect-ratio:1076px/1243px' src="/assets/roadmaps/android/roadmap.png" fetchpriority="high" />
+
+## Broken Down Version
+Below is the broken down version of the roadmap with links and resources to learn more about each of the items listed in the complete roadmap above.
+
+## Pick a Language
+For the languages, you can develop android apps either by using Kotlin or Java.
+
+[![Pick a Language](/assets/roadmaps/android/pick-language.svg)](/assets/roadmaps/android/pick-language.svg)
+
+Although, you can use both [Kotlin](https://en.wikipedia.org/wiki/Kotlin_(programming_language)) and [Java](https://en.wikipedia.org/wiki/Java_(programming_language)) to develop native android apps, [Google announced in 2019](https://android-developers.googleblog.com/2019/05/google-io-2019-empowering-developers-to-build-experiences-on-Android-Play.html) to make Kotlin the preferred way of developing android applications. If you were to start learning android development today, Kotlin should be your language of choice.
+
+## The Fundamentals
+Install the [Android Studio](https://developer.android.com/studio) and learn the basics of Kotlin to get started. 
+
+[![Android Fundamentals](/assets/roadmaps/android/the-fundamentals.png)](/assets/roadmaps/android/the-fundamentals.png)
+
+We have also listed down some free resources which you can use for the items listed in the image above. If you have some better ones, please do suggest. Also, you don't need to go through all of them, just go through them and pick what you like.
+
+* [Learn the basics of Kotlin](https://blog.teamtreehouse.com/absolute-beginners-guide-kotlin)
+* [Kotlin Docs](https://kotlinlang.org/docs/reference/basic-syntax.html) and [Official Kotlin Tutorials](https://kotlinlang.org/docs/tutorials/)
+* [Data Structures and Algorithms](https://www.studytonight.com/data-structures/introduction-to-data-structures). Also [check this](https://www.tutorialspoint.com/data_structures_algorithms/index.htm).
+* [Kotlin DataStructures](https://kotlinlang.org/docs/reference/collections-overview.html)
+* [Algorithms and DataStructures in Kotlin](https://github.com/bmaslakov/kotlin-algorithm-club)
+* [Gradle](https://docs.gradle.org/current/userguide/what_is_gradle.html)
+* [Getting started with Gradle](https://docs.gradle.org/current/userguide/getting_started.html)
+Note: Android Studio comes with a working installation of Gradle, so you don’t need to install Gradle separately in that case.
+
+## Version Control Systems
+Version control systems record your changes to the codebase and allow you to recall specific versions later. There are multiple Version Control Systems available but [Git](https://git-scm.com/) is the most common one these days.
+
+[![Version Control Systems](/assets/roadmaps/android/git-github.png)](/assets/roadmaps/android/git-github.png)
+
+Here are some of the resources to get you started. Feel free to google and find something else that you find easier.
+
+* [Udacity — Version Control with Git](https://www.udacity.com/course/version-control-with-git--ud123)
+* [GitHub Hello World](https://guides.github.com/activities/hello-world/)
+
+## Building an Application
+
+Here is the list of items that you are going to need when developing Android applications. Please note that, this is an exhaustive list, and you don't need to know it all from the get-go. Get an idea of the items listed, and just start building some apps and keep the items listed in the back of your mind and have a deep dive when using them. 
+
+[![Building an Application](/assets/roadmaps/android/build-an-application.png)](/assets/roadmaps/android/build-an-application.png)
+
+To learn more about the items listed in the image above, here are the links to the relevant docs
+
+* [Using Activities and Activity Life Cycles](https://developer.android.com/guide/components/activities/intro-activities)
+* Building Flexible Interfaces using [Fragments](https://developer.android.com/guide/components/fragments)
+* [Debugging using Android Studio Debugger](https://developer.android.com/studio/debug)
+* [Handling App Configurations](https://developer.android.com/work/managed-configurations)
+* [Using Intents and Intent Filters](https://developer.android.com/guide/components/intents-filters)
+* [Understand Context](https://guides.codepath.com/android/Using-Context)
+* [Learn about Multithreading](https://developer.android.com/training/multiple-threads)
+* [Data Privacy](https://www.raywenderlich.com/6901838-data-privacy-for-android)
+* [Securing Network Data](https://www.raywenderlich.com/5634-securing-network-data-tutorial-for-android)
+* [Dependency Injection](https://developer.android.com/training/dependency-injection)
+* [Content Providers](https://developer.android.com/guide/topics/providers/content-providers)
+* [Glide](https://github.com/bumptech/glide), [Retrofit](https://square.github.io/retrofit/), [Crashlytics](https://firebase.google.com/docs/crashlytics/get-started), [GSON](https://github.com/google/gson)
+* [Room](https://developer.android.com/topic/libraries/architecture/room), [Navigation](https://developer.android.com/guide/navigation/navigation-getting-started), [Work Manager](https://developer.android.com/topic/libraries/architecture/workmanager), [LiveData](https://developer.android.com/topic/libraries/architecture/livedata), [Data Binding](https://developer.android.com/topic/libraries/data-binding)
+* [RxJava](https://github.com/ReactiveX/RxJava), [RxKotlin](https://github.com/ReactiveX/RxKotlin)
+* [Memory Management Overview](https://developer.android.com/topic/performance/memory-overview)
+* [Diving deeper into context-oriented programming in Kotlin](https://proandroiddev.com/diving-deeper-into-context-oriented-programming-in-kotlin-3ecb4ec38814)  
+
+## Jetpack Compose
+Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.
+* [Jetpack Compose](https://developer.android.com/jetpack/compose/documentation)
+* [Material Design 3](https://m3.material.io/)
+* [Getting started with Material Components](https://m3.material.io/libraries/mdc-android/getting-started)
+
+## Free Resources
+I would highly recommend watching [this free course](https://www.udacity.com/course/developing-android-apps-with-kotlin--ud9012) from google on Developing Android Apps with Kotlin. You may also get started with this [free course](https://developer.android.com/courses/android-basics-kotlin/course) on the android developer's page, concepts are taught with the help of code labs, projects and quizzes and you also earn badges as you learn that appear on your google developer profile. Also, here are some of the resources to learn more about the topics listed above.
+
+* [Developing Android Apps with Kotlin](https://www.udacity.com/course/developing-android-apps-with-kotlin--ud9012)
+* [Android Basics in Kotlin](https://developer.android.com/courses/android-basics-kotlin/course)
+* [Android Developer Guides](https://developer.android.com/guide)
+* [Raywenderlich](https://www.raywenderlich.com)
+
+## Wrap Up
+
+That wraps it up for the android developer roadmap. Again, remember to not be exhausted by the list; just learn the basics and start working on some project, rest of the learnings will come along the way. Good luck!
+ 
+For any suggestions, improvements and feedback, feel free to [submit an issue](https://github.com/kamranahmedse/developer-roadmap) or reach out to me on twitter [@kamranahmedse](https://twitter.com/kamranahmedse).

src/roadmaps/angular/angular.md

@@ -0,0 +1,42 @@
+---
+jsonUrl: "angular.json"
+pdfUrl: "ngular.pdf"
+order: 3
+featuredTitle: "Angular"
+featuredDescription: "Step by step guide to become a Angular Developer in 2022"
+title: "Angular Developer"
+description: "Everything that is there to learn about Angular and the ecosystem in 2022."
+hasTopics: true
+dimensions:
+  width: 968
+  height: 2277.8
+seo:
+  title: "Angular Developer Roadmap: Learn to become a Angular developer"
+  description: "Community driven, articles, resources, guides, interview questions, quizzes for angular development. Learn to become a modern Angular developer by following the steps, skills, resources and guides listed in this roadmap."
+  keywords:
+    - "guide to becoming a angular developer"
+    - "angular developer roadmap"
+    - "angular roadmap"
+    - "become angular developer"
+    - "angular developer skills"
+    - "angular skills test"
+    - "skills for angular development"
+    - "learn angular development"
+    - "what is angular"
+    - "angular quiz"
+    - "angular interview questions"
+relatedRoadmaps:
+  - "frontend"
+  - "javascript"
+  - "react"
+  - "vue"
+  - "nodejs"
+sitemap:
+  priority: 1
+  changefreq: "monthly"
+tags:
+  - "roadmap"
+  - "main-sitemap"
+  - "skill-roadmap"
+---
+

src/roadmaps/angular/content/100-typescript-basics/100-what-is-typescript.md

@@ -0,0 +1,10 @@
+# What is Typescript
+
+TypeScript is a strongly typed, object-oriented, compiled programming language that builds on JavaScript. It is a superset of the JavaScript language, designed to give you better tooling at any scale. TypeScript calls itself “JavaScript with syntax for types.” In short, it is JavaScript with some additional features. The secret to the success of TypeScript is in the type checking, ensuring that the data flowing through the program is of the correct kind of data.
+
+{% resources %}
+  {% Blog "https://thenewstack.io/what-is-typescript/", "What is TypeScript" %}
+  {% Blog "https://www.w3schools.com/typescript/", "W3Schools – TypeScript Tutorial" %}
+  {% Blog "https://www.tutorialspoint.com/typescript/index.htm", "Tutorials point – TypeScript Tutorial" %}
+  {% Blog "https://www.youtube.com/watch?v=d56mG7DezGs", "TypeScript Crash Course for Beginners" %}
+{% endresources %}

src/roadmaps/angular/content/100-typescript-basics/101-why-use-typescript.md

@@ -0,0 +1,8 @@
+# Why use TypeScript
+
+TypeScript extends JavaScript, providing a better developer experience. The benefits of using TypeScript over JavaScript include.Static typing – TypeScript comes with optional static typing and a type inference system, which means that a variable declared with no type may be inferred by TypeScript based on its value. Object-oriented programming – TypeScript supports object-oriented programming concepts like classes, inheritance, etc. Compile time checks – JavaScript is an interpreted programming language. There is no compilation involved. Hence, the errors get caught during the runtime. Since TypeScript compiles into JavaScript, errors get reported during the compile time rather than the runtime. Code editor support – IDEs or code editors like VS Code support autocomplete for a TypeScript codebase. They also provide inline documentation and highlight the errors. Use existing packages – You might want to use an npm package written in JavaScript. Since TypeScript is a superset of JavaScript, you can import and use that package. Moreover, the TypeScript community creates and maintains type definitions for popular packages that can be utilized in your project.
+
+{% resources %}
+  {% Blog "https://linguinecode.com/post/5-reasons-why-to-use-typescript", "linguinecode - Reasons to use TypeScript" %}
+  {% Blog "https://www.codemotion.com/magazine/backend/why-you-should-use-typescript-for-your-next-project/", "Codemotion - Reasons to use TypeScript" %}
+{% endresources %}

src/roadmaps/angular/content/100-typescript-basics/102-structural-typing.md

@@ -0,0 +1,12 @@
+# Structural Typing
+
+Type compatibility in TypeScript is based on structural subtyping. `Structural typing` is a way of relating types based solely on their members. This is in contrast with nominal typing. 
+
+TypeScript’s structural type system was designed based on how JavaScript code is typically written. Because JavaScript widely uses anonymous objects like function expressions and object literals, it’s much more natural to represent the relationships found in JavaScript libraries with a structural type system instead of a nominal one.
+
+{% resources %}
+  {% Blog "https://medium.com/redox-techblog/structural-typing-in-typescript-4b89f21d6004", "Structural typings — Medium" %}
+  {% Blog "https://www.typescriptlang.org/docs/handbook/type-compatibility.html", "Structural typings — Typescriptlang" %}
+  {% Blog "https://www.youtube.com/watch?v=kWtwsX_rT3k", "Structural typing video for Beginners" %}
+{% endresources %}
+

src/roadmaps/angular/content/100-typescript-basics/103-type-inference.md

@@ -0,0 +1,8 @@
+# Type Inference
+
+In TypeScript, several places where `type inference` is used to provide type information when there is no explicit type annotation. The type of the x variable is inferred to be a number. This inference occurs when variables and members are initialized, set parameter default values are, and determine function return types. For example, `let x: number`. In most cases, type inference is straightforward. In the following sections, we’ll explore some nuances in how types are inferred. For example, `let x: (number | null)[]`
+
+{% resources %}
+  {% Blog "https://www.typescriptlang.org/docs/handbook/type-inference.html", "Type Interface - typescriptlang" %}
+  {% Blog "https://www.youtube.com/watch?v=3ui_st7rtfA", "Type Inference video for Beginners" %}
+{% endresources %}

src/roadmaps/angular/content/100-typescript-basics/104-union-types.md

@@ -0,0 +1,8 @@
+# Union Types
+
+In TypeScript, we can define a variable that can have multiple types of values. In other words, TypeScript can combine one or two types of data (i.e., number, string, etc.) in a single type, a union type. Union types are a powerful way to express a variable with multiple types. Two or more data types can be combined using the pipe ('|') symbol between the types. For example,  `(type1 | type2 | type3 | .. | typeN)`. 
+
+{% resources %}
+  {% Blog "https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html", "Union Types - typescriptlang" %}
+  {% Blog "https://www.youtube.com/watch?v=uxjpm4W5pCo", "Union Type video for Beginners" %}
+{% endresources %}

src/roadmaps/angular/content/100-typescript-basics/105-builtin-types.md

@@ -0,0 +1,8 @@
+# Builtin Types
+
+The Builtin types represent the different types of values supported by the language. The builtin types check the validity of the supplied values before they are stored or manipulated by the program. This ensures that the code behaves as expected. The Builtin types further allow for richer code hinting and automated documentation too.
+
+{% resources %}
+  {% Blog "https://www.tutorialspoint.com/typescript/typescript_types.htm", "TypeScript Types - Tutorialspoint" %}
+  {% Blog "https://www.youtube.com/watch?v=Nt9ajBrqV_M", "Builtin Type video for Beginners" %}
+{% endresources %}

src/roadmaps/angular/content/100-typescript-basics/106-type-guard.md

@@ -0,0 +1,11 @@
+# Type Guard
+
+A type guard is a TypeScript technique used to get information about the type of a variable, usually within a conditional block. Type guards are regular functions that return a boolean, taking a type and telling TypeScript if it can be narrowed down to something more specific. Type guards have the unique property of assuring that the value tested is of a set type depending on the returned boolean.
+
+TypeScript uses built-in JavaScript operators like `typeof`, `instanceof`, and the `in` operator, which is used to determine if an object contains a property. Type guards enable you to instruct the TypeScript compiler to infer a specific type for a variable in a particular context, ensuring that the type of an argument is what you say it is.
+
+Type guards are typically used for narrowing a type and are pretty similar to feature detection, allowing you to detect the correct methods, prototypes, and properties of a value. Therefore, you can quickly figure out how to handle that value.
+
+{% resources %}
+  {% Blog "https://blog.logrocket.com/how-to-use-type-guards-typescript/", "Types Guards - Blog" %}
+{% endresources %}

src/roadmaps/angular/content/100-typescript-basics/index.md

@@ -0,0 +1,8 @@
+# Typescript Basics
+
+In order to enter into the world of Angular application development, typescript is necessary and it is the primary language here. Typescript is a superset of JavaScript. It comes with design-time support which is useful for type safety and tooling. Since, browsers cannot execute the TypeScript directly, it will be 'Transpiled' into JavaScript using the tsc compiler.
+
+{% resources %}
+  {% Blog "https://medium.com/jspoint/typescript-a-beginners-guide-6956fe8bcf9e", "Typescript a Beginners Guide" %}
+  {% Blog "https://www.typescriptlang.org/play", "TypeScript Playground" %}
+{% endresources %}

src/roadmaps/angular/content/101-rxjs-basics/100-observable-pattern.md

@@ -0,0 +1,9 @@
+# Observable Pattern
+
+The observer pattern is a software design pattern in which an object, named the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.
+
+Angular uses the Observer pattern which simply means — Observable objects are registered, and other objects observe (in Angular using the subscribe method) them and take action when the observable object is acted on in some way.
+
+{% resources %}
+  {% Blog "https://medium.com/fuzzycloud/angular-and-observable-4bf890b2a282", "Angular and Observable" %}
+{% endresources %}

src/roadmaps/angular/content/101-rxjs-basics/101-observable-lifecycle.md

@@ -0,0 +1,13 @@
+# Observable lifecycle
+
+An observable is a function that acts as a wrapper for a data stream. They support to pass messages inside your application. An observable is useless until an observer subscribes to it. An observer is an object which consumes the data emitted by the observable. An observer keeps receiving data values from the observable until the observable is completed, or the observer unsubscribes from the observable. Otherwise observers can receive data values from the observable continuously and asynchronously. So we can perform various operations such as updating the user interface, or passing the JSON response.
+
+There are 4 stages for a life cycle of an observable.
+ - Creation
+ - Subscription
+ - Execution
+ - Destruction
+
+{% resources %}
+  {% Official "https://medium.com/analytics-vidhya/understanding-rxjs-observables-ad5b34d9607f", "Understanding Observable LifeCycle" %}
+{% endresources %}

src/roadmaps/angular/content/101-rxjs-basics/102-marble-diagrams.md

@@ -0,0 +1 @@
+# Marble diagrams

src/roadmaps/angular/content/101-rxjs-basics/103-rxjs-vs-promises.md

@@ -0,0 +1 @@
+# Rxjs vs promises

src/roadmaps/angular/content/101-rxjs-basics/104-operators/100-filtering.md

@@ -0,0 +1 @@
+# Filtering

src/roadmaps/angular/content/101-rxjs-basics/104-operators/101-rate-limiting.md

@@ -0,0 +1 @@
+# Rate limiting

src/roadmaps/angular/content/101-rxjs-basics/104-operators/102-transformation.md

@@ -0,0 +1 @@
+# Transformation

src/roadmaps/angular/content/101-rxjs-basics/104-operators/103-combination.md

@@ -0,0 +1 @@
+# Combination

src/roadmaps/angular/content/101-rxjs-basics/104-operators/index.md

@@ -0,0 +1,38 @@
+# RxJS Operators 
+
+
+RxJS is mostly useful for its operators, even though the Observable is the foundation. Operators are the essential pieces that allow complex asynchronous code to be easily composed in a declarative manner.
+
+Operators are functions. There are two kinds of operators:
+
+**Pipeable Operators** are the kind that can be piped to Observables using the syntax observableInstance.pipe(operator()). These include, filter(...), and mergeMap(...). When called, they do not change the existing Observable instance. Instead, they return a new Observable, whose subscription logic is based on the first Observable.
+
+A Pipeable Operator is essentially a pure function which takes one Observable as input and generates another Observable as output. Subscribing to the output Observable will also subscribe to the input Observable.
+
+**Creation Operators** are the other kind of operator, which can be called as standalone functions to create a new Observable. For example: of(1, 2, 3) creates an observable that will emit 1, 2, and 3, one right after another. Creation operators will be discussed in more detail in a later section.
+
+## Piping
+
+Pipeable operators are functions, so they could be used like ordinary functions: op()(obs) — but in practice, there tend to be many of them convolved together, and quickly become unreadable: op4()(op3()(op2()(op1()(obs)))). For that reason, Observables have a method called .pipe() that accomplishes the same thing while being much easier to read:
+
+```bash
+ obs.pipe(op1(), op2(), op3(), op4());
+ ```
+
+ ## Creation Operators
+
+**What are creation operators?** Distinct from pipeable operators, creation operators are functions that can be used to create an Observable with some common predefined behavior or by joining other Observables.
+
+A typical example of a creation operator would be the interval function. It takes a number (not an Observable) as input argument, and produces an Observable as output:
+
+```bash
+import { interval } from 'rxjs';
+
+const observable = interval(1000 /* number of milliseconds */);
+```
+
+{% resources %}
+  {% Official "https://rxjs.dev/guide/operators#creation-operators-list", "List of creation operators" %}
+  {% Official "https://rxjs.dev/guide/operators", "Full RxJS Operators Documentation" %}
+{% endresources %}
+

src/roadmaps/angular/content/101-rxjs-basics/index.md

@@ -0,0 +1,5 @@
+# RxJS Basics
+
+Reactive Extensions for JavaScript, or RxJS, is a reactive library used to implement reactive programming to deal with async implementation, callbacks, and event-based programs.
+
+The reactive paradigm can be used in many different languages through the use of reactive libraries. These libraries are downloaded APIs that provide functionalities for reactive tools like observers and operators. It can be used in your browser or with Node.js.

src/roadmaps/angular/content/102-angular-basics/100-angularjs-vs-angular.md

@@ -0,0 +1,8 @@
+# AngularJS vs. Angular
+
+AngularJS was the older version of Angular, whose support officially ended in January 2022. Angular is a component-based front-end development framework built on TypeScript, which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more.
+
+{% resources %}
+  {% Official "https://angularjs.org/", "AngularJS Website" %}
+  {% Official "https://angular.io/start", "Official - Getting started with Angular" %}
+{% endresources %}

src/roadmaps/angular/content/102-angular-basics/101-angular-components.md

@@ -0,0 +1,13 @@
+# Angular Components
+
+Components are the main building block for Angular applications. Each component consists of:
+
+* An HTML template that declares what renders on the page
+* A TypeScript class that defines the behavior
+* A CSS selector that defines how the component is used in a template
+* Optionally, CSS styles applied to the template
+
+{% resources %}
+  {% Official "https://angular.io/guide/component-overview", "Angular Components Overview" %}
+  {% Blog "https://www.youtube.com/watch?v=x5PZwb4XurU", "Standalone Components in Angular" %}
+{% endresources %}

src/roadmaps/angular/content/102-angular-basics/102-angular-templates.md

@@ -0,0 +1,8 @@
+# Angular Templates
+
+A Template is a form of HTML which tells Angular to go towards another component. To create many Angular features, special syntax within the templates is used.
+
+{% resources %}
+  {% Official "https://angular.io/guide/template-overview", "Understanding Templates" %}
+  {% Official "https://angular.io/guide/template-syntax", "Template Syntax" %}
+{% endresources %}

src/roadmaps/angular/content/102-angular-basics/103-angular-modules.md

@@ -0,0 +1,7 @@
+# Angular Modules
+
+Modules in Angular act like a container where we can group the components, directives, pipes, and services, related to the application.
+
+{% resources %}
+  {% Official "https://angular.io/guide/architecture-modules", "Introduction to Modules" %}
+{% endresources %}

src/roadmaps/angular/content/102-angular-basics/104-dependency-injection.md

@@ -0,0 +1,8 @@
+# Dependency Injection
+
+Dependency Injection is one of the fundamental concepts in Angular. DI is wired into the Angular framework and allows classes with Angular decorators, such as Components, Directives, Pipes, and Injectables, to configure dependencies that they need.
+
+{% resources %}
+  {% Official "https://angular.io/guide/dependency-injection", "Understanding Dependency Injection" %}
+  {% Official "https://angular.io/guide/dependency-injection-in-action", "Dependency Injection in Action" %}
+{% endresources %}

src/roadmaps/angular/content/102-angular-basics/105-services.md

@@ -0,0 +1,10 @@
+# Services
+
+Services let you define code or functionalities that are then accessible and reusable in many other components in the Angular project. It also helps you with the abstraction of logic and data that is hosted independently but can be shared across other components.
+
+{% resources %}
+  {% Official "https://angular.io/tutorial/toh-pt4", "Services" %}
+  {% Blog "https://www.javatpoint.com/what-is-an-angular-service", "What is an Angular Service" %}
+  {% Blog "https://www.knowledgehut.com/blog/web-development/make-api-calls-angular", "Service for API Calls" %}
+  {% Blog "https://www.positronx.io/angular-service-tutorial-with-example/", "Service Tutorial with Example" %}
+{% endresources %}

src/roadmaps/angular/content/102-angular-basics/106-routing.md

@@ -0,0 +1,8 @@
+# Routing
+
+Routing in Angular allows the users to create a single-page application with multiple views and allows navigation between them.
+
+{% resources %}
+  {% Official "https://angular.io/guide/routing-overview", "Angular Routing" %}
+  {% Official "https://angular.io/guide/router", "Common Routing Tasks" %}
+{% endresources %}

src/roadmaps/angular/content/102-angular-basics/index.md

@@ -0,0 +1,5 @@
+# Angular Basics
+
+Angular is an strong front-end JavaScript framework which means that it enforces a certain style of application development and project structure that developers need to follow to develop apps with Angular. However, it also offers enough flexibility to allow you to structure your project in an understandable and manageable manner.
+
+In this module, we will have a look at some of the most basic concepts that you need to understand before diving into the framework with more advanced concepts.

src/roadmaps/angular/content/103-angular-cli/100-ng-build.md

@@ -0,0 +1,8 @@
+# Ng build
+
+The command can be used to build a project of type "application" or "library". When used to build a library, a different builder is invoked, and only the ts-config, configuration, and watch options are applied. All other options apply only to building applications.
+
+{% resources %}
+  {% Official "https://angular.io/cli/build", "Ng Build - Angular.io" %}
+  {% Blog "https://www.youtube.com/watch?v=VB6WuCPDwz0", "Building an Angular project" %}
+{% endresources %}

src/roadmaps/angular/content/103-angular-cli/101-ng-serve.md

@@ -0,0 +1,8 @@
+# Ng serve
+
+ng serve — This command builds, deploy, serves and every time watches your code changes. if find any change in code it builds and serves that code automatically. How do Angular builds? After coding our Angular apps using TypeScript, we use the Angular CLI command to build the app.
+
+{% resources %}
+  {% Official "https://angular.io/cli/serve", "Ng serve - Angular.io" %}
+  {% Blog "https://www.youtube.com/watch?v=-w-RfHcLt5U", "Running a project with ng serve" %}
+{% endresources %}

src/roadmaps/angular/content/103-angular-cli/102-ng-generate.md

@@ -0,0 +1,9 @@
+# Ng generate
+
+ng generate is used to create the component in angular project. These are the two main ways to generate a new component in Angular: using ng g c <component_name>, and using ng generate component <component_name>. Using either of these two commands, the new component can be generated pretty easily and followed by the suitable component name of your choice.
+
+
+{% resources %}
+  {% Official "https://angular.io/cli/generate", "Ng generate - Angular.io" %}
+  {% Blog "https://www.youtube.com/watch?v=NlHlu_zzmo4", "Angular cli generate component" %}
+{% endresources %}

src/roadmaps/angular/content/103-angular-cli/103-ng-test.md

@@ -0,0 +1,11 @@
+# Ng test
+
+ng test is used to runs unit tests in angular project.
+
+`ng test <project> [options]` | `ng t <project> [options]`
+
+
+{% resources %}
+  {% Official "https://angular.io/cli/test", "Ng test - Angular.io" %}
+  {% Blog "https://www.youtube.com/watch?v=n1O_eRwzRKA", "Angular Ng test commands" %}
+{% endresources %}

src/roadmaps/angular/content/103-angular-cli/104-ng-e2e.md

@@ -0,0 +1,8 @@
+# Ng e2e
+
+End-to-end testing (E2E) of Angular applications is performed using the Protractor testing framework, which is created by the Angular team themselves. Protractor can perform end to end tests on Angular applications that are running in a real browser by interacting with it, similar to that of an end-user.
+
+{% resources %}
+  {% Official "https://angular.io/cli/e2e", "Ng e2e - Angular.io" %}
+  {% Blog "https://www.youtube.com/watch?v=3vFnhzEGfew", "Angular cli generate component" %}
+{% endresources %}

src/roadmaps/angular/content/103-angular-cli/105-ng-new.md

@@ -0,0 +1,12 @@
+# Ng new
+
+`$ ng new [name]`
+
+That’s the default usage of the command and creating a new project folder with name. The project which is created in that folder is containing:
+
+The default Angular project, All dependencies installed in node_modules folder , Testing files for each components
+
+{% resources %}
+  {% Official "https://angular.io/cli/new", "Ng New - Angular.io" %}
+  {% Blog "https://www.youtube.com/watch?v=NdEpZezptkQ", "ng New command" %}
+{% endresources %}

src/roadmaps/angular/content/103-angular-cli/106-schematics.md

@@ -0,0 +1,8 @@
+# Schematics
+
+A schematic is a template-based code generator that supports complex logic. It is a set of instructions for transforming a software project by generating or modifying code.
+
+{% resources %}
+  {% Official "https://angular.io/guide/schematics#:~:text=A%20schematic%20is%20a%20template,collections%20and%20installed%20with%20npm.", "Angular Website" %}
+  {% Official "https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2?gi=ad9571373944", "Angular Blog" %}
+{% endresources %}

src/roadmaps/angular/content/103-angular-cli/index.md

@@ -0,0 +1,10 @@
+# Angular CLI
+
+The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. we can install angular latest CLI using the following command 
+
+`npm install -g @angular/cli`
+
+{% resources %}
+  {% Official "https://angular.io/cli", "Angular CLI - Angular.io" %}
+  {% Blog "https://www.youtube.com/watch?v=mZnzX3J5XKI", "Angular CLI - setup" %}
+{% endresources %}

src/roadmaps/angular/content/104-templates/100-interpolation.md

@@ -0,0 +1,7 @@
+# Interpolation
+
+Interpolation refers to embedding expressions into marked up text. By default, interpolation uses the double curly braces {{ and }} as delimiters. Angular replaces currentCustomer with the string value of the corresponding component property.
+
+{% resources %}
+  {% Official "ttps://angular.io/guide/interpolation", "Angular Official Website" %}
+{% endresources %}

src/roadmaps/angular/content/104-templates/101-property-binding.md

@@ -0,0 +1,7 @@
+# Property binding
+
+Property binding helps you set values for properties of HTML elements or directives. To bind to an element's property, enclose it in square brackets `[]` which causes Angular to evaluate the right-hand side of the assignment as a dynamic expression.
+
+{% resources %}
+  {% Official "https://angular.io/guide/property-binding", "Angular Official Website" %}
+{% endresources %}

src/roadmaps/angular/content/104-templates/102-template-statements.md

@@ -0,0 +1,7 @@
+# Template statements
+
+Template statements are methods or properties that you can use in your HTML to respond to user events. With template statements, your application can engage users through actions such as displaying dynamic content or submitting forms. Enclose the event in `()`  which causes Angular to evaluate the right hand side of the assignment as one or more template statements chained together using semicolon `;`.
+
+{% resources %}
+  {% Official "https://angular.io/guide/template-statements", "Angular Official Website" %}
+{% endresources %}

src/roadmaps/angular/content/104-templates/103-binding-data-props-attrs-events.md

@@ -0,0 +1,12 @@
+# Binding data props attrs events
+
+In an Angular template, a binding creates a live connection between view and the model and keeps them both in sync.
+
+- **property**: helps you set values for properties of HTML elements or directives.
+- **attributes**: helps you set values for attributes of HTML elements directly.
+- **event**: lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.
+- **data**: It's a combination of property and event binding and helps you share data between components.
+
+{% resources %}
+  {% Official "https://angular.io/guide/binding-overview", "Angular Official Website" %}
+{% endresources %}

src/roadmaps/angular/content/104-templates/104-reference-vars.md

@@ -0,0 +1,7 @@
+# Reference vars
+
+Template reference variables help you use data from one part of a template in another part of the template. A template variable can refer to a DOM element within a template, component or directive. In the template, use the hash symbol, `#`, to declare a template reference variable.
+
+{% resources %}
+  {% Official "https://angular.io/guide/template-reference-variables", "Angular Official Website" %}
+{% endresources %}

src/roadmaps/angular/content/104-templates/105-input-output.md

@@ -0,0 +1,7 @@
+# Input output
+
+`@Input()` and `@Output()` give a child component a way to communicate with its parent component. `@Input()` lets a parent component update data in the child component. Conversely, `@Output()` lets the child send data to a parent component.
+
+{% resources %}
+  {% Official "https://angular.io/guide/inputs-outputs", "Angular Official Website" %}
+{% endresources %}

src/roadmaps/angular/content/104-templates/index.md

@@ -0,0 +1,7 @@
+# Templates
+
+A template is a form of HTML that tells Angular how to render the component.
+
+{% resources %}
+  {% Blog "https://angular.io/guide/architecture-components", "Introduction to Components and Templates" %}
+{% endresources %}

src/roadmaps/angular/content/105-rendering-topics/100-builtin-directives.md

@@ -0,0 +1,11 @@
+# Builtin directives
+
+SKDirectives are classes that add additional behavior to elements in your Angular applications. Use Angular's built-in directives to manage forms, lists, styles, and what users see.
+
+`NgClass` Adds and removes a set of CSS classes. | `NgStyle` Adds and removes a set of HTML styles. | `NgModel` Adds two-way data binding to an HTML form element.
+
+
+{% resources %}
+  {% Official "https://angular.io/guide/built-in-directives", "Understanding BuiltIn Directives" %}
+  {% Blog "https://thinkster.io/tutorials/angular-2-directives", "BuiltIn Directives Types" %}
+{% endresources %}

src/roadmaps/angular/content/105-rendering-topics/101-builtin-pipes.md

@@ -0,0 +1,11 @@
+# Builtin pipes
+
+Use pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions to use in template expressions to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application , some common pipes are 
+
+`DatePipe` | `UpperCasePipe` | `LowerCasePipe` | `CurrencyPipe` | `DecimalPipe` | `PercentPipe`
+
+
+{% resources %}
+  {% Official "https://angular.io/guide/pipes", "Understanding BuiltIn Pipes" %}
+  {% Blog "https://codecraft.tv/courses/angular/pipes/built-in-pipes/", "BuiltIn Pipes - exampls" %}
+{% endresources %}

src/roadmaps/angular/content/105-rendering-topics/102-change-detection.md

@@ -0,0 +1,8 @@
+# Change detection
+
+Change detection is the process through which Angular checks to see whether your application state has changed, and if any DOM needs to be updated. At a high level, Angular walks your components from top to bottom, looking for changes. Angular runs its change detection mechanism periodically so that changes to the data model are reflected in an application’s view. Change detection can be triggered either manually or through an asynchronous event
+
+{% resources %}
+  {% Official "https://angular.io/guide/change-detection", "Understanding Change detection" %}
+  {% Blog "https://www.youtube.com/watch?v=f8sA-i6gkGQ", "4 Runtime Performance Optimizations ( Change detection )" %}
+{% endresources %}

src/roadmaps/angular/content/105-rendering-topics/index.md

@@ -0,0 +1 @@
+# Rendering topics

src/roadmaps/angular/content/106-forms/100-reactive-forms.md

@@ -0,0 +1,10 @@
+# Reactive Forms
+
+Reactive Forms in angular are those which used to handle the inputs coming from the user. We can define controls by using classes such as FormGroup and FormControl. 
+
+{% resources %}
+  {% Official "https://angular.io/guide/reactive-forms", "Reactive forms - Angular" %}
+  {% Blog "https://www.javatpoint.com/angular-reactive-forms", "Angular Reactive Forms" %}
+  {% Blog "https://www.digitalocean.com/community/tutorials/angular-reactive-forms-introduction", "How To Use Reactive Forms in Angular" %}
+  {% Blog "https://www.youtube.com/watch?v=8k4ctDmVn7w", "Reactive Form in Angular" %}
+{% endresources %}

src/roadmaps/angular/content/106-forms/101-template-driven-forms.md

@@ -0,0 +1,12 @@
+# Template Driven Forms
+
+A Template driven form is the simplest form we can build in Angular. It is mainly used for creating simple form application. 
+
+It uses two-way data-binding (ngModel) to create and handle the form components.
+
+{% resources %}
+  {% Official "https://angular.io/guide/forms", "Building a template-driven form" %}
+  {% Blog "https://codecraft.tv/courses/angular/forms/template-driven/", "Template-Driven Forms" %}
+  {% Blog "https://www.youtube.com/watch?v=whr14XxB8-M", "Template driven form" %}
+  {% Blog "https://www.youtube.com/watch?v=cVd4ZCIXprs", "Template driven form Validations" %}
+{% endresources %}

src/roadmaps/angular/content/106-forms/index.md

@@ -0,0 +1,12 @@
+# Forms
+
+Forms are used to handle user inputs in many applications. It enables users from entering sensitive information to performing several data entry tasks.
+
+Angular provides two approachs to handle user inputs trough forms: reactive and template-driven forms.
+
+{% resources %}
+  {% Official "https://angular.io/guide/forms-overview", "Introduction to forms in Angular" %}
+  {% Blog "https://www.w3schools.com/angular/angular_forms.asp", "Angular Forms" %}
+  {% Blog "https://www.youtube.com/watch?v=-bGgjgx3fGs", "Angular Forms Tutorial" %}
+  {% Blog "https://www.youtube.com/watch?v=hAaoPOx_oIw", "Building Forms in Angular Apps" %}
+{% endresources %}

src/roadmaps/angular/content/107-routing/100-configuration.md

@@ -0,0 +1 @@
+# Configuration

src/roadmaps/angular/content/107-routing/101-router-outlets.md

@@ -0,0 +1,9 @@
+# Router outlets
+
+The router-outlet is a directive that's available from the @angular/router package and is used by the router to mark where in a template, a matched component should be inserted.
+
+Thanks to the router outlet, your app will have multiple views/pages and the app template acts like a shell of your application. Any element, you add to the shell will be rendered in each view, only the part marked by the router outlet will be changed between views.
+
+{% resources %}
+  {% Official "https://angular.io/api/router/RouterOutle", "Understanding Router Outlets" %}
+{% endresources %}

src/roadmaps/angular/content/107-routing/102-router-links.md

@@ -0,0 +1 @@
+# Router links

src/roadmaps/angular/content/107-routing/103-router-events.md

@@ -0,0 +1 @@
+# Router events

src/roadmaps/angular/content/107-routing/104-guards.md

@@ -0,0 +1,14 @@
+# Route Guards
+
+Angular route guards are interfaces provided by Angular which, when implemented, allow us to control the accessibility of a route based on conditions provided in class implementation of that interface.
+
+Some types of angular guards are `CanActivate`, `CanActivateChild`, `CanLoad`, `CanDeactivate` and `Resolve`.
+
+{% resources %}
+  {% Official "https://angular.io/api/router", "Angular Official Website" %}
+  {% Official "https://angular.io/api/router/CanActivate", "Can Activate Guard" %}
+  {% Official "https://angular.io/api/router/CanActivateChild", "Can Activate Child" %}
+  {% Official "https://angular.io/api/router/CanDeactivate", "Can Deactivate" %}
+  {% Official "https://angular.io/api/router/CanLoad", "Angular Can Load" %}
+  {% Official "https://angular.io/api/router/CanMatch", "Can Match" %}
+{% endresources %}

src/roadmaps/angular/content/107-routing/105-lazy-loading.md

@@ -0,0 +1,8 @@
+# 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.
+
+{% resources %}
+  {% Blog "https://angular.io/guide/lazy-loading-ngmodules", "What is Lazy loading ? - Angular.io " %}
+  {% Blog "https://www.youtube.com/watch?v=JjIQq9lh-Bw", "Angular Tutorial - Lazy Loading" %}
+{% endresources %}

src/roadmaps/angular/content/107-routing/index.md

@@ -0,0 +1,9 @@
+# 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.
+
+{% resources %}
+  {% Blog "https://www.geeksforgeeks.org/routing-in-angular-9-10/", "What is Routing ? - Geeksforgeeks " %}
+  {% Blog "https://angular.io/guide/router", "Explanation of Routing ? - Angular.io " %}
+  {% Blog "https://www.youtube.com/watch?v=Nehk4tBxD4o", "Angular Tutorial - Routing and Navigation" %}
+{% endresources %}

src/roadmaps/angular/content/108-services-remote-data/100-dependency-injection.md

@@ -0,0 +1,9 @@
+# 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.
+
+{% resources %}
+  {% Blog "https://angular.io/guide/dependency-injection", "What is Dependency Injection ? - angular.io " %}
+  {% Blog "https://www.youtube.com/watch?v=OFPIGlxunL0", "Introduction of Dependency injection" %}
+{% endresources %}
+

src/roadmaps/angular/content/108-services-remote-data/index.md

@@ -0,0 +1,8 @@
+# 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.
+
+{% resources %}
+  {% Blog "https://angular.io/tutorial/toh-pt4", "Adding Services in Angular" %}
+  {% Blog "https://angular.io/tutorial/toh-pt6", "Get Data from Server" %}
+{% endresources %}

src/roadmaps/angular/content/109-lifecycle-hooks.md

@@ -0,0 +1,14 @@
+# 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`
+
+{% resources %}
+  {% Blog "https://angular.io/guide/lifecycle-hooks", "What is Life Cycle Hooks? - Angular.io " %}
+  {% Blog "https://blog.logrocket.com/angular-lifecycle-hooks/", "The life cycle hooks of angular - Blog " %}
+{% endresources %}

src/roadmaps/angular/content/110-state-management/100-ngxs.md

@@ -0,0 +1,10 @@
+# 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.
+
+{% resources %}
+  {% Blog "https://www.ngxs.io/", "What is NGXS ? - Ngxs.io " %}
+  {% Blog "https://medium.com/@knoldus/introduction-to-ngxs-state-management-pattern-library-for-angular-ec76f681ceba", "Details about NGXS - Medium " %}
+  {% Blog "https://www.youtube.com/watch?v=SGj11j4hxmg", "Practise of NGXS" %}
+{% endresources %}
+

src/roadmaps/angular/content/110-state-management/101-ngrx.md

@@ -0,0 +1,9 @@
+# Ngrx
+
+Ngrx is a group of Angular libraries for reactive extensions that implements the Redux pattern and it’s supercharged with RXJS.
+{% resources %}
+  {% Blog "https://ngrx.io/", "What is NGRX ? - ngrx.io " %}
+  {% Blog "https://ahmedrebai.medium.com/introduction-to-state-management-with-ngrx-and-angular-91f4ff27ec9f", "Details about NGRX - Medium " %}
+  {% Blog "https://www.youtube.com/watch?v=f97ICOaekNU", "Practise of NGRX" %}
+{% endresources %}
+

src/roadmaps/angular/content/110-state-management/index.md

@@ -0,0 +1,9 @@
+# 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.
+
+{% resources %}
+  {% Blog "https://www.techtarget.com/searchapparchitecture/definition/state-management", "What is State Management?" %}
+  {% Blog "https://blog.logrocket.com/angular-state-management-made-simple-with-ngrx/", " Angular state management made simple with NgRx" %}
+  {% Blog "https://www.syncfusion.com/blogs/post/angular-state-management-with-ngrx.aspx", "Angular State Management with NgRx" %}
+{% endresources %}

src/roadmaps/angular/content/111-zones.md

@@ -0,0 +1 @@
+# Zones

src/roadmaps/angular/content/112-creating-a-custom-x/100-directive.md

@@ -0,0 +1,10 @@
+# Directive
+
+Directives are the functions that will execute whenever the Angular compiler finds them. Angular Directives enhance the capability of HTML elements by attaching custom behaviors to the DOM.
+
+From the core concept, Angular directives are categorized into three categories: Attribute Directives, Structural Directives, and Component Directives.
+
+{% resources %}
+  {% Blog "https://www.freecodecamp.org/news/angular-directives-learn-how-to-use-or-create-custom-directives-in-angular-c9b133c24442/", "Create a custom directive - Freecodecamp" %}
+  {% Blog "https://www.youtube.com/watch?v=AoN56g6UAsE", "Create a custom directive video for Beginners" %}
+{% endresources %}

src/roadmaps/angular/content/112-creating-a-custom-x/101-pipe.md

@@ -0,0 +1,8 @@
+# Custom Pipes
+
+Pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions in template expressions to accept an input value and return a transformed value. Pipes are helpful because you can use them throughout your application while only declaring each pipe once. For example, you would use a pipe to show the date as April 15, 1988, rather than the raw string format.
+
+{% resources %}
+  {% Blog "https://angular.io/guide/pipes-custom-data-trans", "Create a custom pipe - angular.io" %}
+  {% Blog "https://www.youtube.com/watch?v=P2587FN4Y0w", "Create a custom pipe video for Beginners" %}
+{% endresources %}

src/roadmaps/angular/content/112-creating-a-custom-x/102-library.md

@@ -0,0 +1,7 @@
+# Library
+
+Use the Angular CLI and the npm package manager to build and publish your library as an npm package.
+
+{% resources %}
+  {% Official "https://angular.io/guide/creating-libraries", "Angular Website" %}
+{% endresources %}

src/roadmaps/angular/content/112-creating-a-custom-x/index.md

@@ -0,0 +1,3 @@
+# Creating a custom X
+
+Learn how to create custom pipes, libraries and directives in Angular.

src/roadmaps/angular/content/113-angular-ssr/100-angular-universal.md

@@ -0,0 +1,8 @@
+# Angular universal
+
+Angular Universal also known as server-side rendering is tool which allows server to pre-render Angular application while user hits your website for first time.
+
+{% resources %}
+  {% Official "https://angular.io/guide/universal", "Angular Website" %}
+  {% Blog "https://github.com/angular/universal", "Github Repository" %}
+{% endresources %}

src/roadmaps/angular/content/113-angular-ssr/index.md

@@ -0,0 +1,8 @@
+# SSR in Angular
+
+A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.
+
+{% resources %}
+  {% Official "https://angular.io/guide/universal", "Angular Universal" %}
+  {% Blog "https://web.dev/rendering-on-the-web/", "Rendering on the Web" %}
+{% endresources %}

src/roadmaps/angular/content/114-angular-ssg/100-scully.md

@@ -0,0 +1,8 @@
+# Scully
+
+Scully is the best static site generator for Angular projects looking to embrace the Jamstack. It will use your application and will create a static index. html for each of your pages/routes.
+
+{% resources %}
+  {% Official "https://scully.io/", "Scully Website" %}
+  {% Blog "https://github.com/scullyio/scully", "Github Repository" %}
+{% endresources %}

src/roadmaps/angular/content/114-angular-ssg/index.md

@@ -0,0 +1,3 @@
+# Angular SSG
+
+SSG (Static Site Generator), helps in building the HTML full website, during the process of building and serving that HTML Page. This method helps to generate the HTML website on the client side before its being served on the server side. Therefore, whenever a user requests a HTML Page, firstly HTML page will be rendered and secondly, the angular app will be rendered. The SSG can be used only if your website is static (or) it's content doesn't changes frequently.

src/roadmaps/angular/content/115-testing-angular-apps/100-testing-pipes.md

@@ -0,0 +1,8 @@
+# Testing pipes
+
+An Angular Pipe is a special function that is called from a Component template. Its purpose is to transform a value: You pass a value to the Pipe, the Pipe computes a new value and returns it.
+
+{% resources %}
+  {% Blog "https://angular.io/guide/testing-pipes", "Angular.io Website" %}
+  {% Blog "https://testing-angular.com/testing-pipes/", "Testing-Angular.com" %}
+{% endresources %}

src/roadmaps/angular/content/115-testing-angular-apps/101-testing-services.md

@@ -0,0 +1,8 @@
+# Testing services
+
+In an Angular application, Services are responsible for fetching, storing and processing data. Services are singletons, meaning there is only one instance of a Service during runtime. They are fit for central data storage, HTTP and WebSocket communication as well as data validation.
+
+{% resources %}
+  {% Blog "https://angular.io/guide/testing-services", "Angular.io Website" %}
+  {% Blog "https://testing-angular.com/testing-services/", "Testing-Angular.com" %}
+{% endresources %}

src/roadmaps/angular/content/115-testing-angular-apps/102-testing-component-bindings.md

@@ -0,0 +1,7 @@
+# Testing component bindings
+
+Angular processes all data bindings once for each JavaScript event cycle, from the root of the application component tree through all child components. Data binding plays an important role in communication between a template and its component, and is also important for communication between parent and child components.
+
+{% resources %}
+  {% Blog "https://angular.io/guide/architecture-components#:~:text=Angular%20processes%20all%20data%20bindings,between%20parent%20and%20child%20components.", "Angular.io Website" %}
+{% endresources %}

src/roadmaps/angular/content/115-testing-angular-apps/103-testing-directives.md

@@ -0,0 +1,8 @@
+# Testing directives
+
+Directives are classes that add new behavior or modify the existing behavior to the elements in the template. Basically directives are used to manipulate the DOM, for example adding/removing the element from DOM or changing the appearance of the DOM elements.
+
+{% resources %}
+  {% Blog "https://angular.io/guide/testing-attribute-directives", "Angular.io Website" %}
+  {% Blog "https://testing-angular.com/testing-directives/", "tesing-angular Website" %}
+{% endresources %}

src/roadmaps/angular/content/115-testing-angular-apps/104-testing-component-templates.md

@@ -0,0 +1,7 @@
+# Testing component templates
+
+With a component template , you can save and reuse component processes and properties and create components from them; template-based components inherit the template's properties and process.
+
+{% resources %}
+  {% Blog "https://angular.io/guide/architecture-components", "Angular.io Website" %}
+{% endresources %}

src/roadmaps/angular/content/115-testing-angular-apps/index.md

@@ -0,0 +1,3 @@
+# Testing Angular Apps
+
+In any software development process, Testing the application plays a vital role. If Bugs and crashes are not figured out and solved they can defame the development company as well as hurt the clients too. But, Angular’s architecture comes with built-in testability features. As soon as you create a new project with Angular CLI, two essential testing tools are installed.They are: Jasmine and Karma. Jasmine is the testing library which structures individual tests into specifications (“specs”) and suites. And Karma is the test runner, which enables the different browsers to run the tests mentioned by Jasmine and the browsers will finally report the test results back.

src/roadmaps/aspnet-core/aspnet-core.md

@@ -0,0 +1,56 @@
+---
+jsonUrl: "/jsons/aspnet-core.json"
+pdfUrl: "/pdfs/aspnet-core.pdf"
+order: 9
+featuredTitle: "ASP.NET Core"
+featuredDescription: "Step by step guide to becoming an ASP.NET Core Developer in 2022"
+title: "ASP.NET Core Developer"
+description: "Step by step guide to becoming an ASP.NET core developer in 2022"
+isNew: true
+hasTopics: true
+dimensions:
+  width: 968
+  height: 2773.45
+seo:
+  title: "Learn to become a modern ASP.NET core developer"
+  description: "Community driven, articles, resources, guides, interview questions, quizzes for asp.net core development. Learn to become a modern ASP.NET core developer by following the steps, skills, resources and guides listed in this roadmap."
+  keywords:
+    - "guide to becoming a developer"
+    - "guide to becoming an asp.net core developer"
+    - "asp.net core developer"
+    - "asp.net core engineer"
+    - "asp.net core skills"
+    - "guide to asp.net core"
+    - "asp.net developer roadmap"
+    - "asp net developer roadmap"
+    - "asp developer roadmap"
+    - "asp.net core roadmap"
+    - "asp.net core skills"
+    - "asp.net core skills test"
+    - "skills for asp.net core"
+    - "cloud development"
+    - "what is asp.net core"
+    - "asp.net core quiz"
+    - "asp.net core interview questions"
+    - "asp.net core engineer roadmap"
+    - "asp.net core developer roadmap"
+    - "become an asp.net core developer"
+    - "asp.net core developer career path"
+    - "asp.net core developer"
+    - "modern asp.net core developer"
+relatedRoadmaps:
+  - "backend"
+  - "devops"
+  - "python"
+  - "golang"
+  - "java"
+  - "nodejs"
+sitemap:
+  priority: 1
+  changefreq: "monthly"
+tags:
+  - "roadmap"
+  - "main-sitemap"
+  - "role-roadmap"
+---
+

src/roadmaps/aspnet-core/content/100-basics-of-csharp/100-csharp.md

@@ -0,0 +1,8 @@
+# C#
+
+C# is a modern coding language that was developed by Microsoft that focuses on applying the coding style to C++ and making it so that way it's more condensed and simple. It's similar to Java by both being static, strong, and manifestive languages. Both use the System's prebuilt class to do certain features like printing output to the screen, etc.C#, like Java, also contains a garbage collection, which removes lower-level maintenance code from the programmer.
+
+{% resources %}
+  {% Blog "https://learn.microsoft.com/en-us/dotnet/csharp//", "C# official website?" %}
+  {% Course "https://www.w3schools.com/CS/index.php", "The Beginners Guide to C#" %}
+{% endresources %}

src/roadmaps/aspnet-core/content/100-basics-of-csharp/101-dotnet.md

@@ -0,0 +1 @@
+# Dotnet

src/roadmaps/aspnet-core/content/100-basics-of-csharp/102-dotnet-cli.md

@@ -0,0 +1 @@
+# Dotnet cli

src/roadmaps/aspnet-core/content/100-basics-of-csharp/index.md

@@ -0,0 +1 @@
+# Basics of csharp

src/roadmaps/aspnet-core/content/101-general-development-skills/100-git.md

@@ -0,0 +1,10 @@
+# Git
+
+[Git](https://git-scm.com/) is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
+
+{% resources %}
+  {% Course "https://github.com/jlord/git-it-electron", "Learn Git on the command line" %}
+  {% Blog "https://www.youtube.com/watch?v=zbKdDsNNOhg", "Version Control System Introduction" %}
+  {% Blog "https://www.youtube.com/watch?v=SWYqp7iY_Tc", "Git & GitHub Crash Course For Beginners" %}
+  {% Blog "https://youtu.be/Y9XZQO1n_7c?t=21", "Learn Git in 20 Minutes" %}
+{% endresources %}

src/roadmaps/aspnet-core/content/101-general-development-skills/101-azure-devops-services.md

@@ -0,0 +1 @@
+# Azure devops services

src/roadmaps/aspnet-core/content/101-general-development-skills/102-vcs-hosting-services.md

@@ -0,0 +1,9 @@
+# Repo Hosting Services
+
+There are different repository hosting services with the most famous one being GitHub, GitLab and BitBucket. I would recommend creating an account on GitHub because that is where most of the OpenSource work is done and most of the developers are.
+
+{% resources %}
+  {% Blog "https://github.com", "GitHub: Where the world builds software" %}
+  {% Blog "https://gitlab.com", "GitLab: Iterate faster, innovate together" %}
+  {% Blog "https://bitbucket.com", "BitBucket: The Git solution for professional teams" %}
+{% endresources %}

src/roadmaps/aspnet-core/content/101-general-development-skills/103-http-https.md

@@ -0,0 +1,21 @@
+# HTTP
+
+HTTP is the `TCP/IP` based application layer communication protocol which standardizes how the client and server communicate with each other. It defines how the content is requested and transmitted across the internet.
+
+# HTTPS
+
+HTTPS (**H**ypertext **T**ransfer **P**rotocol **S**ecure) is the secure version of HTTP, which is the primary protocol used to send data between a web browser and a website.
+
+`HTTPS = HTTP + SSL/TLS`
+
+{% resources %}
+  {% Blog "https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/", "What is HTTP?" %}
+  {% Blog "https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview", "An overview of HTTP" %}
+  {% Blog "https://kamranahmed.info/blog/2016/08/13/http-in-depth", "Journey to HTTP/2" %}
+  {% Blog "https://www.smashingmagazine.com/2021/08/http3-core-concepts-part1/", "HTTP/3 From A To Z: Core Concepts" %}
+  {% Blog "https://www.youtube.com/watch?v=iYM2zFP3Zn0", "HTTP Crash Course & Exploration" %}
+  {% Blog "https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/", "What is HTTPS?" %}
+  {% Blog "https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https", "Why HTTPS Matters" %}
+  {% Blog "https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https", "Enabling HTTPS on Your Servers" %}
+  {% Blog "https://howhttps.works/", "How HTTPS works (comic)" %}
+{% endresources %}

src/roadmaps/aspnet-core/content/101-general-development-skills/104-datastructures-and-algorithms.md

@@ -0,0 +1,11 @@
+# Data Structures
+
+As the name indicates, a **Data Structure** is a way of organizing the data in the **memory** so it can be used efficiently. Some common data structures are array, linked list, stack, hashtable, queue, tree, heap, and graph.
+
+{% resources %}
+  {% Blog "https://www.geeksforgeeks.org/data-structures", "What are Data Structures?" %}
+  {% Blog "https://www.javatpoint.com/data-structure-tutorial", " Data Structures and Algorithms" %}
+  {% Blog "https://www.youtube.com/watch?v=9rhT3P1MDHk&list=PLkZYeFmDuaN2-KUIv-mvbjfKszIGJ4FaY", "Data Structures Illustrated" %}
+  {% Blog "https://dev.to/adavidoaiei/fundamental-data-structures-and-algorithms-in-c-4ocf", "C# resources" %}
+  {% Blog "https://www.csharpstar.com/csharp-algorithms/", "Interview Questions about Data Structures" %}
+{% endresources %}

src/roadmaps/aspnet-core/content/101-general-development-skills/index.md

@@ -0,0 +1 @@
+# General development skills

src/roadmaps/aspnet-core/content/102-database-fundamentals/100-database-design-basics.md

@@ -0,0 +1 @@
+# Database design basics

src/roadmaps/aspnet-core/content/102-database-fundamentals/101-sql-basics.md

@@ -0,0 +1 @@
+# Sql basics

src/roadmaps/aspnet-core/content/102-database-fundamentals/102-stored-procedures.md

@@ -0,0 +1 @@
+# Stored procedures

src/roadmaps/aspnet-core/content/102-database-fundamentals/103-constraints.md

@@ -0,0 +1 @@
+# Constraints

src/roadmaps/aspnet-core/content/102-database-fundamentals/104-triggers.md

@@ -0,0 +1 @@
+# Triggers

src/roadmaps/aspnet-core/content/102-database-fundamentals/index.md

@@ -0,0 +1 @@
+# Database fundamentals

src/roadmaps/aspnet-core/content/103-basics-of-aspnet-core/100-mvc.md

@@ -0,0 +1 @@
+# Mvc

src/roadmaps/aspnet-core/content/103-basics-of-aspnet-core/101-rest.md

@@ -0,0 +1 @@
+# Rest

src/roadmaps/aspnet-core/content/103-basics-of-aspnet-core/102-razor-pages.md

@@ -0,0 +1 @@
+# Razor pages

src/roadmaps/aspnet-core/content/103-basics-of-aspnet-core/103-razor-components.md

@@ -0,0 +1 @@
+# Razor components

src/roadmaps/aspnet-core/content/103-basics-of-aspnet-core/104-middlewares.md

@@ -0,0 +1 @@
+# Middlewares