Angular-Webpack-Boilerplate

A Boilerplate code for Angular 1.x with ES6 Support and Webpack

Angular Boilerplate code

This is boilerplate code to start any angular project of yours.

alt alt

Features

Latest Javascript Standard Enabled

Use template strings, object destructuring, arrow functions and more, today.

Eslint enabled

Best coding standards using airbnb eslint plugin providing instant feedback.

Sass Enabled

Sass is the most used css preprocessor. You can use sass by default with this boilerplate.

Routing

Routing is basic requirement for any webapp.So it is now included in the boilerplate.

Icon support

Added font-awesome icon support , You can use them by default in your templates.

Installation

# clone the repo
git clone https://github.com/neelbommisetty/Angular-Webpack-Boilerplate myApp

cd myApp

# Install all dependencies
yarn

# To start dev server
yarn start

# To make production build
yarn build

# To start production server
yarn prod

Tips

  • For including css or sass files you can just import with es6 import syntax , webpack understands it. javascript import '../styles/style.scss';
  • For including html templates incase of directives or routes , you have use commonJS require syntax. javascript function routes($stateProvider) { $stateProvider .state('layout', { url: '/', views: { 'Root': { //like here template: require('./layout.html'), controller: 'LayoutController', controllerAs: 'layout' } } }); }
  • Do not forget to inject modules. else the minification during build process fails to understand your angular services etc.
// example
TestController.$inject = ['$scope'];
angular.module('app',[]).controller('TestController',TestController);

//in testcontroller.js
const TestController = ($scope) => {
  const name = 'Work';
  $scope.greeting = `Hi My Name is ${name}`;
}

//if you do not inject $scope in the minification process the $scope is replace by something else which breaks your code.

Related Repositories

angular2-starter-kit

angular2-starter-kit

:star: Angular2 starter kit — production ready universal web app boilerplate (Angular 2, Server Side Rendering, Web Worker, Docker, Node.js/Express, PostCSS, Webpack, GZip) ...

webpack-angular-es6

webpack-angular-es6

A boilerplate for writing modular Angular 1.X in ES6 using Webpack. ...

angular-es6-webpack-boilerplate

angular-es6-webpack-boilerplate

AngularJS 1.4x and ES6 application boilerplate /w testing practices using Webpack ...

Angular-Webpack-Boilerplate

Angular-Webpack-Boilerplate

A Boilerplate code for Angular 1.x with ES6 Support and Webpack ...

angular2-webpack-boilerplate

angular2-webpack-boilerplate

A boilerplate for Angular 2 and Webpack ...