├── .gitignore ├── README.md ├── app ├── config.js ├── index.js ├── page1.html ├── page2.html ├── page3 │ ├── page3.html │ ├── page3.scss │ ├── page3Controller.js │ └── page3Module.js ├── page4 │ ├── page4.html │ ├── page4.scss │ ├── page4Controller.js │ └── page4Module.js └── styles │ └── main.scss ├── build └── index.html ├── dist └── index.html ├── package.json ├── webpack.config.js └── webpack.production.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist/ 3 | build/ 4 | .DS_store 5 | *.log 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # webpack-angular-oclazyload 2 | 3 | This is a demo of angular, webpack, oclazyload(to lazyLoad modules), sass. 4 | 5 | The base app has pages 1-3, and page4 module is optional. See below to build it. 6 | 7 | Install 8 | 9 | ``` 10 | npm install 11 | ``` 12 | 13 | Run webpack dev server 14 | 15 | ``` 16 | npm run dev 17 | ``` 18 | 19 | Build dev 20 | 21 | ``` 22 | npm run build 23 | ``` 24 | 25 | Build production with minification 26 | 27 | ``` 28 | npm run deploy 29 | ``` 30 | 31 | To compile and add optional module 32 | ``` 33 | npm run demo 34 | 35 | ``` 36 | -------------------------------------------------------------------------------- /app/config.js: -------------------------------------------------------------------------------- 1 | export default (ngModule, Angular) => { 2 | ngModule.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $locationProvider, $urlRouterProvider) { 3 | //$locationProvider.html5Mode(true); 4 | $locationProvider.hashPrefix('!'); 5 | 6 | $urlRouterProvider.otherwise('/page1'); 7 | 8 | $stateProvider.state('page1', { 9 | url: '/page1', 10 | template: require('./page1.html'), 11 | controller: function () { 12 | this.title = 'This is page 1'; 13 | }, 14 | controllerAs: 'test' 15 | }).state('page2', { 16 | url: '/page2', 17 | template: require('./page2.html'), 18 | controller: function () { 19 | this.title = 'This is page 2'; 20 | }, 21 | controllerAs: 'test' 22 | }).state('page3', { 23 | url: '/page3', 24 | template: require('./page3/page3.html'), 25 | controller: 'Page3Controller', 26 | controllerAs: 'test' 27 | }); 28 | }]); 29 | if(ON_DEMO){ 30 | ngModule.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $locationProvider, $urlRouterProvider) { 31 | $stateProvider.state('page4', { 32 | url: '/page4', 33 | templateProvider: ['$q', function ($q) { 34 | let deferred = $q.defer(); 35 | require.ensure(['./page4/page4.html'], function () { 36 | let template = require('./page4/page4.html'); 37 | deferred.resolve(template); 38 | }); 39 | return deferred.promise; 40 | }], 41 | controller: 'Page4Controller', 42 | controllerAs: 'test', 43 | resolve: { 44 | foo: ['$q', '$ocLazyLoad', function ($q, $ocLazyLoad) { 45 | let deferred = $q.defer(); 46 | require.ensure([], function () { 47 | let module = require('./page4/page4Module.js')(Angular); 48 | $ocLazyLoad.load({ 49 | name: 'page4App' 50 | }); 51 | deferred.resolve(module); 52 | }); 53 | 54 | return deferred.promise; 55 | }] 56 | } 57 | }); 58 | }]); 59 | 60 | } 61 | 62 | 63 | } -------------------------------------------------------------------------------- /app/index.js: -------------------------------------------------------------------------------- 1 | const Angular = require('angular'); 2 | 3 | require('oclazyload'); 4 | 5 | require('./page3/page3Module')(Angular); 6 | //require('./page4Module')(Angular); 7 | 8 | require('./styles/main.scss') 9 | const ngModule = Angular.module('myApp', [require('angular-ui-router'), 'oc.lazyLoad', 'page3App']); 10 | 11 | require('./config')(ngModule, Angular); 12 | -------------------------------------------------------------------------------- /app/page1.html: -------------------------------------------------------------------------------- 1 |

page 1

2 |

{{test.title}}

-------------------------------------------------------------------------------- /app/page2.html: -------------------------------------------------------------------------------- 1 |

page 2

2 |

{{test.title}}

-------------------------------------------------------------------------------- /app/page3/page3.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

page 3

4 |

{{test.title}}

5 | 8 |
9 | -------------------------------------------------------------------------------- /app/page3/page3.scss: -------------------------------------------------------------------------------- 1 | #page3 { 2 | background: green; 3 | } 4 | -------------------------------------------------------------------------------- /app/page3/page3Controller.js: -------------------------------------------------------------------------------- 1 | let page3Controller = function(){ 2 | let vm = this; 3 | vm.title = 'This is page 3'; 4 | 5 | vm.family = [ 6 | {name: 'Andy'}, 7 | {name: 'Jamie'}, 8 | {name: 'Lucy'}, 9 | {name: 'Quinn'} 10 | ]; 11 | }; 12 | 13 | export default ngModule => { 14 | ngModule.controller('Page3Controller', page3Controller); 15 | } -------------------------------------------------------------------------------- /app/page3/page3Module.js: -------------------------------------------------------------------------------- 1 | export default Angular => { 2 | const ngPage3Module = Angular.module('page3App', []); 3 | require('./page3.scss'); 4 | require('./page3Controller')(ngPage3Module); 5 | } 6 | -------------------------------------------------------------------------------- /app/page4/page4.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |

page 4

4 |

{{test.title}}

5 | 8 |
9 | -------------------------------------------------------------------------------- /app/page4/page4.scss: -------------------------------------------------------------------------------- 1 | #page4 { 2 | background: blue; 3 | } 4 | -------------------------------------------------------------------------------- /app/page4/page4Controller.js: -------------------------------------------------------------------------------- 1 | let page4Controller = function(){ 2 | let vm = this; 3 | vm.title = 'This is page 4'; 4 | 5 | vm.pets = [ 6 | {name: 'Ellie'}, 7 | {name: 'Mr. Fish'}, 8 | {name: 'Stella'}, 9 | {name: 'Stuby'} 10 | ]; 11 | }; 12 | 13 | export default ngModule => { 14 | ngModule.controller('Page4Controller', page4Controller); 15 | } -------------------------------------------------------------------------------- /app/page4/page4Module.js: -------------------------------------------------------------------------------- 1 | export default Angular => { 2 | const ngPage4Module = Angular.module('page4App', []); 3 | require('./page4.scss'); 4 | require('./page4Controller')(ngPage4Module); 5 | } 6 | -------------------------------------------------------------------------------- /app/styles/main.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background: red; 3 | } 4 | -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ui-router 6 | 7 | 8 |

9 | Page 1 10 | Page 2 11 | Page 3 12 | Page 4 13 |

14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ui-router 6 | 7 | 8 |

9 | Page 1 10 | Page 2 11 | Page 3 12 | Page 4 13 |

14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ui-router", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "build": "webpack", 8 | "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build", 9 | "demo": " NODE_ENV=demo webpack-dev-server --devtool eval --progress --colors --content-base build", 10 | "deploy": "NODE_ENV=production webpack --config webpack.production.config.js", 11 | "deploy_demo": "NODE_ENV=demo webpack --config webpack.production.config.js" 12 | }, 13 | "author": "", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "babel-core": "^5.1.9", 17 | "babel-loader": "^6.2.1", 18 | "babel-preset-es2015": "^6.3.13", 19 | "css-loader": "^0.23.1", 20 | "file-loader": "^0.8.5", 21 | "html-loader": "^0.4.0", 22 | "ng-annotate-webpack-plugin": "^0.1.2", 23 | "node-sass": "^3.4.2", 24 | "raw-loader": "^0.5.1", 25 | "sass-loader": "^3.1.2", 26 | "style-loader": "^0.13.0", 27 | "url-loader": "^0.5.7", 28 | "webpack": "^1.12.11", 29 | "webpack-dev-server": "^1.14.1" 30 | }, 31 | "dependencies": { 32 | "angular": "^1.4.8", 33 | "angular-ui-router": "0.2.15", 34 | "oclazyload": "^1.0.9" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | 3 | var config = { 4 | entry: { 5 | app: './app/index.js', 6 | vendor: ['angular', 'oclazyload'] 7 | }, 8 | output: { 9 | path: './build', 10 | filename: 'bundle.js' 11 | }, 12 | module: { 13 | loaders: [ 14 | { 15 | test: /\.js$/, 16 | loader: 'babel', 17 | exclude: /node_modules/ 18 | }, 19 | { 20 | test: /\.css$/, 21 | loader: 'style!css', 22 | exclude: /node_modules/ 23 | }, 24 | { 25 | test: /\.scss$/, 26 | loader: 'style!css!sass', 27 | exclude: /node_modules/ 28 | }, 29 | { 30 | test: /\.(png|jpg)$/, 31 | loader: 'url?limit=25000', 32 | exclude: /node_modules/ 33 | }, 34 | { 35 | test: /\.html$/, 36 | loader: 'raw', 37 | exclude: /node_modules/ 38 | } 39 | ] 40 | }, 41 | 42 | plugins: [ 43 | new webpack.optimize.DedupePlugin(), 44 | new webpack.optimize.CommonsChunkPlugin({ 45 | name: 'vendor', 46 | filename: 'vendor.bundle.js' 47 | }), 48 | new webpack.DefinePlugin({ 49 | ON_DEMO: process.env.NODE_ENV === 'demo' 50 | }) 51 | ] 52 | }; 53 | 54 | module.exports = config; -------------------------------------------------------------------------------- /webpack.production.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var ngAnnotatePlugin = require('ng-annotate-webpack-plugin'); 3 | 4 | var config = { 5 | entry: { 6 | app: './app/index.js', 7 | vendor: ['angular', 'oclazyload'] 8 | }, 9 | output: { 10 | path: './dist', 11 | filename: 'bundle.js' 12 | }, 13 | module: { 14 | loaders: [ 15 | { 16 | test: /\.js$/, 17 | loader: 'babel', 18 | exclude: /node_modules/ 19 | }, 20 | { 21 | test: /\.css$/, 22 | loader: 'style!css', 23 | exclude: /node_modules/ 24 | }, 25 | { 26 | test: /\.scss$/, 27 | loader: 'style!css!sass', 28 | exclude: /node_modules/ 29 | }, 30 | { 31 | test: /\.(png|jpg)$/, 32 | loader: 'url?limit=25000', 33 | exclude: /node_modules/ 34 | }, 35 | { 36 | test: /\.html$/, 37 | loader: 'raw', 38 | exclude: /node_modules/ 39 | } 40 | ] 41 | }, 42 | 43 | plugins: [ 44 | // new ngAnnotatePlugin({ 45 | // add: true 46 | // }), 47 | new webpack.optimize.DedupePlugin(), 48 | new webpack.optimize.CommonsChunkPlugin({ 49 | name: 'vendor', 50 | filename: 'vendor.bundle.js' 51 | }), 52 | new webpack.optimize.UglifyJsPlugin({ 53 | mangle: { 54 | mangle: false 55 | } 56 | }), 57 | new webpack.DefinePlugin({ 58 | ON_DEMO: process.env.NODE_ENV === 'demo' 59 | }) 60 | ] 61 | }; 62 | 63 | module.exports = config; --------------------------------------------------------------------------------