adding content to angular roadmap - angular cli (#2131)

Co-authored-by: Ibtesam Ahmed ( SK ) <51031949+SkyLineProgrammers@users.noreply.github.com>

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

@@ -1 +1,7 @@
-# Ng build
+# 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.
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli/build'>Ng Build - Angular.io</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=VB6WuCPDwz0'>Building an Angular project</BadgeLink>

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

@@ -1 +1,7 @@
-# Ng serve
+# 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.
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli/serve'>Ng serve - Angular.io</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=-w-RfHcLt5U'>Running a project with ng serve</BadgeLink>

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

@@ -1 +1,8 @@
-# Ng generate
+# 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.
+
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli/generate'>Ng generate - Angular.io</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=NlHlu_zzmo4'>Angular cli generate component</BadgeLink>

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

@@ -1 +1,10 @@
-# Ng test
+# Ng test
+
+ng test is used to runs unit tests in angular project.
+
+`ng test <project> [options]` | `ng t <project> [options]`
+
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli/test'>Ng test - Angular.io</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=n1O_eRwzRKA'>Angular Ng test commands</BadgeLink>

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

@@ -1 +1,7 @@
-# Ng e2e
+# 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.
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli/e2e'>Ng e2e - Angular.io</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=3vFnhzEGfew'>Angular cli generate component</BadgeLink>

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

@@ -1 +1,11 @@
-# Ng new
+# 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
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli/new'>Ng New - Angular.io</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=NdEpZezptkQ'>ng New command</BadgeLink>

content/roadmaps/104-angular/content/103-angular-cli/readme.md

@@ -1 +1,9 @@
-# Angular cli
+# 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`
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli'>Angular CLI - Angular.io</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=mZnzX3J5XKI'>Angular CLI - setup</BadgeLink>