Angular 1.X component based application with webpack and ES6

4 min readAug 13, 2016

Im going to present to you my new stack: AngularJS, ES6 and webpack :)

Getting started:

Create a clean directory for the project:

mkdir pokemon-poc
cd pokemon-poc

Create a package.json:

npm init

Install dependencies:

npm install --save angular angular-ui-router webpack

Now, we need create a config file for webpack called: webpack.config.js. In this file we are going to tell webpack to transpile to ES5 and create sourcemaps:

//webpack.config.jsmodule.exports = {
    entry: './app/app.module.js',
    output: {
        path: './bin',
        filename: 'app.bundle.js',
    },
    module: {
        loaders: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        },
        { test: /\.html$/, loader: "html" },
        { test: /\.css$/, loader: "style!css" }
      ]
    },
    devtool: "#inline-source-map"
}

Now, we need to install Babel, the pressets and Babel loader:

npm install --save-dev babel-core babel-preset-es2015 babel-loader

Configure Babel to use these pressets:

touch .babelrc

Open .babelrc file and paste:

{ "presets": [ "es2015" ] }

We have ready webpack :) It´s time to code.

Create a empty folder called app with the main angular module:

mkdir app
cd app/
touch app.module.js

We need to define the main module:

import angular from 'angular'angular.module('pokemonPoc', [])

Ok, now we can run webpack and view the output in bin/:

webpack
Hash: e615d9daa4eda29ec165Version: webpack 1.13.1Time: 3883msAsset    Size  Chunks             Chunk Namesapp.bundle.js  3.1 MB       0  [emitted]  main+ 3 hidden modules

Create a index.html and add ng-app directive:

touch index.html
<!DOCTYPE html>
<html lang="en" ng-app="pokemonPoc">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bin/app.bundle.js"></script>
</head>
<body>
  <div ui-view></div>
</body>
</html>

We need a server and live-reload so we need to install lite-server:

npm install ---save-dev lite-server

Edit package.json file and add this script:

"scripts": {
    "start": "lite-server"
}

We have a server with live-reload, great! :)

We need to create the “otherwise route” and add ui-router to app:

cd app/
touch app.routes.js//app.routes.jsroutes.$inject = ['$urlRouterProvider'];export default function routes($urlRouterProvider) {
  $urlRouterProvider.otherwise('/');
}

Then import this module in app.module.js, add uirouter and add to config:

import angular from 'angular'
import uirouter from 'angular-ui-router'import routes from './app.routes'angular.module('pokemonPoc', [uirouter])
  .config(routes)

Now if we want to see the changes we need to run webpack again but we can run webpack in watch mode. I use “concurrently” for run lite-server and webpack concurrently.

npm install --save-dev concurrently

Edit package.json scripts:

“scripts”: {
 “start”: “concurrently ‘lite-server’ ‘webpack — watch’”
}

Then we can run npm start and this run lite-server and webpack. If we change anything webpack generate the bundle and lite-server reload the page.

Ok, then we will create the first component:

cd app/
mkdir pokemons
cd pokemons/
touch index.js//app/pokemons/index.jsimport angular from 'angular'
import uirouter from 'angular-ui-router'import routes from './pokemons.routes.js'export default angular.module('pokemonPoc.pokemons', [uirouter])
  .config(routes)

Then define the routes:

touch pokemons.routes.js//pokemons.routes.jsroutes.$inject = ['$stateProvider'];
export default function routes($stateProvider) {
  $stateProvider
  .state('pokemons', {
    url: '/',
    template: require('./pokemons.html')
  });
}

Create pokemons.html:

touch pokemons.html//pokemons.html<h3>Pokemon list</h3>

We need install html-loader and restart webpack

npm install --save-dev html-loader
npm start

Ok, now we have a module with one route. We need import this module in main module:

//app.module.jsimport angular from 'angular'
import uirouter from 'angular-ui-router'import routes from './app.routes'
import pokemons from './pokemons'angular.module('pokemonPoc', [uirouter, pokemons])
  .config(routes)

Ok, now we should view in the browser the content of the new state.

We will create our first component:

cd app/pokemons/
mkdir pokemon-list
cd pokemon-list/
touch pokemon-list.component.js//pokemon-list.component.jsfunction pokemonListCtrl() {
}module.exports = {
  template: require('./pokemon-list.html'),
  controller: pokemonListCtrl,
  bindings: {
    pokemons: '='
  }
}

And create the template:

//pokemon-list.html<ul>
  <li ng-repeat="pokemon in $ctrl.pokemons">{{pokemon.Name}}</li>
</ul>

Then import the component in pokemos.module:

import angular from 'angular'
import uirouter from 'angular-ui-router'import routes from './pokemons.routes.js'
import pokemonList from './pokemon-list/pokemon-list.component'export default angular.module('pokemonPoc.pokemons', [uirouter])
  .config(routes)
  .component('pokemonList', pokemonList)
  .name

We need a service for get a list of pokemons so create a service:

cd app/pokemons/
touch pokemons.service.js//pokemons.services.jsexport default class PokemonsService {
  constructor($http) {
    this.$http = $http
  }getPokemons() {
    return this.$http.get('https://raw.githubusercontent.com/PokemonGOAPI/PokemonDataGraber/master/output.json')
  }}

And import in pokemons.module.js:

import angular from 'angular'
import uirouter from 'angular-ui-router'import routes from './pokemons.routes.js'
import pokemonList from './pokemon-list/pokemon-list.component'
import PokemonsService from './pokemons.service'export default angular.module('pokemonPoc.pokemons', [uirouter])
  .config(routes)
  .component('pokemonList', pokemonList)
  .service('PokemonsService', PokemonsService)
  .name

Then we can use this service in pokemons.routes.js:

routes.$inject = ['$stateProvider'];
export default function routes($stateProvider) {
  $stateProvider
  .state('pokemons', {
    url: '/',
    template: require('./pokemons.html'),
    resolve: {
      pokemons: ['PokemonsService', (PokemonsService) => {
        return PokemonsService.getPokemons()
      }]
    }
  });
}

Edit pokemons.html and add the pokemon-list component and pass the pokemon list:

<h3>Pokemon list</h3>
<pokemon-list pokemons="$resolve.pokemons.data"></pokemon-list>

And this is all :)

You can fork the project from Github and try to add .css files from js and other things.

https://github.com/zamarrowski/pokemon-poc

Angular 1.X component based application with webpack and ES6

Getting started:

Written by Sergio Zamarro