Skip to content

Commit c9200a5

Browse files
bennadelbennadel
committed
Creating a run block in ng2.
1 parent 4822655 commit c9200a5

2 files changed

Lines changed: 160 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Creating A "Run Block" In AngularJS 2 Beta 8](http://bennadel.github.io/JavaScript-Demos/demos/run-block-angular2/)
1314
* [Providing Default Values For The Safe Navigation Operator In Angular 2 Beta 8](http://bennadel.github.io/JavaScript-Demos/demos/safe-navigation-default-value-angular2/)
1415
* [How Injection Method Affects ViewChild Queries In Angular 2 Beta 8](http://bennadel.github.io/JavaScript-Demos/demos/view-child-injection-angular2/)
1516
* [Constructor vs. Property QueryList Injection In Angular 2 Beta 8](http://bennadel.github.io/JavaScript-Demos/demos/query-list-injection-angular2/)

‎demos/run-block-angular2/index.htm‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Creating A "Run Block" In AngularJS 2 Beta 8
8+
</title>
9+
</head>
10+
<body>
11+
12+
<h1>
13+
Creating A "Run Block" In AngularJS 2 Beta 8
14+
</h1>
15+
16+
<my-app>
17+
Loading...
18+
</my-app>
19+
20+
<!-- Load demo scripts. -->
21+
<script type="text/javascript" src="../../vendor/angularjs-2-beta/8/es6-shim.min.js"></script>
22+
<script type="text/javascript" src="../../vendor/angularjs-2-beta/8/Rx.umd.min.js"></script>
23+
<script type="text/javascript" src="../../vendor/angularjs-2-beta/8/angular2-polyfills.min.js"></script>
24+
<script type="text/javascript" src="../../vendor/angularjs-2-beta/8/angular2-all.umd.js"></script>
25+
<!-- AlmondJS - minimal implementation of RequireJS. -->
26+
<script type="text/javascript" src="../../vendor/angularjs-2-beta/8/almond.js"></script>
27+
<script type="text/javascript">
28+
29+
// Defer bootstrapping until all of the components have been declared.
30+
// --
31+
// NOTE: Not all components have to be required here since they will be
32+
// implicitly required by other components.
33+
requirejs(
34+
[ /* Using require() for better readability. */ ],
35+
function run() {
36+
37+
var App = require( "App" );
38+
var MyService = require( "MyService" );
39+
40+
ng.platform.browser.bootstrap(
41+
App,
42+
[
43+
// MyService is just a service like any other - we are telling
44+
// Angular to use the MyService class any time another context
45+
// requires the MyService dependency-injection token.
46+
// --
47+
// NOTE: Due to its nature, none of the components within the
48+
// component tree require this service; nor do any of the other
49+
// services within the component tree. As such, this service
50+
// would normally never get instantiated within the Application.
51+
// But........
52+
MyService,
53+
54+
// Here, we're using the APP_INITIALIZER multi-token to provide
55+
// additional factory functions that can be run after the app is
56+
// initialized, but before the root component is mounted. Much
57+
// like the .run() blocks in AngularJS 1.x, this allows us to
58+
// instantiate services that may otherwise not be required by
59+
// any particular component.
60+
ng.core.provide(
61+
ng.core.APP_INITIALIZER,
62+
{
63+
// The factory function plays two roles. On the one
64+
// hand, it forces the MyService class to be instantiated
65+
// as a service. And, on the other hand, it returns the
66+
// "run block" that Angular will invoke before the root
67+
// component is mounted.
68+
useFactory: function( myService ) {
69+
70+
console.log( "Run block factory method executed." );
71+
72+
return(
73+
function runBlock() {
74+
75+
console.log( "Run block invoked." );
76+
77+
}
78+
);
79+
80+
},
81+
deps: [ MyService ],
82+
multi: true
83+
}
84+
)
85+
]
86+
);
87+
88+
}
89+
);
90+
91+
92+
// --------------------------------------------------------------------------- //
93+
// --------------------------------------------------------------------------- //
94+
95+
96+
// I control the root of the application.
97+
define(
98+
"App",
99+
function registerApp() {
100+
101+
// Define the App component metadata.
102+
ng.core
103+
.Component({
104+
selector: "my-app",
105+
template:
106+
`
107+
Spooooon!
108+
`
109+
})
110+
.Class({
111+
constructor: AppController
112+
})
113+
;
114+
115+
return( AppController );
116+
117+
118+
// I control the App component.
119+
function AppController() {
120+
121+
console.log( "App component instantiated." );
122+
123+
}
124+
125+
}
126+
);
127+
128+
129+
// --------------------------------------------------------------------------- //
130+
// --------------------------------------------------------------------------- //
131+
132+
133+
// I provide the MyService service.
134+
define(
135+
"MyService",
136+
function registerMyService() {
137+
138+
MyService.parameters = [
139+
new ng.core.Inject( ng.core.ExceptionHandler )
140+
];
141+
142+
return( MyService );
143+
144+
145+
// Notice that the service accepts another service that is going to be
146+
// provided by the Angular dependency-injection system.
147+
function MyService( exceptionHandler ) {
148+
149+
console.log( "MyService instantiated with", exceptionHandler );
150+
151+
}
152+
153+
}
154+
);
155+
156+
</script>
157+
158+
</body>
159+
</html>

0 commit comments

Comments
 (0)