AngularJS Webpack

A complete, yet simple, starter for AngularJS using Webpack.

This workflow serves as a starting point for building AngularJS (1.x) applications using Webpack 2.x. Should be noted that apart from the pre-installed angular package, this workflow is pretty much generic.

• Heavily commented webpack configuration with reasonable defaults.
• ES6, and ES7 support with babel.
• Source maps included in all builds.
• Development server with live reload.
• Production builds with cache busting.
• Testing environment using karma to run tests and jasmine as the framework.
• Code coverage when tests are run.
• No gulp and no grunt, just npm scripts.

Warning: Make sure you're using the latest version of Node.js and NPM

Quick start

Clone/Download the repo then edit app.js inside /src/app/app.js

# clone our repo
$ git clone https://github.com/actionanand/angularjs-webpack.git --branch 1-skeleton-base

# alternate way to clone without git history

$ npx degit https://github.com/actionanand/angularjs-webpack.git#1-skeleton-base angularjs-webpack

# change directory to your app
$ cd angularjs-webpack

# install the dependencies with npm
$ npm install

# start the server
$ npm start

go to http://localhost:8080/ in your browser.

Table of Contents

• Getting Started
  • Dependencies
  • Installing
  • Running the app
  • Developing
  • Testing
• License

Getting Started

Dependencies

What you need to run this app:

• node and npm (Use NVM)
• Ensure you're running Node (v4.1.x+) and NPM (2.14.x+)

Installing

• fork this repo
• clone your fork
• npm install to install all dependencies

Running the app

After you have installed all dependencies you can now run the app with:

npm start

It will start a local server using webpack-dev-server which will watch, build (in-memory), and reload for you. The port will be displayed to you as http://localhost:8080/angularjs-webpack.

Developing

Build files

• single run: npm run build
• build files and watch: npm start

Testing

1. Unit Tests

• single run: npm test
• live mode (TDD style): npm run test-watch

License

MIT

Resources

• Replacement for git clone - degit
• Bootstrap 3 Official
• angular-ui-router NPM package
• How to use index.js file(Properly)
• Using $scope.$watch in ES6
• Angularjs: 'controller as syntax' and $watch
• Digging into Angulars Controller as syntax
• angular 1.5 method .name in export angular.module
• Exploring ES6 Classes In AngularJS 1.x
• Advanced routing and resolves
• Pokemon github
• file-loader to load images by webpack
• creating a new variable in directive scope - stackoverflow

Credits

• AngularJs webpack - github(@preeboot)
• AngularJs webpack demo - github
• Using AngularJS with ES6 and Webpack