use a service

src/users/users.ts

@@ -1,4 +1,4 @@
-import { inlineView, PLATFORM } from 'aurelia-framework';
+import { inlineView, PLATFORM, autoinject } from 'aurelia-framework';
 import view from './users.html';
 
 interface IUser {
@@ -7,7 +7,16 @@ interface IUser {
   html_url: string;
 }
 
+class Service {
+  async getUsers() {
+    const res = await fetch('https://api.github.com/search/users?q=aurelia');
+    const json = await res.json();
+    return json.items as IUser[];
+  }
+}
+
 @inlineView(view)
+@autoinject
 export class Users {
   heading: string = 'Aurelia Github Users';
   users: Array<IUser> = [];
@@ -16,13 +25,9 @@ export class Users {
    */
   image: HTMLImageElement;
 
-  constructor() {}
+  constructor(private readonly service: Service) {}
 
   async activate(): Promise<void> {
-    const response = await fetch(
-      'https://api.github.com/search/users?q=aurelia',
-    );
-    const json = await response.json();
-    this.users = json.items;
+    this.users = await this.service.getUsers();
   }
 }