adding code for the second example project

MarkTechson · MarkTechson · commit f618bdff06ba · 2023-11-27T21:42:03.000-06:00
diff --git a/angular.json b/angular.json
@@ -81,6 +81,94 @@
           }
         }
       }
+    },
+    "00-basic-app": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "projects/00-basic-app",
+      "sourceRoot": "projects/00-basic-app/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/00-basic-app",
+            "index": "projects/00-basic-app/src/index.html",
+            "browser": "projects/00-basic-app/src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "projects/00-basic-app/tsconfig.app.json",
+            "assets": [
+              "projects/00-basic-app/src/favicon.ico",
+              "projects/00-basic-app/src/assets"
+            ],
+            "styles": [
+              "projects/00-basic-app/src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "00-basic-app:build:production"
+            },
+            "development": {
+              "buildTarget": "00-basic-app:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "00-basic-app:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "projects/00-basic-app/tsconfig.spec.json",
+            "assets": [
+              "projects/00-basic-app/src/favicon.ico",
+              "projects/00-basic-app/src/assets"
+            ],
+            "styles": [
+              "projects/00-basic-app/src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
     }
   },
   "cli": {
diff --git a/projects/00-basic-app/README b/projects/00-basic-app/README
@@ -0,0 +1,28 @@
+# 00-basic-app
+
+In this example your task is to update this application code to enable it to run.
+
+Did you know you can see these instructions formatted by pressing
+
+- Mac - CMD + SHIFT + V?
+- Win/Lin - CTRL + SHIFT + V
+
+## Instructions.
+
+1. In `src/main.ts`, add the following code to the end of the file.
+
+```ts
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err)
+);
+```
+
+2. Save your changes.
+
+3. From the command line, root directory `angular-fundamentals-lessons`, run the following command:
+
+```bash
+ng serve 00-basic-app
+```
+
+The application will properly load and be visible in the browser.
diff --git a/projects/00-basic-app/src/app/app.component.css b/projects/00-basic-app/src/app/app.component.css
diff --git a/projects/00-basic-app/src/app/app.component.html b/projects/00-basic-app/src/app/app.component.html
diff --git a/projects/00-basic-app/src/app/app.component.spec.ts b/projects/00-basic-app/src/app/app.component.spec.ts
@@ -14,16 +14,16 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have the '01-hello-angular' title`, () => {
+  it(`should have the '00-basic-app' title`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('01-hello-angular');
+    expect(app.title).toEqual('00-basic-app');
   });
 
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, 01-hello-angular');
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, 00-basic-app');
   });
 });
diff --git a/projects/00-basic-app/src/app/app.component.ts b/projects/00-basic-app/src/app/app.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule, RouterOutlet],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css'
+})
+export class AppComponent {
+  title = '00-basic-app';
+}
diff --git a/projects/00-basic-app/src/app/app.config.ts b/projects/00-basic-app/src/app/app.config.ts
@@ -0,0 +1,8 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes)]
+};
diff --git a/projects/00-basic-app/src/app/app.routes.ts b/projects/00-basic-app/src/app/app.routes.ts
@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];
diff --git a/projects/00-basic-app/src/assets/.gitkeep b/projects/00-basic-app/src/assets/.gitkeep
diff --git a/projects/00-basic-app/src/favicon.ico b/projects/00-basic-app/src/favicon.ico
diff --git a/projects/00-basic-app/src/index.html b/projects/00-basic-app/src/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>00BasicApp</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
diff --git a/projects/00-basic-app/src/main.ts b/projects/00-basic-app/src/main.ts
@@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig);
diff --git a/projects/00-basic-app/src/styles.css b/projects/00-basic-app/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/projects/00-basic-app/tsconfig.app.json b/projects/00-basic-app/tsconfig.app.json
@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/projects/00-basic-app/tsconfig.spec.json b/projects/00-basic-app/tsconfig.spec.json
@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/projects/01-hello-angular/README b/projects/01-hello-angular/README
@@ -0,0 +1,21 @@
+# 01-hello-angular
+
+Time to get some experience updating component templates and component styles.
+
+## Instructions
+
+1. In `01-hello-angular/src/app.component.ts`, update the code as follows:
+
+   1. Create an ordered list with your 3 of your favorite books, movies, or songs.
+
+   2. In the same file, update the styles so that the list uses Roman numerals. Here's the css
+
+   ```css
+   list-style-type: upper-roman;
+   ```
+
+2. Save your changes.
+
+3. Make sure your app is running (`ng serve 01-hello-angular`) and confirm the output in the browser.
+
+Hints: use back tick characters for multi-line strings.

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { Routes } from '@angular/router';`
	`2`	`+`
	`3`	`+export const routes: Routes = [];`