Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit e25a111

Browse files
authored
docs(ngmodule): add plunker images (#2209)
1 parent b992c55 commit e25a111

File tree

8 files changed

+15
-11
lines changed

8 files changed

+15
-11
lines changed

Diff for: public/docs/ts/latest/guide/ngmodule.jade

+8-7
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ a#bootstrap
141141
:marked
142142
The samples in this chapter demonstrate the dynamic bootstrapping approach.
143143

144-
<live-example embedded plnkr="minimal.0">Try the live example.</live-example>
144+
<live-example embedded plnkr="minimal.0" img="devguide/ngmodule/minimal-plunker.png">Try the live example.</live-example>
145145

146146

147147
### Static bootstrapping with the Ahead-Of-Time (AOT) compiler
@@ -443,10 +443,10 @@ a#application-scoped-providers
443443

444444
:marked
445445
Try the example:
446-
<live-example embedded plnkr="contact.1b"></live-example>
446+
<live-example embedded plnkr="contact.1b" img="devguide/ngmodule/contact-1b-plunker.png"></live-example>
447447

448448
a#resolve-conflicts
449-
.l-main-section
449+
.l-main-section
450450
:marked
451451
## Resolve directive conflicts
452452

@@ -617,7 +617,7 @@ a#feature-modules
617617

618618
Try this `ContactModule` version of the sample.
619619

620-
<live-example embedded plnkr="contact.2">Try the live example.</live-example>
620+
<live-example embedded plnkr="contact.2" img="devguide/ngmodule/contact-2-plunker.png">Try the live example.</live-example>
621621

622622
a#lazy-load
623623
.l-main-section
@@ -630,7 +630,8 @@ a#lazy-load
630630
Their specifics aren't important to the story and we won't discuss every line of code.
631631
.l-sub-section
632632
:marked
633-
Examine and download the complete source for this version from the <live-example plnkr="pre-shared.3">live example.</live-example>
633+
Examine and download the complete source for this version from the
634+
<live-example plnkr="pre-shared.3" img="devguide/ngmodule/v3-plunker.png">live example.</live-example>
634635
:marked
635636
Some facets of the current application merit discussion.
636637

@@ -785,7 +786,7 @@ a#hero-module
785786

786787
The `CrisisModule` is much the same. There's nothing more to say that's new.
787788

788-
<live-example embedded plnkr="pre-shared.3">Try the live example.</live-example>
789+
<live-example embedded plnkr="pre-shared.3" img="devguide/ngmodule/v3-plunker.png">Try the live example.</live-example>
789790

790791
a#shared-module
791792
.l-main-section
@@ -1038,7 +1039,7 @@ a#prevent-reimport
10381039
### Conclusion
10391040

10401041
You made it! You can examine and download the complete source for this final version from the live example.
1041-
<live-example embedded></live-example>
1042+
<live-example embedded img="devguide/ngmodule/final-plunker.png"></live-example>
10421043

10431044
### Frequently Asked Questions
10441045

Loading
22.9 KB
Loading
22.3 KB
Loading
19.7 KB
Loading
25 KB
Loading

Diff for: public/resources/images/plunker/click-to-run.png

6.87 KB
Loading

Diff for: public/resources/js/directives/live-example.js

+7-4
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,11 @@ angularIO.directive('liveExample', ['$location', function ($location) {
3232

3333
function span(text) { return '<span>' + text + '</span>'; }
3434

35-
function embeddedTemplate(src) {
35+
function embeddedTemplate(src, img) {
3636
return '<div ng-if="embeddedShow">' +
3737
'<iframe frameborder="0" width="100%" height="100%" src="' + src + '"></iframe>' +
3838
'</div>' +
39-
'<img ng-click="toggleEmbedded()" ng-if="!embeddedShow" src="/resources/images/plunker/placeholder.png" alt="plunker">';
39+
'<img ng-click="toggleEmbedded()" ng-if="!embeddedShow" src="' + img + '" alt="plunker">';
4040
}
4141

4242
return {
@@ -48,6 +48,8 @@ angularIO.directive('liveExample', ['$location', function ($location) {
4848
var embedded = attrs.hasOwnProperty('embedded');
4949
var plnkr = embedded ? 'eplnkr' : 'plnkr';
5050
var href, template;
51+
var imageBase = '/resources/images/';
52+
var defaultImg = 'plunker/placeholder.png';
5153

5254
if (attrs.plnkr) {
5355
plnkr = attrs.plnkr + '.' + plnkr;
@@ -58,8 +60,9 @@ angularIO.directive('liveExample', ['$location', function ($location) {
5860
var exLang = isForDart ? 'dart' : isForJs ? 'js' : 'ts';
5961

6062
if (embedded && !isForDart) {
61-
href = '/resources/live-examples/' + ex + '/' + exLang + '/' + plnkr + '.html'
62-
template = embeddedTemplate(href);
63+
href = '/resources/live-examples/' + ex + '/' + exLang + '/' + plnkr + '.html';
64+
img = imageBase + (attrs.img || defaultImg);
65+
template = embeddedTemplate(href, img);
6366
} else {
6467
var href = isForDart
6568
? 'http://angular-examples.github.io/' + ex

0 commit comments

Comments
 (0)