Added ES2015+ examples

Author: destegabry

src/app/api/module.js

@@ -0,0 +1,9 @@
+import Tools from './tools.service';
+
+const ApiModule = 'app.api';
+
+export default ApiModule;
+
+angular
+  .module(ApiModule, [])
+  .service('Tools', Tools);

src/app/api/tools.service.js

@@ -0,0 +1,37 @@
+const tools = [{
+  name: 'AngularJS',
+  href: 'https://angularjs.org',
+  image: 'https://raw.githubusercontent.com/angular/angular.js/master/images/logo/AngularJS.exports/AngularJS-medium.png'
+}, {
+  name: 'webpack',
+  href: 'https://webpack.js.org/',
+  image: 'https://raw.githubusercontent.com/webpack/media/master/logo/icon.png'
+}, {
+  name: 'ES2015+',
+  href: 'https://devhints.io/es6',
+  image: 'https://cdn-images-1.medium.com/max/785/1*j8TtXep5psnKxDEQeffPfg.png'
+}, {
+  name: 'Babel',
+  href: 'https://babeljs.io/',
+  image: 'https://raw.githubusercontent.com/babel/logo/master/babel.png'
+}, {
+  name: 'ESLint',
+  href: 'https://eslint.org/',
+  image: 'https://eslint.org/img/logo.svg'
+}, {
+  name: 'Angular UI Router',
+  href: 'https://ui-router.github.io/',
+  image: 'https://ui-router.github.io/images/logos/ui-router.svg'
+}, {
+  name: 'Sass',
+  href: 'http://sass-lang.com/',
+  image: 'http://sass-lang.com/assets/img/logos/logo-b6e1ef6e.svg'
+}];
+
+class ToolsService {
+  get() {
+    return Promise.resolve(tools);
+  }
+}
+
+export default ToolsService;

src/app/common/_common.scss

@@ -0,0 +1 @@
+@import './footer';

src/app/footer/_footer.scss renamed to src/app/common/_footer.scss

@@ -1,3 +1,3 @@
-export const footer = {
+export default {
   template: require('./footer.html')
 };

src/app/footer/footer.js renamed to src/app/common/footer.component.js

@@ -0,0 +1,9 @@
+import FooterComponent from './footer.component';
+
+const CommonModule = 'app.common';
+
+export default CommonModule;
+
+angular
+  .module(CommonModule, [])
+  .component('footer', FooterComponent);

src/app/footer/footer.html renamed to src/app/common/footer.html

@@ -14,7 +14,7 @@ hello {
       size: 18px;
     }
 
-    a {
+    .tool {
       align-items: center;
       background-position: center center;
       background-repeat: no-repeat;

src/app/common/module.js

@@ -0,0 +1,23 @@
+class HelloController {
+  /** @ngInject */
+  constructor($window, $log) {
+    this.window = $window;
+    this.log = $log;
+  }
+
+  $onInit() {
+    this.log.info('Available tools:', this.tools);
+  }
+
+  open(tool) {
+    this.window.open(tool.href, '_blank');
+  }
+}
+
+export default {
+  bindings: {
+    tools: '<'
+  },
+  template: require('./hello.html'),
+  controller: HelloController
+};

src/app/hello/_hello.scss

@@ -3,10 +3,9 @@ <h1>AngularJS + webpack seed project</h1>
 <p>Congratulations, you have correctly installed and run this seed project based on:</p>
 
 <div class="tools">
-  <a ng-repeat="tool in $ctrl.tools"
-     ng-href="{{::tool.href}}"
-     title="{{::tool.name}}"
-     style="background-image: url({{::tool.image}})"
-     target="_blank">
-  </a>
+  <div class="tool"
+       style="background-image: url({{::tool.image}})"
+       ng-repeat="tool in $ctrl.tools"
+       ng-click="$ctrl.open(tool)">
+  </div>
 </div>