docs(ngmodule): add plunker images (#2209)

This commit is contained in:
Ward Bell 2016-08-27 00:45:25 -07:00 committed by GitHub
parent b992c55e42
commit e25a1111e0
8 changed files with 15 additions and 11 deletions

View File

@ -141,7 +141,7 @@ a#bootstrap
:marked
The samples in this chapter demonstrate the dynamic bootstrapping approach.
<live-example embedded plnkr="minimal.0">Try the live example.</live-example>
<live-example embedded plnkr="minimal.0" img="devguide/ngmodule/minimal-plunker.png">Try the live example.</live-example>
### Static bootstrapping with the Ahead-Of-Time (AOT) compiler
@ -443,10 +443,10 @@ a#application-scoped-providers
:marked
Try the example:
<live-example embedded plnkr="contact.1b"></live-example>
<live-example embedded plnkr="contact.1b" img="devguide/ngmodule/contact-1b-plunker.png"></live-example>
a#resolve-conflicts
.l-main-section
.l-main-section
:marked
## Resolve directive conflicts
@ -617,7 +617,7 @@ a#feature-modules
Try this `ContactModule` version of the sample.
<live-example embedded plnkr="contact.2">Try the live example.</live-example>
<live-example embedded plnkr="contact.2" img="devguide/ngmodule/contact-2-plunker.png">Try the live example.</live-example>
a#lazy-load
.l-main-section
@ -630,7 +630,8 @@ a#lazy-load
Their specifics aren't important to the story and we won't discuss every line of code.
.l-sub-section
:marked
Examine and download the complete source for this version from the <live-example plnkr="pre-shared.3">live example.</live-example>
Examine and download the complete source for this version from the
<live-example plnkr="pre-shared.3" img="devguide/ngmodule/v3-plunker.png">live example.</live-example>
:marked
Some facets of the current application merit discussion.
@ -785,7 +786,7 @@ a#hero-module
The `CrisisModule` is much the same. There's nothing more to say that's new.
<live-example embedded plnkr="pre-shared.3">Try the live example.</live-example>
<live-example embedded plnkr="pre-shared.3" img="devguide/ngmodule/v3-plunker.png">Try the live example.</live-example>
a#shared-module
.l-main-section
@ -1038,7 +1039,7 @@ a#prevent-reimport
### Conclusion
You made it! You can examine and download the complete source for this final version from the live example.
<live-example embedded></live-example>
<live-example embedded img="devguide/ngmodule/final-plunker.png"></live-example>
### Frequently Asked Questions

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

View File

@ -32,11 +32,11 @@ angularIO.directive('liveExample', ['$location', function ($location) {
function span(text) { return '<span>' + text + '</span>'; }
function embeddedTemplate(src) {
function embeddedTemplate(src, img) {
return '<div ng-if="embeddedShow">' +
'<iframe frameborder="0" width="100%" height="100%" src="' + src + '"></iframe>' +
'</div>' +
'<img ng-click="toggleEmbedded()" ng-if="!embeddedShow" src="/resources/images/plunker/placeholder.png" alt="plunker">';
'<img ng-click="toggleEmbedded()" ng-if="!embeddedShow" src="' + img + '" alt="plunker">';
}
return {
@ -48,6 +48,8 @@ angularIO.directive('liveExample', ['$location', function ($location) {
var embedded = attrs.hasOwnProperty('embedded');
var plnkr = embedded ? 'eplnkr' : 'plnkr';
var href, template;
var imageBase = '/resources/images/';
var defaultImg = 'plunker/placeholder.png';
if (attrs.plnkr) {
plnkr = attrs.plnkr + '.' + plnkr;
@ -58,8 +60,9 @@ angularIO.directive('liveExample', ['$location', function ($location) {
var exLang = isForDart ? 'dart' : isForJs ? 'js' : 'ts';
if (embedded && !isForDart) {
href = '/resources/live-examples/' + ex + '/' + exLang + '/' + plnkr + '.html'
template = embeddedTemplate(href);
href = '/resources/live-examples/' + ex + '/' + exLang + '/' + plnkr + '.html';
img = imageBase + (attrs.img || defaultImg);
template = embeddedTemplate(href, img);
} else {
var href = isForDart
? 'http://angular-examples.github.io/' + ex