Skip to content
Boilerplate angular 1.x with ES6 and Webpack 2
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
e2e-tests
.babelrc
.editorconfig
.eslintrc
.gitignore
Dockerfile-dev
Dockerfile-prod
README.md
docker-compose.dev.yml
docker-compose.prod.yml
index.html
package-lock.json
package.json
postcss.config.js
webpack.config.js

README.md

boilerplate-angular-es6-webpack2

To install dependencies run: npm i

To run the project use:

npm start

To install test dependencies:

Use npm to install Protractor globally with: npm install -g protractor Update webdriver-manage(is a helper tool to easily get an instance of a Selenium Server): webdriver-manager update Now start up a server with: webdriver-manager start

To run test:

cd e2e-tests && protractor protractor.conf.js

Pattern used in boilerplate

Controllers & Services

Controllers and Services are write in ES6, example:

Controller

import './home.view.html'; // Import view template in the controller making a complete component

export class HomeController { // Export Controller to use in app.js and router.js
    constructor($http, $scope) {
        'ngInject' // Dependencies injection

        this._$http = $http
        this._$scope = $scope
    }

}

Service

export class UserService { // Export Service to use in app.js or Controllers
    constructor($http) {
        'ngInject' // Dependencies injection

        this._$http = $http
    }

    getUser(id) {
       return this._$http.get(`/users?id=${id}` )
   }

}

Directives

Directives are a little more complicated because the Angular needs an literal object, different from the controller and service that create constructor function

export class ExampleDirective { // Export Directive to use in app.js
  constructor () {
    'ngInject' // Dependencies injection

    this.templateUrl = 'directives/exampleDirective/example.view.html'
    this.restrict = 'E'
    this.controllerAs = 'ctrl'
    this.scope = {
      title: '@'
    }

    this.setTitle()
  }

  // optional compile function
  compile (tElement) {
    tElement.css('position', 'relative')
  }

  // optional link function
  link (scope, element) {
    this.$interval(() => this.move(element), 1000)
  }

  // example method
  setTitle (title) {
    this.title = title
  }

  // example method
  move (element) {
    element.css('left', (Math.random() * 500) + 'px')
    element.css('top', (Math.random() * 500) + 'px')
  }

}

Docker Support

You can use it in development or production. There are 2 different docker-compose.yml files for each environment. When running point to the desired file and have fun.

You can’t perform that action at this time.