refactor(client:admin): Angular 2

Author: Awk34

templates/app/client/app/admin(auth)/admin.component.js

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { UserService } from '../../components/auth/user.service';
+
+@Component({
+  selector: 'admin',
+  template: require('./admin.<%=templateExt%>'),
+  styles: [require('./admin.<%=styleExt%>')],
+})
+export class AdminComponent {
+  <%_ if(filters.ts || filters.flow) { -%>
+  users: Object[];
+
+  <%_ } _%>
+  static parameters = [UserService];
+  constructor(userService: UserService) {
+    this.userService = userService;
+    // Use the user service to fetch all users
+    this.userService.query().subscribe(users => {
+      this.users = users;
+    });
+  }
+
+  delete(user) {
+    this.userService.remove(user).subscribe(deletedUser => {
+      this.users.splice(this.users.indexOf(deletedUser), 1);
+    });
+  }
+}

templates/app/client/app/admin(auth)/admin.controller.js

@@ -1,12 +1,12 @@
 <div class="container">
   <p>The delete user and user index api routes are restricted to users with the 'admin' role.</p>
   <ul class="list-group user-list">
-    <li class="list-group-item" ng-repeat="user in admin.users">
-	    <div class="user-info">
-	        <strong>{{user.name}}</strong><br>
-	        <span class="text-muted">{{user.email}}</span>
-	    </div>
-        <a ng-click="admin.delete(user)" class="trash"><span class="fa fa-trash fa-2x"></span></a>
+    <li class="list-group-item" *ngFor="let user of users">
+      <div class="user-info">
+          <strong>{{user.name}}</strong><br>
+          <span class="text-muted">{{user.email}}</span>
+      </div>
+        <a (click)="delete(user)" class="trash"><span class="fa fa-trash fa-2x"></span></a>
     </li>
   </ul>
 </div>

templates/app/client/app/admin(auth)/admin.html

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+<%_ if(filters.uirouter) { %>
+import { UIRouterModule } from 'ui-router-ng2';<% } %>
+<%_ if(filters.ngroute) { %>
+import { RouterModule, Routes } from '@angular/router';<% } %>
+
+import { AdminComponent } from './admin.component';
+
+<%_ if(filters.ngroute) { -%>
+import { ROUTES } from './admin.routes';<% } %>
+<%_ if(filters.uirouter) { -%>
+import { STATES } from './admin.routes';<% } %>
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        <%_ if(filters.ngroute) { _%>
+        RouterModule.forChild(ROUTES),<% } %>
+        <%_ if(filters.uirouter) { _%>
+        UIRouterModule.forChild({
+            states: STATES,
+        }),<% } %>
+    ],
+    declarations: [
+        AdminComponent,
+    ],
+    exports: [
+        AdminComponent,
+    ],
+})
+export class AdminModule {}

templates/app/client/app/admin(auth)/admin.module.js

@@ -1,25 +1,9 @@
-'use strict';
+import { AdminComponent } from './admin.component';
 
-<%_ if (filters.ngroute) { _%>
-export default function routes($routeProvider) {
-  'ngInject';
-  $routeProvider
-    .when('/admin', {
-      template: require('./admin.<%= templateExt %>'),
-      controller: 'AdminController',
-      controllerAs: 'admin',
-      authenticate: 'admin'
-    });
-};<% } %>
-<%_ if (filters.uirouter) { _%>
-export default function routes($stateProvider) {
-  'ngInject';
-  $stateProvider
-    .state('admin', {
-      url: '/admin',
-      template: require('./admin.<%= templateExt %>'),
-      controller: 'AdminController',
-      controllerAs: 'admin',
-      authenticate: 'admin'
-    });
-};<% } %>
+<%_ if(filters.uirouter) { -%>
+export const STATES = [{
+  name: 'admin',
+  url: '/admin',
+  component: AdminComponent,
+}];<% } %>
+<%_ if(filters.ngroute) { -%><% } %>

templates/app/client/app/admin(auth)/admin.routes.js

@@ -60,7 +60,7 @@ import { AppComponent } from './app.component';
 import { MainModule } from './main/main.module';
 import { DirectivesModule } from '../components/directives.module';
 import { AccountModule } from './account/account.module';
-// import { AdminModule } from './admin/admin.module';
+import { AdminModule } from './admin/admin.module';
 
 import constants from './app.constants';
 
@@ -92,7 +92,7 @@ if(constants.env === 'development') {
         MainModule,
         DirectivesModule,
         AccountModule,
-        // AdminModule,
+        AdminModule,
     ],
     declarations: [
         AppComponent,