Skip to content

Commit 92be176

Browse files
bennadelbennadel
committed
Add demo for loading AngularJS modules after application bootstrap.
1 parent eb45aec commit 92be176

File tree

2 files changed

+285
-0
lines changed

2 files changed

+285
-0
lines changed

‎demos/loading-angularjs-after-bootstrap/index.htm

+282
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
<!doctype html>
2+
<html ng-app="Demo">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Loading AngularJS Components After Application Bootstrap
8+
</title>
9+
10+
<style type="text/css">
11+
12+
a[ ng-click ] {
13+
cursor: pointer ;
14+
user-select: none ;
15+
-webkit-user-select: none ;
16+
-moz-user-select: none ;
17+
-ms-user-select: none ;
18+
-o-user-select: none ;
19+
text-decoration: underline ;
20+
}
21+
22+
</style>
23+
</head>
24+
<body ng-controller="AppController">
25+
26+
<h1>
27+
Loading AngularJS Components After Application Bootstrap
28+
</h1>
29+
30+
<p>
31+
<a ng-click="toggleSubview()">Toggle Subviews</a>
32+
</p>
33+
34+
<!--
35+
The "Before" subview doesn't need any additional assets;
36+
however, the "After" subview relies on a number of assets
37+
that will be loaded after the AngularJS application has been
38+
bootstrapped.
39+
-->
40+
<div ng-switch="subview">
41+
<div ng-switch-when="before" ng-include=" 'before.htm' "></div>
42+
<div ng-switch-when="after" ng-include=" 'after.htm' "></div>
43+
</div>
44+
45+
46+
<!-- BEGIN: Templates For ngInclude. -->
47+
<script type="text/ng-template" id="before.htm">
48+
49+
<p>
50+
Before app bootstrap.
51+
</p>
52+
53+
</script>
54+
55+
<script type="text/ng-template" id="after.htm">
56+
57+
<p ng-controller="LazyController" bn-italics>
58+
{{ message }}
59+
</p>
60+
61+
</script>
62+
<!-- END: Templates For ngInclude. -->
63+
64+
65+
<!-- Load jQuery and AngularJS. -->
66+
<script type="text/javascript" src="../../vendor/jquery/jquery-2.0.3.min.js"></script>
67+
<script type="text/javascript" src="../../vendor/angularjs/angular-1.0.7.min.js"></script>
68+
<script type="text/javascript">
69+
70+
71+
// Create an application module for our demo.
72+
var app = angular.module( "Demo", [] );
73+
74+
75+
// -------------------------------------------------- //
76+
// -------------------------------------------------- //
77+
78+
79+
// After the AngularJS has been bootstrapped, you can no longer
80+
// use the normal module methods (ex, app.controller) to add
81+
// components to the dependency-injection container. Instead,
82+
// you have to use the relevant providers. Since those are only
83+
// available during the config() method at initialization time,
84+
// we have to keep a reference to them.
85+
// --
86+
// NOTE: This general idea is based on excellent article by
87+
// Ifeanyi Isitor: http://ify.io/lazy-loading-in-angularjs/
88+
app.config(
89+
function( $controllerProvider, $provide, $compileProvider ) {
90+
91+
// Since the "shorthand" methods for component
92+
// definitions are no longer valid, we can just
93+
// override them to use the providers for post-
94+
// bootstrap loading.
95+
console.log( "Config method executed." );
96+
97+
// Let's keep the older references.
98+
app._controller = app.controller;
99+
app._service = app.service;
100+
app._factory = app.factory;
101+
app._value = app.value;
102+
app._directive = app.directive;
103+
104+
// Provider-based controller.
105+
app.controller = function( name, constructor ) {
106+
107+
$controllerProvider.register( name, constructor );
108+
return( this );
109+
110+
};
111+
112+
// Provider-based service.
113+
app.service = function( name, constructor ) {
114+
115+
$provide.service( name, constructor );
116+
return( this );
117+
118+
};
119+
120+
// Provider-based factory.
121+
app.factory = function( name, factory ) {
122+
123+
$provide.factory( name, factory );
124+
return( this );
125+
126+
};
127+
128+
// Provider-based value.
129+
app.value = function( name, value ) {
130+
131+
$provide.value( name, value );
132+
return( this );
133+
134+
};
135+
136+
// Provider-based directive.
137+
app.directive = function( name, factory ) {
138+
139+
$compileProvider.directive( name, factory );
140+
return( this );
141+
142+
};
143+
144+
// NOTE: You can do the same thing with the "filter"
145+
// and the "$filterProvider"; but, I don't really use
146+
// custom filters.
147+
148+
}
149+
);
150+
151+
152+
// -------------------------------------------------- //
153+
// -------------------------------------------------- //
154+
155+
156+
// I control the root of the application.
157+
app.controller(
158+
"AppController",
159+
function( $scope ) {
160+
161+
// Since this Controller will be instantiated once
162+
// the application is bootstrapped, let's log it to
163+
// the console so we can see the timing.
164+
console.log( "Controller instantiated (after bootstrap)." );
165+
166+
// I determine which view is rendered.
167+
$scope.subview = "before";
168+
169+
170+
// ---
171+
// PUBLIC METHODS.
172+
// ---
173+
174+
175+
// I toggle between the two different subviews.
176+
$scope.toggleSubview = function() {
177+
178+
if ( $scope.subview === "before" ) {
179+
180+
$scope.subview = "after";
181+
182+
} else {
183+
184+
$scope.subview = "before";
185+
186+
}
187+
188+
}
189+
190+
}
191+
);
192+
193+
194+
// -------------------------------------------------- //
195+
// -------------------------------------------------- //
196+
197+
198+
// Once the DOM-Ready event has fired, we know that AngularJS
199+
// will have bootstrapped the application. As such, we want to
200+
// try adding our "lazy bindings" after the DOM-ready event.
201+
$( lazyBindings );
202+
203+
// I define the modules after bootstrapping. Remember, inside
204+
// of this function, the shorthand methods (ex, app.controller)
205+
// NO LONGER POINTER to the core shorthands; instead, they
206+
// point to the method definitions we defined in the config()
207+
// method executed at application bootstrap.
208+
function lazyBindings() {
209+
210+
console.log( "Lazy bindings added to application." );
211+
212+
// Lazy-loaded controller.
213+
app.controller(
214+
"LazyController",
215+
function( $scope, uppercase, util ) {
216+
217+
$scope.message = util.emphasize(
218+
uppercase( "After app bootstrap." )
219+
);
220+
221+
}
222+
);
223+
224+
// Lazy-loaded service.
225+
app.service(
226+
"util",
227+
function( emphasize ) {
228+
229+
this.emphasize = emphasize;
230+
231+
}
232+
);
233+
234+
// Lazy-loaded factory.
235+
app.factory(
236+
"emphasize",
237+
function() {
238+
239+
return(
240+
function( value ) {
241+
242+
return( value.replace( /\.$/, "!!!!" ) );
243+
244+
}
245+
);
246+
247+
}
248+
);
249+
250+
// Lazy-loaded value.
251+
app.value(
252+
"uppercase",
253+
function( value ) {
254+
255+
return( value.toString().toUpperCase() );
256+
257+
}
258+
);
259+
260+
// Lazy-loaded directive.
261+
app.directive(
262+
"bnItalics",
263+
function() {
264+
265+
return(
266+
function( $scope, element ) {
267+
268+
element.css( "font-style", "italic" );
269+
270+
}
271+
);
272+
273+
}
274+
);
275+
276+
}
277+
278+
279+
</script>
280+
281+
</body>
282+
</html>

‎index.htm

+3
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ <h1>
1313
</h1>
1414

1515
<ol>
16+
<li>
17+
<a href="./demos/loading-angularjs-after-bootstrap/">Loading AngularJS Components After Application Bootstrap</a>
18+
</li>
1619
<li>
1720
<a href="./demos/requirejs-service-angularjs/">Creating a RequireJS Service For AngularJS</a>
1821
</li>

0 commit comments

Comments
 (0)