下記の順に作業を行います。
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 にアクセスする。