diff --git a/packages/template-hello-world-ng/src/app/app.routes.ts b/packages/template-hello-world-ng/src/app/app.routes.ts index c998b860..607e5ad8 100644 --- a/packages/template-hello-world-ng/src/app/app.routes.ts +++ b/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 }, ]; diff --git a/packages/template-hello-world-ng/src/app/item/item-detail.component.html b/packages/template-hello-world-ng/src/app/item/item-detail.component.html deleted file mode 100644 index 607827c2..00000000 --- a/packages/template-hello-world-ng/src/app/item/item-detail.component.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/packages/template-hello-world-ng/src/app/item/item-detail.component.ts b/packages/template-hello-world-ng/src/app/item/item-detail.component.ts deleted file mode 100644 index 60f728a7..00000000 --- a/packages/template-hello-world-ng/src/app/item/item-detail.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Component, NO_ERRORS_SCHEMA, OnInit, inject, signal } from '@angular/core' -import { ActivatedRoute } from '@angular/router' -import { NativeScriptCommonModule } from '@nativescript/angular' -import { Item } from './item' -import { ItemService } from './item.service' - -@Component({ - selector: 'ns-item-detail', - templateUrl: './item-detail.component.html', - imports: [NativeScriptCommonModule], - schemas: [NO_ERRORS_SCHEMA], -}) -export class ItemDetailComponent implements OnInit { - itemService = inject(ItemService) - route = inject(ActivatedRoute) - item = signal(null) - - ngOnInit(): void { - const id = +this.route.snapshot.params.id - this.item.set(this.itemService.getItem(id)) - - // log the item to the console - console.log(this.item()) - } -} diff --git a/packages/template-hello-world-ng/src/app/item/item.service.ts b/packages/template-hello-world-ng/src/app/item/item.service.ts deleted file mode 100644 index b8cf2d9a..00000000 --- a/packages/template-hello-world-ng/src/app/item/item.service.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { Injectable, signal } from '@angular/core' -import { Item } from './item' - -@Injectable({ - providedIn: 'root', -}) -export class ItemService { - items = signal([ - { id: 1, name: 'NativeScript', role: 'Technology' }, - { id: 2, name: 'Ter Stegen', role: 'Goalkeeper' }, - { id: 3, name: 'Piqué', role: 'Defender' }, - { id: 4, name: 'I. Rakitic', role: 'Midfielder' }, - { id: 5, name: 'Sergio', role: 'Midfielder' }, - { id: 6, name: 'Denis Suárez', role: 'Midfielder' }, - { id: 7, name: 'Arda', role: 'Midfielder' }, - { id: 8, name: 'A. Iniesta', role: 'Midfielder' }, - { id: 9, name: 'Suárez', role: 'Forward' }, - { id: 10, name: 'Messi', role: 'Forward' }, - { id: 11, name: 'Neymar', role: 'Forward' }, - { id: 12, name: 'Rafinha', role: 'Midfielder' }, - { id: 13, name: 'Cillessen', role: 'Goalkeeper' }, - { id: 14, name: 'Mascherano', role: 'Defender' }, - { id: 17, name: 'Paco Alcácer', role: 'Forward' }, - { id: 18, name: 'Jordi Alba', role: 'Defender' }, - { id: 19, name: 'Digne', role: 'Defender' }, - { id: 20, name: 'Sergi Roberto', role: 'Midfielder' }, - { id: 21, name: 'André Gomes', role: 'Midfielder' }, - { id: 22, name: 'Aleix Vidal', role: 'Midfielder' }, - { id: 23, name: 'Umtiti', role: 'Defender' }, - { id: 24, name: 'Mathieu', role: 'Defender' }, - { id: 25, name: 'Masip', role: 'Goalkeeper' }, - ]) - - getItem(id: number): Item { - return this.items().find((item) => item.id === id) - } -} diff --git a/packages/template-hello-world-ng/src/app/item/item.ts b/packages/template-hello-world-ng/src/app/item/item.ts deleted file mode 100644 index 0e31d703..00000000 --- a/packages/template-hello-world-ng/src/app/item/item.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface Item { - id: number - name: string - role: string -} diff --git a/packages/template-hello-world-ng/src/app/item/items.component.html b/packages/template-hello-world-ng/src/app/people/people.component.html similarity index 71% rename from packages/template-hello-world-ng/src/app/item/items.component.html rename to packages/template-hello-world-ng/src/app/people/people.component.html index 02d3b502..ab63940c 100644 --- a/packages/template-hello-world-ng/src/app/item/items.component.html +++ b/packages/template-hello-world-ng/src/app/people/people.component.html @@ -1,7 +1,7 @@ - + - + diff --git a/packages/template-hello-world-ng/src/app/people/person-detail.component.html b/packages/template-hello-world-ng/src/app/people/person-detail.component.html new file mode 100644 index 00000000..d8ffbadd --- /dev/null +++ b/packages/template-hello-world-ng/src/app/people/person-detail.component.html @@ -0,0 +1,29 @@ + +@if (isAndroid) { + + + + + } + + + + + + + + + + + + + + + + + + diff --git a/packages/template-hello-world-ng/src/app/people/person-detail.component.ts b/packages/template-hello-world-ng/src/app/people/person-detail.component.ts new file mode 100644 index 00000000..99df2f4f --- /dev/null +++ b/packages/template-hello-world-ng/src/app/people/person-detail.component.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(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'); + } + +} diff --git a/packages/template-hello-world-ng/src/app/item/items.component.ts b/packages/template-hello-world-ng/src/app/people/person.component.ts similarity index 56% rename from packages/template-hello-world-ng/src/app/item/items.component.ts rename to packages/template-hello-world-ng/src/app/people/person.component.ts index 55723bec..df79f096 100644 --- a/packages/template-hello-world-ng/src/app/item/items.component.ts +++ b/packages/template-hello-world-ng/src/app/people/person.component.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; } }) } diff --git a/packages/template-hello-world-ng/src/app/people/person.service.ts b/packages/template-hello-world-ng/src/app/people/person.service.ts new file mode 100644 index 00000000..f1af52bc --- /dev/null +++ b/packages/template-hello-world-ng/src/app/people/person.service.ts @@ -0,0 +1,27 @@ +import { Injectable, signal } from '@angular/core'; +import { Person } from './person'; + +@Injectable({providedIn: 'root'}) +export class PersonService { + items = signal([ + { 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); + } +} diff --git a/packages/template-hello-world-ng/src/app/people/person.ts b/packages/template-hello-world-ng/src/app/people/person.ts new file mode 100644 index 00000000..f2976162 --- /dev/null +++ b/packages/template-hello-world-ng/src/app/people/person.ts @@ -0,0 +1,6 @@ +export interface Person { + id: number; + name: string; + nationality: string; + notableAchievements: string[]; +}