[WIP] setup modern angular training

src/bit-u.md

@@ -388,6 +388,21 @@ a.quote-link:hover{
           </div>
           <a href="./learn-rxjs.html" class="button button-grey full-width">Take this course</a>
       </div>
+      <div class="academy-card course">
+          <div class="course-logo">
+            <img src="./static/img/angular-gradient.png" height="70">
+          </div>
+          <h4>Modern Angular</h4>
+          <p>Build a multi-page ordering app with the latest and greatest Angular APIs.</p>
+          <div class="width100">
+            <p class='detail'><strong>Audience:</strong> Intermediate JS developers</p>
+            <p class='detail'><strong>Goal:</strong> Learn modern Angular concepts.</p>
+            <p class='detail'><strong>Time:</strong> 6 hours</p>
+          </div>
+          <a href="./learn-modern-angular.html" class="button button-grey full-width">Take this course</a>
+      </div>
+    </div>
+    <div class="courses">
       <div class="academy-card course">
           <div class="course-logo">
             <img src="./static/img/angular.png" height="70">
@@ -403,8 +418,6 @@ a.quote-link:hover{
           </div>
           <a href="./learn-angular.html" class="button button-grey full-width">Take this course</a>
       </div>
-    </div>
-    <div class="courses">
       <div class="academy-card course">
         <div class="course-logo">
           <img src="./static/img/ngrx.png" height="70">
@@ -432,6 +445,8 @@ with Jira.</p>
         </div>
         <a href="./learn-agile-program-management-with-jira.html" class="button button-grey full-width">Take this course</a>
       </div>
+    </div>
+    <div class="courses">
       <div class="academy-card course">
         <div class="course-logo">
           <img src="./static/img/docker/logo.png" height="70">
@@ -445,8 +460,6 @@ with Jira.</p>
         </div>
         <a href="./learn-docker.html" class="button button-grey full-width">Take this course</a>
       </div>
-    </div>
-    <div class="courses">
       <div class="academy-card course">
           <div class="course-logo">
             <img src="./static/img/javascript.png" height="70">
@@ -473,6 +486,8 @@ with Jira.</p>
           </div>
           <a href="./learn-web-components.html" class="button button-grey full-width">Take this course</a>
       </div>
+    </div>
+    <div class="courses">
       <div class="academy-card course">
           <div class="course-logo">
             <img src="./static/img/typescript.png" width="140">
@@ -486,8 +501,6 @@ with Jira.</p>
           </div>
           <a href="./learn-typescript.html" class="button button-grey full-width">Take this course</a>
       </div>
-    </div>
-    <div class="courses">
       <div class="academy-card course">
           <div class="course-logo">
             <img src="./static/img/javascript.png" height="70">
@@ -515,7 +528,10 @@ with Jira.</p>
           </div>
           <a href="./learn-dom-jquery.html" class="button button-grey full-width">Take this course</a>
       </div>
-      <div class="academy-card course" style="background: transparent; border: none;">&nbsp;</div>
+      <!--
+        uncomment if there are 2 items on the last row
+        <div class="academy-card course" style="background: transparent; border: none;">&nbsp;</div>
+      -->
     </div>
 
   </div>

src/modern-angular/01-building-first-app/app.component.html

@@ -0,0 +1,3 @@
+<h1>Place My Order App: Coming Soon!</h1>
+
+<router-outlet />

src/modern-angular/01-building-first-app/building-first-app.md

@@ -0,0 +1,206 @@
+@page learn-modern-angular/building-our-first-app Generate an App
+@parent learn-modern-angular 1
+
+@description Learn how to generate an Angular application with its command line interface (CLI).
+
+@body
+
+## How to Use This Guide
+
+This guide will walk you through building an application in Angular 19. Each page of the guide is based on building a new feature, and may have multiple "problems" to solve. Each problem will be explained and include requirements and any set-up steps needed. Most problems will also include unit tests to update to verify the solution has been implemented correctly. The ✏️ icon will be used to indicate when commands need to be run or when files need to be updated. If you have any issues or suggestions as you move through this training, we’d love you to submit a <a href="https://github.com/bitovi/academy/issues/new">GitHub issue</a> for it! 💖
+
+## Overview
+
+In this part, we will:
+
+- Explore tools that aid Angular Development
+- Install Angular’s CLI
+- Generate a new app
+- Look at the files generated by the CLI
+- Learn to serve our app
+
+## Problem
+
+We want to create a new Angular application and update it to say **Place My Order App: Coming Soon!** in an `<h1>` element.
+
+<img src="../static/img/angular/2-generate-an-app/after.png"
+  style="border: solid 1px black;" width="320"/>
+
+## What you need to know
+
+To complete this exercise, you are going to want:
+
+- Select a code editor / IDE
+- To install Angular’s CLI
+- Use the CLI to generate a new app
+- Understand the files generated
+- Serve the app
+
+## Selecting a code editor
+
+If you’re looking for a code editor (aka IDE) to improve your Angular development - VS Code is widely used by the community but other editors like Webstorm are fine as well. Plugins can go a long way in aiding the development process.
+
+### Visual Studio Code
+
+<a href="https://code.visualstudio.com/">VS Code</a> is Microsoft’s modern take on an IDE for app development (P.S. TypeScript is a Microsoft Open Source project). VS Code has built in TypeScript support for syntax highlighting, IntelliSense code completion, and linting.
+
+<a href="../static/img/vs-code-screenshot.png"><img src="../static/img/vs-code-screenshot.png" alt="Visual Studio Code screenshot" /></a>
+
+Helpful Plugins:
+
+- <a href="https://marketplace.visualstudio.com/items?itemName=Angular.ng-template">Angular Language Service</a>
+- <a href="https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2">Angular Snippets</a>
+
+### Webstorm
+
+<a href="https://www.jetbrains.com/webstorm/download/">Webstorm</a> is a platform by JetBrains that is loved for its great code refactoring assistance and version control integration, but it does require a paid subscription.
+
+<a href="../static/img/webstorm-screenshot.png"><img src="../static/img/webstorm-screenshot.png" alt="Webstorm screenshot" /></a>
+
+Helpful Plugins:
+
+- <a href="https://next.angular.io/guide/language-service">Angular Language Service</a>
+
+## Installing the CLI
+
+Angular has a command line interface or CLI that does a lot of the initial legwork in setting up a minimal app, as well as letting you easily create and include new components on the fly.
+
+We’ll start by globally installing the Angular CLI using npm.
+
+✏️ Run the following:
+
+```shell
+npm install -g @angular/cli@19
+```
+
+## Generating a new app
+
+Our final goal is to build a restaurant menu and ordering application, which should look something like this:
+
+<img alt="Place My Order App screenshot" src="../static/img/place-my-order.png" width="640">
+
+(reminder: You can see a DoneJS implementation of this application at [www.place-my-order.com](http://www.place-my-order.com))
+
+✏️ To create a new Angular Workspace, run the `ng new` command:
+
+```shell
+ng new place-my-order --prefix pmo
+cd place-my-order
+```
+
+This will create a new Angular Workspace, generate an app module, needed config files, and test suite for your new Angular project. You’ll be asked a series of set-up questions:
+
+1. Which stylesheet format would you like to use? (**CSS**)
+2. Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (**No**)
+
+Note that we used the `--prefix` property above to set our own default prefix. Angular’s default prefix is `app`, but a good naming convention is to use a short prefix related to your company or application name, which helps to easily differentiate from third-party utilities.
+
+```html
+<!-- this looks like it’s one of our own app components -->
+<pmo-header></pmo-header>
+
+<!-- safe to assume this a third-party -->
+<tabset>
+  <tab heading="Basic title" id="tab1">Basic content</tab>
+  <tab heading="Basic Title 1">Basic content 1</tab>
+  <tab heading="Basic Title 2">Basic content 2</tab>
+</tabset>
+```
+
+There are [several more helpful properties](https://angular.dev/cli/new) that customize how a project is set up.
+
+## Looking at Our Generated Workspace
+
+Let’s walk through some of the files that were generated.
+
+```code
+├── node_modules/
+├── public/
+├── src/
+|   ├── app/
+|   |   ├── app.component.css
+|   |   ├── app.component.html
+|   |   ├── app.component.spec.ts
+|   |   ├── app.component.ts
+|   |   ├── app.config.ts
+|   |   ├── app.routes.ts
+|   ├── index.html
+|   ├── main.ts
+|   ├── styles.css
+├── angular.json
+├── package-lock.json
+├── package.json
+├── README.md
+├── tsconfig.app.json
+├── tsconfig.json
+├── tsconfig.spec.json
+```
+
+### angular.json
+
+This file is the config schema for an Angular Workspace. By default Angular configures esbuild for its build process, and uses the `angular.json` file to store the build information.
+
+### tsconfig.json
+
+This file contains our TypeScript compiling options.
+
+### src/main.ts
+
+This is the entry point of our application, it compiles and bootstraps our app.
+
+### src/index.html
+
+This should feel familiar - our main index page. Our entry component is highlighted below.w
+
+@sourceref ../../../exercises/angular/2-building-first-app/problem/src/index.html
+@highlight 11
+
+### src/app/app.component.ts
+
+This is our root component, you saw it called in our index.html file as `<pmo-root></pmo-root>`
+
+## Serving An Application
+
+✏️ Serve the app with:
+
+```shell
+npm run start
+```
+
+The `start` script command value is `ng serve` which starts a development server on port `4200` by default using <a href="https://esbuild.github.io/">esbuild</a> and <a href="https://vitejs.dev/">Vite</a> to compile and serve a development version of the app. Any TypeScript errors will be caught by the compiler here, and once ready we can view our app at <a href="http://localhost:4200">localhost:4200</a>. `ng serve` also has live-reload functionality, meaning the browser will automatically reload as changes are saved and compiled.
+
+## Running Tests
+
+When we use the CLI to create components, services, etc, it will create spec files
+for us.
+
+✏️ Run tests in a **new** command line with:
+
+```shell
+npm run test
+```
+
+## How to verify your solution is correct
+
+The change we needed to make for our tests to pass is on the highlighted line 37.
+
+We also included `schemas` metadata for our module. <a href="https://angular.io/api/core/NO_ERRORS_SCHEMA">NO_ERRORS_SCHEMA</a> will keep the compiler from throwing errors when unknown components are included in the tested components. In unit tests we often only want to test the very small piece of code we’re working on and don’t care about deeply nested components <a href="https://medium.com/@fivedicephoto/why-you-shouldnt-use-no-errors-schema-in-angular-unit-tests-cdd478c30782">unless we’re testing the props in a parent/child component relationship</a>. For our purposes in this training, it’s safe to use here.
+
+✏️ Update **src/app/app.component.spec.ts**:
+
+@sourceref ../../../exercises/angular/2-building-first-app/problem/src/app/app.component.spec.ts
+@highlight 1,15-17,37,only
+
+## Solution
+
+<details>
+<summary>Click to see the solution</summary>
+Let’s change the markup to look like the home page of our place my order app.
+
+✏️ Update **src/app/app.component.html** to:
+
+@diff ../../../exercises/angular/2-building-first-app/problem/src/app/app.component.html ./app.component.html
+
+When you save your changes, you should see the new h1 tag in your browser at <a href="http://localhost:4200">localhost:4200</a>.
+
+</details>