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

docs(ngmodule): add plunker images #2209

Merged
merged 1 commit into from
Aug 27, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions public/docs/ts/latest/guide/ngmodule.jade
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand All @@ -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.

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/resources/images/plunker/click-to-run.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 7 additions & 4 deletions public/resources/js/directives/live-example.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -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
Expand Down