Add content to Angular Roadmap (#2005)

* Add content to Angular Roadmap - Basics

* Update content/roadmaps/104-angular/content/102-angular-basics/100-angularjs-vs-angular.md

* Update content/roadmaps/104-angular/content/102-angular-basics/101-angular-components.md

* Update content/roadmaps/104-angular/content/102-angular-basics/102-angular-templates.md

* Update content/roadmaps/104-angular/content/102-angular-basics/103-angular-modules.md

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>

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

@@ -1 +1,7 @@
-# Angularjs vs angular
+# 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.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angularjs.org/'>AngularJS Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/start'>Official - Getting started with Angular</BadgeLink>

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

@@ -1 +1,12 @@
-# Angular components
+# 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
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/component-overview'>Angular Components Overview</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=x5PZwb4XurU'>Standalone Components in Angular</BadgeLink>

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

@@ -1 +1,7 @@
-# Angular templates
+# 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.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/template-overview'>Understanding Templates</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/template-syntax'>Template Syntax</BadgeLink>

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

@@ -1 +1,6 @@
-# Angular modules
+# Angular Modules
+
+Modules in Angular act like a container where we can group the components, directives, pipes, and services, related to the application.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/architecture-modules'>Introduction to Modules</BadgeLink>