├── app ├── foo │ ├── foo.scss │ ├── foo.html │ ├── foo.controller.js │ └── index.js ├── bar │ ├── bar.scss │ ├── bar.html │ ├── bar.controller.js │ └── index.js ├── core │ ├── main.scss │ └── index.js └── main.js ├── .bowerrc ├── bower.json ├── .gitignore ├── webpack.config.js ├── package.json ├── LICENSE └── README.md /app/foo/foo.scss: -------------------------------------------------------------------------------- 1 | h1.foo { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "app/vendor" 3 | } 4 | -------------------------------------------------------------------------------- /app/bar/bar.scss: -------------------------------------------------------------------------------- 1 | h1.bar { 2 | color: blue; 3 | } -------------------------------------------------------------------------------- /app/core/main.scss: -------------------------------------------------------------------------------- 1 | a { 2 | cursor: pointer; 3 | } -------------------------------------------------------------------------------- /app/core/index.js: -------------------------------------------------------------------------------- 1 | require('./main.scss'); 2 | 3 | module.exports = {}; -------------------------------------------------------------------------------- /app/bar/bar.html: -------------------------------------------------------------------------------- 1 |

Bar state

2 | 3 | Go to Foo state -------------------------------------------------------------------------------- /app/foo/foo.html: -------------------------------------------------------------------------------- 1 |

Foo state

2 | 3 | Go to Bar state -------------------------------------------------------------------------------- /app/bar/bar.controller.js: -------------------------------------------------------------------------------- 1 | module.exports = function($scope) { 2 | console.log('bar controller'); 3 | } -------------------------------------------------------------------------------- /app/foo/foo.controller.js: -------------------------------------------------------------------------------- 1 | module.exports = function($scope) { 2 | console.log('foo controller'); 3 | } -------------------------------------------------------------------------------- /app/foo/index.js: -------------------------------------------------------------------------------- 1 | var fooController = require('./foo.controller.js'); 2 | 3 | require('./foo.scss'); 4 | 5 | var mod = angular.module('foo', []); 6 | 7 | mod.controller('FooController', ['$scope', fooController]); 8 | 9 | module.exports = mod; -------------------------------------------------------------------------------- /app/bar/index.js: -------------------------------------------------------------------------------- 1 | var barController = require('./bar.controller.js'); 2 | 3 | require('./bar.scss'); 4 | 5 | var mod = module.exports = angular.module('bar', []); 6 | 7 | mod.controller('BarController', ['$scope', barController]); 8 | 9 | module.exports = mod; -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-angularjs-lazyload", 3 | "version": "1.0.0", 4 | "authors": [ 5 | "Alexandru Badiu " 6 | ], 7 | "moduleType": [ 8 | "es6" 9 | ], 10 | "license": "MIT", 11 | "private": true, 12 | "ignore": [ 13 | "**/.*", 14 | "node_modules", 15 | "bower_components", 16 | "app/vendors", 17 | "test", 18 | "tests" 19 | ], 20 | "dependencies": { 21 | "angularjs": "~1.3.15", 22 | "angular-ui-router": "~0.2.13", 23 | "ocLazyLoad": "~0.6.3" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/*.js 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | app/vendor -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | 4 | module.exports = { 5 | debug: true, 6 | 7 | entry: "./app/main.js", 8 | 9 | output: { 10 | path: path.resolve(__dirname, './build'), 11 | filename: '[name].js' 12 | }, 13 | 14 | module: { 15 | loaders: [ 16 | { 17 | test: /\.html$/, 18 | loader: 'html' 19 | }, 20 | { 21 | test: /\.scss$/, 22 | loader: 'style-loader!css-loader!autoprefixer-loader!sass-loader' 23 | }, 24 | { 25 | test: /\.png$/, 26 | loader: 'url-loader?limit=100000&mimetype=image/png' 27 | }, 28 | { 29 | test: /\.jpg$/, 30 | loader: 'file-loader' 31 | } 32 | ] 33 | }, 34 | 35 | resolve: { 36 | modulesDirectories: [ 37 | 'node_modules', 38 | 'app/vendor' 39 | ] 40 | } 41 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-angularjs-lazyload", 3 | "version": "1.0.0", 4 | "description": "Simple example on how to use Webpack, Angular and ocLazyLoad.", 5 | "repository": { 6 | "type" : "git", 7 | "url" : "https://github.com/voidberg/webpack-angularjs-lazyload.git" 8 | }, 9 | "scripts": { 10 | "start": "webpack-dev-server --content-base=build --history-api-fallback --progress" 11 | }, 12 | "author": "Alexandru Badiu ", 13 | "license": "MIT", 14 | "dependencies": { 15 | "lodash": "^3.5.0" 16 | }, 17 | "devDependencies": { 18 | "autoprefixer-loader": "^1.2.0", 19 | "css-loader": "^0.9.1", 20 | "file-loader": "^0.8.1", 21 | "html-loader": "^0.2.3", 22 | "node-sass": "^3.0.0-alpha.0", 23 | "sass-loader": "^1.0.0", 24 | "style-loader": "^0.9.0", 25 | "url-loader": "^0.5.5", 26 | "webpack": "^1.7.3" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Alexandru Badiu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![No Maintenance Intended](http://unmaintained.tech/badge.svg)](http://unmaintained.tech/) 2 | 3 | # webpack-angular-lazyload 4 | Simple example on how to use Webpack, Angular and ocLazyLoad. 5 | 6 | ## What's this? 7 | 8 | This is a simple example that shows how you can use Webpack's code splitting with AngularJS and ocLazyLoad. ocLazyLoad is not used to load the code but rather notify AngularJS that a new module has been loaded. 9 | 10 | It's only loading the module code and the CSS but templates can be lazy loaded via a `templateProvider` as well, e.g.: 11 | 12 | ```js 13 | templateProvider: ['$q', function($q) { 14 | var deferred = $q.defer(); 15 | 16 | require.ensure([], function(require) { 17 | var template = require('./foo/foo.html'); 18 | deferred.resolve(template); 19 | }); 20 | 21 | return deferred.promise; 22 | }], 23 | ``` 24 | 25 | **Note:** Keep an eye on ocLazyLoad since support for Webpack is in the roadmap for version 1.2: [Milestone 1.2 - Tools](https://github.com/ocombe/ocLazyLoad/issues/141). 26 | 27 | ## Installation 28 | 29 | * `npm install -g webpack webpack-dev-server` 30 | * `npm install` 31 | * `bower install` 32 | 33 | ## Running the example 34 | 35 | * `npm start` 36 | * Open `http://localhost:8080` or `http://localhost:8080/webpack-dev-server/`. 37 | * Look in the network tab to see the chunks loaded on demand. 38 | 39 | ## Issues 40 | 41 | * Webpack's UglifyJsPlugin breaks the lazyloading code. To get around this you either need to disable mangling or add `$q` and `$ocLazyLoad` to the mangle exception list, like so: 42 | 43 | ```js 44 | new webpack.optimize.UglifyJsPlugin({ 45 | minimize: true, 46 | warnings: false, 47 | mangle: { 48 | except: ['$q', '$ocLazyLoad'] 49 | }, 50 | sourceMap: false 51 | }) 52 | ``` 53 | -------------------------------------------------------------------------------- /app/main.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | require('./core'); 4 | 5 | require('angular'); 6 | require('angular-ui-router/release/angular-ui-router'); 7 | require('ocLazyLoad/dist/ocLazyLoad'); 8 | 9 | var app = angular.module('webpackExample', [ 10 | 'ui.router', 11 | 'oc.lazyLoad' 12 | ]); 13 | 14 | angular.module('webpackExample') 15 | .config([ 16 | '$stateProvider', 17 | '$locationProvider', 18 | '$urlRouterProvider', 19 | function ($stateProvider, $locationProvider, $urlRouterProvider) { 20 | $stateProvider 21 | .state('foo', { 22 | url: '/foo', 23 | template: require('./foo/foo.html'), 24 | controller: 'FooController', 25 | resolve: ['$q', '$ocLazyLoad', function($q, $ocLazyLoad) { 26 | var deferred = $q.defer(); 27 | 28 | require.ensure([], function (require) { 29 | var mod = require('./foo'); 30 | $ocLazyLoad.load({ 31 | name: mod.name, 32 | }); 33 | 34 | deferred.resolve(mod.controller); 35 | }); 36 | 37 | return deferred.promise; 38 | }] 39 | }) 40 | .state('bar', { 41 | url: '/bar', 42 | template: require('./bar/bar.html'), 43 | controller: 'BarController', 44 | resolve: ['$q', '$ocLazyLoad', function($q, $ocLazyLoad) { 45 | var deferred = $q.defer(); 46 | 47 | require.ensure([], function (require) { 48 | var mod = require('./bar'); 49 | $ocLazyLoad.load({ 50 | name: mod.name, 51 | }); 52 | 53 | deferred.resolve(mod.controller); 54 | }); 55 | 56 | return deferred.promise; 57 | }] 58 | }); 59 | 60 | $locationProvider.html5Mode(true); 61 | 62 | $urlRouterProvider.otherwise('/foo'); 63 | }]); 64 | --------------------------------------------------------------------------------