This commit is contained in:
Christian Lynggaard Jørgensen 2019-04-06 01:08:30 +02:00
parent ed9f2d021d
commit 24ea332aff
13 changed files with 229 additions and 0 deletions

12
client/Nightr/src/app.css Normal file
View File

@ -0,0 +1,12 @@
/*
In NativeScript, the app.css file is where you place CSS rules that
you would like to apply to your entire application. Check out
http://docs.nativescript.org/ui/styling for a full list of the CSS
selectors and properties you can use to style UI components.
/*
In many cases you may want to use the NativeScript core theme instead
of writing your own CSS rules. For a full list of class names in the theme
refer to http://docs.nativescript.org/ui/theme.
*/
@import '~nativescript-theme-core/css/core.light.css';

View File

@ -0,0 +1,18 @@
import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes } from "@angular/router";
import { ItemsComponent } from "./item/items.component";
import { ItemDetailComponent } from "./item/item-detail.component";
const routes: Routes = [
{ path: "", redirectTo: "/items", pathMatch: "full" },
{ path: "items", component: ItemsComponent },
{ path: "item/:id", component: ItemDetailComponent }
];
@NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

View File

@ -0,0 +1,2 @@
<!-- https://docs.nativescript.org/angular/core-concepts/angular-navigation.html#page-router-outlet -->
<page-router-outlet></page-router-outlet>

View File

@ -0,0 +1,8 @@
import { Component } from "@angular/core";
@Component({
selector: "ns-app",
moduleId: module.id,
templateUrl: "./app.component.html"
})
export class AppComponent { }

View File

@ -0,0 +1,36 @@
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { ItemsComponent } from "./item/items.component";
import { ItemDetailComponent } from "./item/item-detail.component";
// Uncomment and add to NgModule imports if you need to use two-way binding
// import { NativeScriptFormsModule } from "nativescript-angular/forms";
// Uncomment and add to NgModule imports if you need to use the HttpClient wrapper
// import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
@NgModule({
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule,
AppRoutingModule
],
declarations: [
AppComponent,
ItemsComponent,
ItemDetailComponent
],
providers: [],
schemas: [
NO_ERRORS_SCHEMA
]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class AppModule { }

View File

@ -0,0 +1,8 @@
<ActionBar title="Details" class="action-bar"></ActionBar>
<FlexboxLayout flexDirection="column" class="page">
<FlexboxLayout class="m-15">
<Label class="h2" [text]="item.id + '. '"></Label>
<Label class="h2" [text]="item.name"></Label>
</FlexboxLayout>
<Label class="h4" [text]="item.role"></Label>
</FlexboxLayout>

View File

@ -0,0 +1,24 @@
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { Item } from "./item";
import { ItemService } from "./item.service";
@Component({
selector: "ns-details",
moduleId: module.id,
templateUrl: "./item-detail.component.html"
})
export class ItemDetailComponent implements OnInit {
item: Item;
constructor(
private itemService: ItemService,
private route: ActivatedRoute
) { }
ngOnInit(): void {
const id = +this.route.snapshot.params.id;
this.item = this.itemService.getItem(id);
}
}

View File

@ -0,0 +1,41 @@
import { Injectable } from "@angular/core";
import { Item } from "./item";
@Injectable({
providedIn: "root"
})
export class ItemService {
private items = new Array<Item>(
{ id: 1, 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" }
);
getItems(): Array<Item> {
return this.items;
}
getItem(id: number): Item {
return this.items.filter((item) => item.id === id)[0];
}
}

View File

@ -0,0 +1,5 @@
export interface Item {
id: number;
name: string;
role: string;
}

View File

@ -0,0 +1,33 @@
<!--
The template defines the view of the component - what is actually rendered.
In NativeScript applications the template is defined with XML using NativeScript UI elements.
It is different from HTML. So instead of <input>, <span>, <div> etc. - we have <TextField>, <Label> and layouts.
The important thing is that although the elements are different - all of the Angulars template syntax works exactly the same.
So you can still use template expressions, bindings, templates as well as all the built-in directives.
-->
<!--
The ActionBar is the NativeScript common abstraction over the Android ActionBar and iOS NavigationBar.
http://docs.nativescript.org/ui/action-bar
-->
<ActionBar title="My App" class="action-bar">
</ActionBar>
<!--
The GridLayout arranges its child elements in a table structure of rows and columns.
A cell can contain multiple child elements, they can span over multiple rows and columns,
and even overlap each other. The GridLayout has one column and one row by default.
You can learn more about NativeScript layouts at https://docs.nativescript.org/ui/layout-containers.
These components make use of several CSS class names that are part of the NativeScript
core theme, such as p-20, btn, h2, and list-group. You can view a full list of the
class names available for styling your app at https://docs.nativescript.org/ui/theme.
-->
<GridLayout class="page">
<ListView [items]="items" class="list-group">
<ng-template let-item="item">
<Label [nsRouterLink]="['/item', item.id]" [text]="item.name"
class="list-group-item"></Label>
</ng-template>
</ListView>
</GridLayout>

View File

@ -0,0 +1,23 @@
import { Component, OnInit } from "@angular/core";
import { Item } from "./item";
import { ItemService } from "./item.service";
@Component({
selector: "ns-items",
moduleId: module.id,
templateUrl: "./items.component.html"
})
export class ItemsComponent implements OnInit {
items: Array<Item>;
// This pattern makes use of Angulars dependency injection implementation to
// inject an instance of the ItemService service into this class.
// Angular knows about this service because it is included in your apps main NgModule,
// defined in app.module.ts.
constructor(private itemService: ItemService) { }
ngOnInit(): void {
this.items = this.itemService.getItems();
}
}

13
client/Nightr/src/main.ts Normal file
View File

@ -0,0 +1,13 @@
// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app/app.module";
// A traditional NativeScript application starts by initializing global objects,
// setting up global CSS rules, creating, and navigating to the main page.
// Angular applications need to take care of their own initialization:
// modules, components, directives, routes, DI providers.
// A NativeScript Angular app needs to make both paradigms work together,
// so we provide a wrapper platform object, platformNativeScriptDynamic,
// that sets up a NativeScript application and can bootstrap the Angular framework.
platformNativeScriptDynamic().bootstrapModule(AppModule);

View File

@ -0,0 +1,6 @@
{
"main": "main.js",
"android": {
"v8Flags": "--expose_gc"
}
}