https://github.com/fabiomirandaa/boilerplate-angular-es6-webpack2
Boilerplate angular 1.x with ES6 and Webpack 2
https://github.com/fabiomirandaa/boilerplate-angular-es6-webpack2
angular angularjs boilerplate es6 webpack2
Last synced: 12 months ago
JSON representation
Boilerplate angular 1.x with ES6 and Webpack 2
- Host: GitHub
- URL: https://github.com/fabiomirandaa/boilerplate-angular-es6-webpack2
- Owner: fabiomirandaa
- Created: 2016-11-03T20:20:56.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T16:06:57.000Z (over 3 years ago)
- Last Synced: 2025-04-09T16:48:32.760Z (about 1 year ago)
- Topics: angular, angularjs, boilerplate, es6, webpack2
- Language: JavaScript
- Homepage:
- Size: 1.27 MB
- Stars: 15
- Watchers: 2
- Forks: 6
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.