fix(index): display code example corretly

This commit fixes the displaying of the „name“ template variable (see
screenshot below) in the code example on the front page.

https://goo.gl/qcLf5X
This commit is contained in:
Jacob Müller 2015-06-03 12:24:26 +02:00 committed by Alex Eagle
parent 67851e3513
commit 45d136e327
2 changed files with 12 additions and 11 deletions

View File

@ -1,6 +1,6 @@
.grid-fluid.l-space-bottom-8 .grid-fluid.l-space-bottom-8
.c7 .c7
h3.text-headline Build Incredible Applications h3.text-headline Build Incredible Applications
p.text-body Angular is a development platform for creating applications using modern web standards. Angular includes a <a href="/features.html">wealth of essential features</a> such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn. p.text-body Angular is a development platform for creating applications using modern web standards. Angular includes a <a href="/features.html">wealth of essential features</a> such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.
.c5.text-center .c5.text-center
img(src="/resources/images/logos/html5/html5.png" alt="Modern Web Standards") img(src="/resources/images/logos/html5/html5.png" alt="Modern Web Standards")
@ -11,17 +11,16 @@
h3.text-headline Start Quick, Build Fast h3.text-headline Start Quick, Build Fast
p.text-body Express your ideas with clean, understandable code. Angular is simple to build on, easy to change, and friendly to the way UX designers work. Create a UI that is beautiful by default, with material design and support for web components. Angular takes <a href="/docs/js/latest/quickstart.html">just minutes to learn</a>. p.text-body Express your ideas with clean, understandable code. Angular is simple to build on, easy to change, and friendly to the way UX designers work. Create a UI that is beautiful by default, with material design and support for web components. Angular takes <a href="/docs/js/latest/quickstart.html">just minutes to learn</a>.
.c6 .c6
pre.prettyprint.linenums.is-showcase code-example(language="javascript" format="linenums" showcase="true").
code. @Component({selector: 'my-app'})
@Component({selector: 'my-app'}) @View({template: '&lt;h1&gt;Hi {{ name }}&lt;/h1&gt;'})
@View({template: '&lt;h1&gt;Hi {{ name }}&lt;/h1&gt;'})
// Component controller // Component controller
class MyAppComponent { class MyAppComponent {
constructor() { constructor() {
this.name = 'Ali'; this.name = 'Ali';
}
} }
}
.grid-fluid.l-space-bottom-8 .grid-fluid.l-space-bottom-8
.c7 .c7

View File

@ -11,7 +11,9 @@ angularIO.directive('codeExample', function() {
compile: function(tElement, attrs) { compile: function(tElement, attrs) {
var html = (attrs.escape === "html") ? _.escape(tElement.html()) : tElement.html(); var html = (attrs.escape === "html") ? _.escape(tElement.html()) : tElement.html();
var template = '<pre class="prettyprint ' + attrs.format + ' lang-' + attrs.language + '">' + var classes = 'prettyprint ' + attrs.format + ' lang-' + attrs.language +
(attrs.showcase === 'true' ? ' is-showcase' : '');
var template = '<pre class="' + classes + '">' +
'<code ng-non-bindable>' + html + '</code>' + '<code ng-non-bindable>' + html + '</code>' +
'</pre>'; '</pre>';