Keeping it simple with UI-Grids and ES6

Making UI-Grid work with ES6 on an AngularJS app

With the lack of support for UI-Grid on ES6 on the internet, this tutorial is a jump start to the phase you may be stuck in right now. To make this learning curve efficient I am linking to the app I created, where I use UI-Grids on with ES6 and AngularJS. This tutorial assumes you have prior knowledge of UI-Grid and ES6 individually so in this tutorial we combine both of them to create something awesome!

Things of interest here…

In package.json we have a dependency for angular-ui-grid

In webpack.config.js we define our file-loader for ui-grid associated files

{ test: [/ui-grid\.svg/, /ui-grid\.eot/, /ui-grid\.ttf/, /ui-grid\.woff/, /ui-grid\.woff2/], use: 'file-loader?name=fonts/[name].[ext]' }

In index.js we define our imports and injections as follows

import 'angular-ui-grid/ui-grid.css';
import uiGrid from 'angular-ui-grid';
export const bpuiModule = angular.module('bpui', [angularMaterial, angularAnimate, angularUIRouter, angularMessages, angularResource,    uiGrid, 'ui.grid.treeView', 'ui.grid.pagination', 'ui.grid.resizeColumns', 'ui.grid.selection', 'ui.grid.expandable', 'ui.grid.exporter', 'ui.grid.autoResize',    menu, home, secondScreen, BpService, DialogComponent]);bpuiModule.config(BpuiConfig);bpuiModule.controller('BpuiController', BpuiController);

With this basic setup in place its now just about using ui-grids on our templates. To keep up with times I have the ui-grid running as a component under userTable.component.js which uses userTable.html as its template and the component itself is registered at home.module.js. Finally we invoke our component on the home.html template.

And that’s it! You now have a working version of UI-Grid with ES6 syntax. Feel free to ask questions in the comments below if something didn’t make sense.

happy.coding;