Is it possible to lazy load an angular application partially? For instance, let's say I want to lazy load only a few libraries and a few angular modules (controllers, services) instead of lazy loading the entire application with the libraries.
Angular version is 1.x
Yes its possible, your require-config.js
require.config({
paths: {
'angular': 'bower_components/angular/angular.min',
'angular-animate': 'bower_components/angular-animate/angular-animate.min',
'angular-aria': 'bower_components/angular-aria/angular-aria.min',
'angular-cookies': 'bower_components/angular-cookies/angular-cookies.min',
'angular-messages': 'bower_components/angular-messages/angular-messages.min',
'angular-resource': 'bower_components/angular-resource/angular-resource.min',
'angular-ui-router': 'bower_components/angular-ui-router/release/angular-ui-router.min',
'angular-ui-router-extras': 'bower_components/ui-router-extras/release/ct-ui-router-extras.min',
'angular-sanitize': 'bower_components/angular-sanitize/angular-sanitize.min',
'angular-pagination': 'bower_components/angularUtils-pagination/dirPagination',
'angular-bootstrap': 'bower_components/angular-bootstrap/ui-bootstrap-tpls.min',
'angular-uiSelect': 'bower_components/ui-select/dist/select.min',
'angular-loadingBar': 'bower_components/angular-loading-bar/build/loading-bar.min',
'angular-switch': 'bower_components/angular-ui-switch/angular-ui-switch.min',
'angular-tree': 'bower_components/bootstrap-tree/js/bootstrap-tree'
},
//resolve dependencies
shim: {
'angular': {exports: 'angular'},
'angular-animate': {deps: ['angular']},
'angular-aria': {deps: ['angular']},
'angular-cookies': {deps: ['angular']},
'angular-messages': {deps: ['angular']},
'angular-resource': {deps: ['angular']},
'angular-ui-router': {deps: ['angular']},
'angular-ui-router-extras': {deps: ['angular', 'angular-ui-router']},
'angular-sanitize': {deps: ['angular']},
'angular-pagination': {deps: ['angular']},
'angular-bootstrap': {deps: ['angular']},
'angular-uiSelect': {deps: ['angular']},
'angular-loadingBar': {deps: ['angular']},
'angular-switch': {deps: ['angular']},
'angular-tree': {deps: ['jquery']},
}
// set library priorities
priority: [
'angular'
],
//here you add your custom modules, just call the js "main.js" for each module
packages: [
{
name: 'home',
location: './src/module/home'// It has its own file main.js
},
{
name: 'login',
location: './src/modules/login'// It has its own file main.js
}
]
});
//inject modules and bootstrap the app
require([
'angular',
'main',
'type',
'angular-animate',
'angular-aria',
'angular-cookies',
'angular-messages',
'angular-resource',
'angular-ui-router',
'angular-ui-router-extras',
'angular-sanitize',
'angular-pagination',
'angular-bootstrap',
'angular-uiSelect',
'angular-loadingBar',
'angular-switch',
'angular-tree'
],
function(angular, main) {
//here bootstrap the angular app in your html, home.name is the array packages.
angular.module('myApp', [home.name]);
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
}
);
In your index.html add
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My app</title>
</head>
<!--The app is bootstrapped, you don't need ng-app -->
<body>
<!-- if you use router ui -->
<div ui-view></div>
<!-- data-main is the path to the require-config-->
<script type="text/javascript" data-main="require-config" src="bower_components/requirejs/require.js"></script>
</body>
</html>
Now in home/main.js
define(function(require) {
var angular = require('angular'),
moduleName = 'home';
angular
.module(moduleName, [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngSanitize',
'ui.router',
'ui.bootstrap',
'ui.select',
'ui-notification',
'angularUtils.directives.dirPagination',
'angular-loading-bar',
'uiSwitch',
'type'
])
.config(function($stateProvider, $urlRouterProvider, NotificationProvider, cfpLoadingBarProvider){
$urlRouterProvider
.otherwise("/home");
$stateProvider
.state('home', {
url: "/home",
templateUrl: "src/main/views/main.html",
requireLogin: true
});
})
//Controllers
.controller('MainCtrl', ['$scope', require('./controllers/MainCtrl')])
.controller('NavCtrl', ['$scope', '$state', require('./controllers/NavCtrl')])
.controller('SideCtrl', ['$scope', '$state', require('./controllers/SideCtrl')])
//Also this works
.controller('SideCtrl', ['$scope', '$state', funtion($scope, $state){
//your code here
}])
//Sidebar & Navbar
.directive('navbar', require('./directives/NavbarDirective'))
.directive('sidebar', require('./directives/SidebarDirective'))
//Services
.factory('customNotifications', ['Notification', require('./services/notificationsFactory')])
.factory('errorsHandler', ['$location', 'authentication', 'customNotifications', require('./services/errorsFactory')])
;
return {
name: moduleName,
ngModule: angular
};
});
