angular-fullstackにおける"Hello World."

下記の順に作業を行います。

sudo yo
Angular Fullstackを選択し、Y/nで聞かれたオプションを全てYにしてscaffoldを生成する。

sudo yo angular-fullstack:route chat

/client/components/navbar/navbar.component.ts

'use strict';
/* eslint no-sync: 0 */
const angular = require('angular');

export class NavbarComponent {
  menu = [{
    'title': 'Home',
    'link': '/'
  },{
    'title': 'Chat',
    'link': '/chat'
  }];
  $location;
  isLoggedIn: Function;
  isAdmin: Function;
  getCurrentUser: Function;
  isCollapsed = true;

  constructor($location, Auth) {
    'ngInject';
    this.$location = $location;
    this.isLoggedIn = Auth.isLoggedInSync;
    this.isAdmin = Auth.isAdminSync;
    this.getCurrentUser = Auth.getCurrentUserSync;
  }

  isActive(route) {
    return route === this.$location.path();
  }
}

export default angular.module('directives.navbar', [])
  .component('navbar', {
    template: require('./navbar.html'),
    controller: NavbarComponent
  })
  .name;

/client/app/chat/chat.html

<div ng-model="message">{{message}}</div>

/client/app/chat/chat.component.ts

'use strict';
const angular = require('angular');
const ngRoute = require('angular-route');


import routes from './chat.routes';

export class ChatComponent {
  /*@ngInject*/
  constructor($scope) {
    $scope.message = 'Hello World.';
  }
}

export default angular.module('testApp.chat', [ngRoute])
  .config(routes)
  .component('chat', {
    template: require('./chat.html'),
    controller: ChatComponent,
    controllerAs: 'chatCtrl'
  })
  .name;

gulp serve

http://localhost:3000/chat にアクセスする。