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.