<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@1.5.0-rc.0" data-semver="1.5.0-rc.0" src="https://code.angularjs.org/1.5.0-rc.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="base.controller.js"></script>
<script src="base.service.js"></script>
</head>
<body ng-controller="BaseController as baseCtrl">
<ul>
<li ng-repeat="item in baseCtrl.data.items track by $index">{{item}}</li>
</ul>
<button ng-click="baseCtrl.onClick()">Load Values</button>
</body>
</html>
'use babel';
(function() {
'use strict';
angular.module('app', []);
}());
/* Styles go here */
"use babel";
(function() {
'use strict';
class BaseController {
constructor(BaseService) {
this._baseService = BaseService;
this.data = this._baseService.data;
}
onClick() {
this._baseService.loadData();
}
}
BaseController.$inject = ['BaseService'];
angular.module('app').controller('BaseController', BaseController);
}());
"use babel";
(function() {
'use strict';
class BaseService {
constructor() {
this.data = {
items: []
};
}
loadData() {
this.data.items = ['one', 'two', 'three'];
}
}
angular.module('app').service('BaseService', BaseService);
}());