feat: ng template updated list with computer scientists (#241)

Author: SeanKelly369

packages/template-hello-world-ng/src/app/app.routes.ts

@@ -1,9 +1,9 @@
 import { Routes } from '@angular/router';
-import { ItemsComponent } from './item/items.component';
-import { ItemDetailComponent } from './item/item-detail.component';
+import { PeopleComponent } from './people/person.component';
+import { PersonDetailComponent } from './people/person-detail.component';
 
 export const routes: Routes = [
   { path: '', redirectTo: '/items', pathMatch: 'full' },
-  { path: 'items', component: ItemsComponent },
-  { path: 'item/:id', component: ItemDetailComponent },
+  { path: 'items', component: PeopleComponent },
+  { path: 'item/:id', component: PersonDetailComponent },
 ];

packages/template-hello-world-ng/src/app/item/item-detail.component.html

@@ -1,7 +1,7 @@
-<ActionBar title="My App"> </ActionBar>
+<ActionBar title="Computer Scientists"> </ActionBar>
 
 <GridLayout>
-  <ListView [items]="itemService.items()">
+  <ListView [items]="personService.items()">
     <ng-template let-item="item">
       <StackLayout [nsRouterLink]="['/item', item.id]">
         <Label [text]="item.name" class="text-lg text-gray-500 p-4"></Label>

packages/template-hello-world-ng/src/app/item/item-detail.component.ts

@@ -0,0 +1,29 @@
+<ActionBar title="Details">
+@if (isAndroid) {
+  <StackLayout orientation="horizontal" horizontalAlignment="left">
+    <Label text="< Back" color="#1976d2" (tap)="goBack()" style="font-size: 18; margin-left: 4"></Label>
+    <Label text="Details" color="#333" style="font-size: 20; font-weight:600; margin-left: 30"></Label>
+  </StackLayout>
+  }
+</ActionBar>
+
+<FlexboxLayout flexDirection="column">
+  <FlexboxLayout class="m-4">
+    <Label class="text-3xl text-gray-400" [text]="person()?.id + '. '"></Label>
+    <Label class="text-3xl" [text]="person()?.name"></Label>
+  </FlexboxLayout>
+
+  <StackLayout class="text-xl m-2 ml-6">
+    <Label class="mb-2" fontWeight="700" text="Nationality:"></Label>
+    <Label textWrap="true" [text]="person()?.nationality"></Label>
+  </StackLayout>
+
+   <StackLayout class="text-xl m-2">
+    <Label class="m-2 ml-4" fontWeight="700" text="Notable Achievements:"></Label>
+    <Label
+      class="text-xl m-2 ml-4"
+      [text]="formatAchievements(person()?.notableAchievements)"
+      textWrap="true">
+    </Label>
+  </StackLayout>
+</FlexboxLayout>

packages/template-hello-world-ng/src/app/item/item.service.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, NO_ERRORS_SCHEMA, OnInit, inject, signal } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { NativeScriptCommonModule, RouterExtensions } from '@nativescript/angular';
+import { Person } from './person';
+import { PersonService } from './person.service';
+
+@Component({
+  selector: 'ns-person-detail',
+  templateUrl: './person-detail.component.html',
+  imports: [NativeScriptCommonModule],
+  schemas: [NO_ERRORS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PersonDetailComponent implements OnInit {
+  personService = inject(PersonService);
+routerExtensions = inject(RouterExtensions);
+  route = inject(ActivatedRoute);
+  person = signal<Person>(null);
+  isAndroid = __ANDROID__;
+
+  ngOnInit(): void {
+    const id = +this.route.snapshot.params.id;
+    this.person.set(this.personService.getPerson(id));
+
+    // log the person to the console
+    console.log(this.person());
+  }
+
+
+  goBack() {
+    this.routerExtensions.back();
+  }
+
+  formatAchievements(achievements: string[] | undefined | null): string {
+    if (!achievements || !Array.isArray(achievements)) return '';
+    return achievements.map( (a, index) =>  (index + 1) + '. ' + a.trim()).join('\n');
+  }
+
+}

packages/template-hello-world-ng/src/app/item/item.ts

@@ -1,24 +1,25 @@
-import { Component, NO_ERRORS_SCHEMA, inject } from '@angular/core'
+import { ChangeDetectionStrategy, Component, NO_ERRORS_SCHEMA, inject } from '@angular/core'
 import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular'
 import { Page } from '@nativescript/core'
-import { ItemService } from './item.service'
+import { PersonService } from './person.service'
 
 @Component({
-  selector: 'ns-items',
-  templateUrl: './items.component.html',
+  selector: 'ns-people',
+  templateUrl: './people.component.html',
   imports: [NativeScriptCommonModule, NativeScriptRouterModule],
   schemas: [NO_ERRORS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ItemsComponent {
-  itemService = inject(ItemService)
-  page = inject(Page)
+export class PeopleComponent {
+  personService = inject(PersonService);
+  page = inject(Page);
 
   constructor() {
     // Setup large titles on iOS
     this.page.on('loaded', (args) => {
       if (__IOS__) {
-        const navigationController: UINavigationController = this.page.frame.ios.controller
-        navigationController.navigationBar.prefersLargeTitles = true
+        const navigationController: UINavigationController = this.page.frame.ios.controller;
+        navigationController.navigationBar.prefersLargeTitles = true;
       }
     })
   }

packages/template-hello-world-ng/src/app/item/items.component.html renamed to packages/template-hello-world-ng/src/app/people/people.component.html

@@ -0,0 +1,27 @@
+import { Injectable, signal } from '@angular/core';
+import { Person } from './person';
+
+@Injectable({providedIn: 'root'})
+export class PersonService {
+  items = signal<Person[]>([
+    { id: 1, name: 'Alan Turing', nationality: 'British', notableAchievements: ['WW2 code breaking', 'Father of theoretical computer science and AI' ] },
+    { id: 2, name: 'Grace Hopper', nationality: 'American', notableAchievements: ['COBOL development', 'Navy commander', 'Implementation of computer systems and components testing'] },
+    { id: 3, name: 'Donal Knuth', nationality: 'American', notableAchievements: [ 'Author of The Art of Computer Programming', 'Created TeX typesetting system' ] },
+    { id: 4, name: 'Ada Lovelace', nationality: 'British', notableAchievements: [ 'First computer programmer', 'Worked on Analytical Engine' ]},
+    { id: 5, name: 'John von Neumann', nationality: 'Hungarian/American', notableAchievements: [ 'Von Neumann architecture', 'Game theory', 'Contributed to EDVAC' ] },
+    { id: 6, name: 'Tim Berners-Lee', nationality: 'British', notableAchievements: [ 'Inventor of the World Wide Web' ] },
+    { id: 7, name: 'Edsger Dijkstra', nationality: 'Dutch', notableAchievements: [ 'Shortest path algorithm', 'Structured programming advocate' ] },
+    { id: 8, name: 'Linus Torvalds', nationality: 'Finnish-American', notableAchievements: ['Creator of Linux kernel', 'Creator of Git'] },
+    { id: 9, name: 'John McCarthy', nationality: 'American', notableAchievements: ['Coined term "Artificial Intelligence"', 'Created LISP programming language'] },
+    { id: 10, name: 'Dennis Ritchie', nationality: 'American', notableAchievements: ['Creator of C programming language', 'Co-creator of Unix'] },
+    { id: 11, name: 'Bjarne Stroustrup', nationality: 'Danish', notableAchievements: [ 'Creator of C++ programming language' ] },
+    { id: 12, name: 'Steve Wozniak', nationality: 'American', notableAchievements: ['Co-founder of Apple', 'Designer of Apple I & II', 'Pioneer of personal computing'] },
+    { id: 13, name: 'Tommy Flowers', nationality: 'British', notableAchievements: ['Designer of Colossus', 'Pioneer in electronic computing'] },
+    { id: 14, name: 'John Backus', nationality: 'American', notableAchievements: ['Created FORTRAN', 'Developed Backus-Naur form(BNF) notation'] },
+    { id: 15, name: 'Niklaus Wirth', nationality: 'Swiss', notableAchievements: ['Creator of Pascal, Modula, Oberon languages', 'Software engineering pioneer'] },
+  ]);
+
+  getPerson(id: number): Person {
+    return this.items().find((person) => person.id === id);
+  }
+}