Skip to content

Commit 044544d

Browse files
bennadelbennadel
committed
Got it working.
1 parent 16e1917 commit 044544d

File tree

6 files changed

+215
-139
lines changed

6 files changed

+215
-139
lines changed

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

+125-64
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8" />
55

66
<title>
7-
Loading AngularJS Components After Application Bootstrap
7+
Loading AngularJS Components With RequireJS After Application Bootstrap
88
</title>
99

1010
<style type="text/css">
@@ -24,7 +24,7 @@
2424
<body ng-controller="AppController">
2525

2626
<h1>
27-
Loading AngularJS Components After Application Bootstrap
27+
Loading AngularJS Components With RequireJS After Application Bootstrap
2828
</h1>
2929

3030
<p>
@@ -38,20 +38,20 @@ <h1>
3838
bootstrapped.
3939
-->
4040
<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-
41+
42+
<div ng-switch-when="before">
4543

46-
<!-- BEGIN: Templates For ngInclude. -->
47-
<script type="text/ng-template" id="before.htm">
44+
<p>
45+
Before app bootstrap.
46+
</p>
4847

49-
<p>
50-
Before app bootstrap.
51-
</p>
48+
</div>
49+
50+
<div ng-switch-when="after" ng-include=" 'after.htm' ">
51+
<!-- To be poprulated with the Lazy module content. -->
52+
</div>
5253

53-
</script>
54-
<!-- END: Templates For ngInclude. -->
54+
</div>
5555

5656

5757
<!-- Load jQuery and AngularJS. -->
@@ -81,12 +81,6 @@ <h1>
8181
app.config(
8282
function( $controllerProvider, $provide, $compileProvider ) {
8383

84-
// Since the "shorthand" methods for component
85-
// definitions are no longer valid, we can just
86-
// override them to use the providers for post-
87-
// bootstrap loading.
88-
console.log( "Config method executed." );
89-
9084
// Let's keep the older references.
9185
app._controller = app.controller;
9286
app._service = app.service;
@@ -146,53 +140,10 @@ <h1>
146140
// -------------------------------------------------- //
147141

148142

149-
app.run(
150-
function( $rootScope, $templateCache, $q ) {
151-
152-
$rootScope.withLazyModule = function( callback ) {
153-
154-
require(
155-
[
156-
"../../vendor/require/text!lazy.htm",
157-
"lazy"
158-
],
159-
function( templates ) {
160-
161-
$( templates ).each(
162-
function() {
163-
164-
var template = $( this );
165-
166-
$templateCache.put( template.attr( "id" ), template.html() );
167-
168-
}
169-
);
170-
171-
$rootScope.$apply( callback );
172-
173-
}
174-
);
175-
176-
177-
};
178-
179-
}
180-
);
181-
182-
183-
// -------------------------------------------------- //
184-
// -------------------------------------------------- //
185-
186-
187143
// I control the root of the application.
188144
app.controller(
189145
"AppController",
190-
function( $scope ) {
191-
192-
// Since this Controller will be instantiated once
193-
// the application is bootstrapped, let's log it to
194-
// the console so we can see the timing.
195-
console.log( "Controller instantiated (after bootstrap)." );
146+
function( $scope, withLazyModule ) {
196147

197148
// I determine which view is rendered.
198149
$scope.subview = "before";
@@ -208,14 +159,28 @@ <h1>
208159

209160
if ( $scope.subview === "before" ) {
210161

211-
$scope.withLazyModule(
162+
// Once the "lazy" module has been loaded,
163+
// then show the corresponding view.
164+
withLazyModule(
212165
function() {
213166

214167
$scope.subview = "after";
215168

216169
}
217170
);
218171

172+
// The lazy-load of the module returns a
173+
// promise. This is here just to demonstrate
174+
// that multiple bindings can listen for the
175+
// resolution or rejection of the lazy module.
176+
withLazyModule().then(
177+
function() {
178+
179+
console.log( "Lazy module loaded." );
180+
181+
}
182+
);
183+
219184
} else {
220185

221186
$scope.subview = "before";
@@ -228,6 +193,102 @@ <h1>
228193
);
229194

230195

196+
// -------------------------------------------------- //
197+
// -------------------------------------------------- //
198+
199+
200+
// I load the "Lazy" module and resolve the returned Promise
201+
// when the components and the relevant templates have been
202+
// loaded.
203+
app.factory(
204+
"withLazyModule",
205+
function( $rootScope, $templateCache, $q ) {
206+
207+
var deferred = $q.defer();
208+
var promise = null;
209+
210+
function loadModule( successCallback, errorCallback ) {
211+
212+
successCallback = ( successCallback || angular.noop );
213+
errorCallback = ( errorCallback || angular.noop );
214+
215+
// If the module has already been loaded then
216+
// simply bind the handlers to the existing promise.
217+
// No need to try and load the files again.
218+
if ( promise ) {
219+
220+
return(
221+
promise.then( successCallback, errorCallback )
222+
);
223+
224+
}
225+
226+
promise = deferred.promise;
227+
228+
// Wire the callbacks into the deferred outcome.
229+
promise.then( successCallback, errorCallback );
230+
231+
// Load the module templates and components.
232+
// --
233+
// The first dependency here is an HTML file which
234+
// is loaded using the text! plugin. This will pass
235+
// the value through as an HTML string.
236+
require(
237+
[
238+
"../../vendor/require/text!lazy.htm",
239+
"lazy.js"
240+
],
241+
function requrieSuccess( templatesHtml ) {
242+
243+
// Fill the template cache. The file content
244+
// is expected to be a list of top level
245+
// Script tags.
246+
$( templatesHtml ).each(
247+
function() {
248+
249+
var template = $( this );
250+
var id = template.attr( "id" );
251+
var content = template.html();
252+
253+
$templateCache.put( id, content );
254+
255+
}
256+
);
257+
258+
// Module loaded, resolve deferred.
259+
$rootScope.$apply(
260+
function() {
261+
262+
deferred.resolve();
263+
264+
}
265+
);
266+
267+
},
268+
function requireError( error ) {
269+
270+
// Module load failed, reject deferred.
271+
$rootScope.$apply(
272+
function() {
273+
274+
deferred.reject( error );
275+
276+
}
277+
);
278+
279+
}
280+
);
281+
282+
return( promise );
283+
284+
}
285+
286+
return( loadModule );
287+
288+
}
289+
);
290+
291+
231292
</script>
232293

233294
</body>

‎demos/loading-angularjs-with-requirejs-after-bootstrap/lazy.htm

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!--
2+
This templates collection is intended to be a top-level list of
3+
Script-tag based templates used to populate the AngularJS template
4+
cache. Each of the script tags must have type[text/ng-template]
5+
and an ID that matches the requested URL.
6+
-->
7+
8+
<script type="text/ng-template" id="after.htm">
9+
10+
<p ng-controller="LazyController" bn-italics>
11+
{{ message }}
12+
</p>
13+
14+
</script>

‎demos/loading-angularjs-with-requirejs-after-bootstrap/lazy.js

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
// This component collection is intended to be all the controllers,
2+
// services, factories, and directives (etc) that are required to
3+
// operate the "Lazy" module.
4+
// --
5+
// NOTE: We are not actually creating a "module" (as in angular.module)
6+
// since that would not work after bootstrapping.
7+
8+
9+
// Lazy-loaded controller.
10+
app.controller(
11+
"LazyController",
12+
function( $scope, uppercase, util ) {
13+
14+
$scope.message = util.emphasize(
15+
uppercase( "After app bootstrap." )
16+
);
17+
18+
}
19+
);
20+
21+
22+
// Lazy-loaded service.
23+
app.service(
24+
"util",
25+
function( emphasize ) {
26+
27+
this.emphasize = emphasize;
28+
29+
}
30+
);
31+
32+
33+
// Lazy-loaded factory.
34+
app.factory(
35+
"emphasize",
36+
function() {
37+
38+
return(
39+
function( value ) {
40+
41+
return( value.replace( /\.$/, "!!!!" ) );
42+
43+
}
44+
);
45+
46+
}
47+
);
48+
49+
50+
// Lazy-loaded value.
51+
app.value(
52+
"uppercase",
53+
function( value ) {
54+
55+
return( value.toString().toUpperCase() );
56+
57+
}
58+
);
59+
60+
61+
// Lazy-loaded directive.
62+
app.directive(
63+
"bnItalics",
64+
function() {
65+
66+
return(
67+
function( $scope, element ) {
68+
69+
element.css( "font-style", "italic" );
70+
71+
}
72+
);
73+
74+
}
75+
);

‎demos/loading-angularjs-with-requirejs/lazy.htm

-7
This file was deleted.

0 commit comments

Comments
 (0)