Skip to content

Instantly share code, notes, and snippets.

@dgieselaar
Last active July 5, 2017 10:39
Show Gist options
  • Star 19 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save dgieselaar/8b20e9d593e1806a098b to your computer and use it in GitHub Desktop.
Save dgieselaar/8b20e9d593e1806a098b to your computer and use it in GitHub Desktop.
Code splitting, lazy-loading, import statements, Angular + newNgRouter + ocLazyLoad + webpack
import _ from 'lodash';
import angular from 'angular';
import 'angular-new-router';
import 'oclazyload';
function AppController ( ) {
}
AppController.$routeConfig = [];
const templates = {};
const routes = [
{
component: 'home',
path: '/',
canActivate: function ( ) {
return new Promise(function ( resolve, reject ) {
require([ './home/home.js', './home/home.html' ], function ( js, html ) {
templates.home = html;
resolve();
});
});
}
}
];
const controllers =
_(routes)
.indexBy(function ( route ) {
return _.capitalize(route.component) + 'Controller';
})
.mapValues(function ( route ) {
function controller ( $router, $ocLazyLoad ) {
this.$router = $router;
this.$ocLazyLoad = $ocLazyLoad;
}
controller.prototype.canActivate = function ( ) {
return route.canActivate ? route.canActivate() : true;
};
AppController.$routeConfig.push(_.defaults(_.pick(route, 'component', 'path'), { path: '/' + route.component }));
controller.$inject = [ '$router', '$ocLazyLoad' ].concat(route.inject || []);
return controller;
})
.value();
export default function ( ) {
let getComponentTemplate;
const module = angular.module('Zaaksysteem', [ 'ngNewRouter', 'oc.lazyLoad' ])
.controller('AppController', AppController)
.config([ '$componentLoaderProvider', '$locationProvider', function ( $componentLoaderProvider, $locationProvider ) {
$locationProvider.html5Mode(true);
$componentLoaderProvider.setTemplateMapping(function ( name ) {
return getComponentTemplate(name);
});
}])
.run([ '$templateCache', '$ocLazyLoad', function ( $templateCache, $ocLazyLoad ) {
getComponentTemplate = function ( name ) {
var tplName = `./${name}/${name}.html`;
$templateCache.put(tplName, templates[name]);
$ocLazyLoad.load({
name: 'Zaaksysteem.' + name
});
return tplName;
};
}]);
_.each(controllers, function ( controller, name ) {
module.controller(name, controller);
});
return module;
}
/*global module,__dirname,require*/
var webpack = require('webpack'),
karma = require('karma'),
exports;
exports = {
entry: './src/index.js',
devtool: 'source-map',
output: {
path: __dirname + '/dist',
filename: "./js/[name].js",
chunkFilename: "./js/[name].js"
},
module: {
loaders: [
{
test: /.*\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /.*\.html$/,
loader: 'html',
exclude: /node_modules/
}
]
},
plugins: new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
output: {
comments: false
}
})
};
module.exports = exports;
@shaurabh-singh
Copy link

Hi, how to load multiple modules using oclazyload?
For example:

 $ocLazyLoad.load([{ name: 'Zaaksysteem.' + name }, { name: xyz }]);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment