Permalink
Browse files

ES6

  • Loading branch information...
1 parent 1a762ef commit b4bd23b1a9b685ccc71a709fe07f95fe7c2d7c9a @mlynch mlynch committed Apr 25, 2015
Showing with 81 additions and 2 deletions.
  1. +0 −1 404.html
  2. +7 −0 _includes/sidebar.html
  3. +19 −0 css/style.css
  4. +33 −0 es6/classes/index.md
  5. 0 es6/index.md
  6. +20 −0 es6/template-strings/index.md
  7. +2 −1 templates/index.md
View
@@ -5,6 +5,5 @@
---
<div class="page">
- <h1 class="page-title">404: Page not found</h1>
<p class="lead">Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. <a href="{{ site.baseurl }}">Head back home</a> to try finding it again.</p>
</div>
@@ -5,5 +5,12 @@
<li><a href="/components/">Components</a></li>
<li><a href="/templates/">Templates</a></li>
<li><a href="/forms/">Forms</a></li>
+
+ <li class="group"><a href="/es6">ES6</a>
+ <ul>
+ <li><a href="/es6/classes">Classes</a></li>
+ <li><a href="/es6/template-strings">Template Strings</a></li>
+ </ul>
+ </li>
</ul>
</div>
View
@@ -33,6 +33,7 @@ body {
h1,h2,h3,h4,h5 {
text-transform: uppercase;
letter-spacing: 1px;
+ font-family: "AvenirNextLTPro-Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h2 {
font-size: 30px;
@@ -51,6 +52,24 @@ h3 {
#sidebar li {
list-style: none;
}
+#sidebar li a {
+ display: block;
+}
+
+#sidebar ul {
+ margin: 0;
+ padding: 0;
+ font-size: 100%;
+}
+#sidebar .group {
+ margin-top: 40px;
+}
+#sidebar .group > a {
+ font-family: "AvenirNextLTPro-Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ color: #111;
+ margin-bottom: 10px;
+ text-decoration: none;
+}
#footer {
margin-top: 20px;
View
@@ -0,0 +1,33 @@
+---
+layout: default
+title: ES6 Classes
+edit_link: https://github.com/driftyco/learn-angular2/edit/gh-pages/es6/classes/index.md
+tweet: "How to write ES6 Classes"
+---
+
+ES6 Classes will feel very natural for those with experience writing Object-Oriented code in languages like Java and C#. Here's a simple example:
+
+```javascript
+class Beer {
+}
+
+class SpottedCow extends Beer {
+ constructor() {
+ this.deliciousness = 50;
+ this.locations = 'Wisconsin';
+ this.name = 'Spotted Cow';
+ }
+}
+
+class MillerLite extends Beer {
+ constructor() {
+ this.deliciousness = 10;
+ this.locations = 'anywhere';
+ this.name = 'Miller Lite';
+ }
+}
+
+let beer = new SpottedCow();
+
+console.log('I am drinking a delicious', beer.name, 'that is available', beer.location);
+```
View
No changes.
@@ -0,0 +1,20 @@
+---
+layout: default
+title: ES6 Classes
+edit_link: https://github.com/driftyco/learn-angular2/edit/gh-pages/es6/classes/index.md
+tweet: "Magical new ES6 Template Strings"
+---
+
+ES6 adds the ability to write long inline strings without having to use concatenation or other odd tricks. All we need to do is use backticks at the start and end of the string:
+
+```html
+let template = `
+ <div>
+ <h2>Rufferford's Travels</h2>
+ <p>
+ A most gripping tale of one dog's quest
+ for more flavors.
+ </p>
+ </div>
+`;
+```
View
@@ -21,5 +21,6 @@ Let's start with a very simple template that shows our name and our favorite thi
## Rendering
-To render a string, we can use the standard double-curly
+To render a string, we can use the standard double-curly syntax:
+

0 comments on commit b4bd23b

Please sign in to comment.