Angularjs - lazy loading techniques

Introduction

Nir Kaufman
nirkaufman@gmail.com

AngularJS infrastructures - lazy loading
techniques:
1. Introducing the lazy loading challenges with
AngularJS
2. Review a working demo project


overview

AngularJS encourage us to break our code
into smaller pieces.

Modules
services
directives

controllers
filters

constants


overview

Separating your code into multiple files considered
a best practice when building large apps with
angular.
Angular seed project:
❖

js/

angular.module('myApp.controllers', []).
■
■
■
■

❖

controllers.js
services.js
directives.js
filters.js

partials/
■ partial1.html
■ partial2.html

controller('MyCtrl1', function() {
})
.controller('MyCtrl2', function() {
});


overview

We can define our modules as dependencies:
angular.module('myApp',['ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers',
’ngRoute’,
’ngResource’,
’ui.bootstrap’,
]).


overview

but we must load all of our resources ahead:
<script src="lib/angular.js"></script>
<script src="lib/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
………………..
<script src="lib/angular-resource.js"></script>
<script src="lib/angular-bootstrap.js"></script>
<script src="lib/underscore.js"></script>

overview

All components must register against our module
on bootstrap. otherwise we can't use them.
Error: Argument ‘myController’ is not a function, got undefined

register
Lazy Loading Angular components


solution

We need to answer those 3 questions in order to
solve this challenge:
● How to lazy load scripts async ?
● How to register our components against
our module after bootstrap?
● When & where the actual loading occurs?


loading

RequireJS provides a clean way to load and
manage dependencies for our applications.
<script data-main="main" src="require.js"></script>
define(function () {
// module code
})
require([‘module’], function (module) {
// use this module
})

http://requirejs.org/

register

Components register against the module in the
config phase using providers.
For instance, we can register our controller
manually using the ‘$controllerProvider’:
angular.module('moduleName', [])
.config(function($controllerProvider) {
$controllerProvider.register('Ctrl', function () {
// controller code
})
});


register

All components can be registered with their
matching provider methods:
// services can register with $provide
$provide.service()
$provide.factory(),
$provide.value(),
$provide.constant(),
// other components use specific providers
$controllerProvider.resgister()
$animateProvider.resgister()
$filterProvider.resgister()
$compileProvider.directive()


register

we need to hold a reference to this provider in
order to use it later in our code:
var app = angular.module('moduleName', [])
.config(function($controllerProvider) {
app.loadController = $controllerProvider.register;
})
});

app.loadController(‘someCtrl’, function ($scope) {})


when to load

Where in the application should the actual loading
take place?

● when routing to a view - $routeProvider
● when loading content - <ng-include>
● in response to event - like click or hover


routing

The route object contain a ‘resolve’ property that
can accept a map of promises and wait for them to
resolve before performing the route
angular.module('moduleName', [])
.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'view.html',
controller : 'controller.js',
resolve : // promise
})
})
});


routing

If every view managed by a controller we can
reflect that in our project structure by packing them
together & come up with naming conventions:
❖ views

➢ view-name
■ view-name.html
■ view-name.js

.controller(‘viewNameCtrl’, ….

➢ another-view
■ another-view-name.html
■ another-view-name.js


events

We can load our dependencies as a reaction to an
event.
we can be creative and load our resources
depending on the user behaviour:
● load only when a user start to fill a form
● load by mouse position
● load when a response comming back from
the server


modules

What about module loading?
ocLazyLoad is probably the best solution for lazy
loading angular modules (for now):
● Dependencies are automatically loaded
● Debugger like (no eval code)
● The ability to mix normal boot and load on demand
● Load via the service or the directive
● Use your own async loader (requireJS, script.js ...)

https://github.com/ocombe/ocLazyLoad

summary

Lazy loading in Angular can be achived today with
minimum effort.
to keep our loading infrastructure flexible:
1. keep the loading logic in separated services
this will make our life easier when this feature will
be officially supported
2. use naming conventions
this way developers can integrate more easily
when moving between projects

summary

Thank You!
Demo project source code:
https://github.com/nirkaufman/lazyLoadingDemo


Angularjs - lazy loading techniques

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Angularjs - lazy loading techniques (10)

More from Nir Kaufman (14)

Recently uploaded (20)

Angularjs - lazy loading techniques