Installing Angular JS

npm install angular --save

There is really nothing more to it. You can now start using Angular JS in your code. In this project we are using ES6 module loader sytax, where import controller from './controllers.js; is equivalent to var controller = require('./controllers.js');.

Using Angular JS in the code

In any file

import controller from './controllers.js';

angular

  .module('main', [])

  .controller('mainController', controller);

Including Angular JS as a plugin

To use use Angular JS in your JavaScript modules, you can use webpack to make Angular available as a global to all modules. Otherwise, you can require Angular in any module file where you need it.

var angular = require('angular');

Here's how we configure webpack to use Angular as a plugin.

webpack.config.js

var path = require('path');
module.exports = {
  entry: path.resolve(__dirname, '../app/main.js')
  output: {
    path: path.resolve(__dirname, '../build'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.ProvidePlugin({
      'angular': 'angular'
    })
  ]
};

Webpack will map modules to free variables. In this case, any time you use the free variable angular inside a module, webpack will set angular to require('angular').

Including Angular JS as an external

If you are writing for a page that will already have Angular loaded, you can use webpack externals. This defines a global variable for all your modules, and assumes it will be available. You may need to include the variable as a JShint global as well to avoid hinting errors.

Here's how we configure webpack to use Angular as an external.

webpack.config.js

var path = require('path');
module.exports = {
  entry: path.resolve(__dirname, '../app/main.js')
  output: {
    path: path.resolve(__dirname, '../build'),
    filename: 'bundle.js'
  },
  externals: {
    'angular': 'angular'
  }
};

You can map other global libraries which may not be a part of your app to externals as well. Be aware this will development with webpack-dev-server, since you'll have to include script tags for those sources in your index.html.