- {{ page.title }} · Learn Angular 2 -

diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 5008ddf..0000000 Binary files a/.DS_Store and /dev/null differ diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 04c89ef..0000000 --- a/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -.*.sw* -_site/ diff --git a/404.html b/404.html deleted file mode 100644 index d5c8ad8..0000000 --- a/404.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: default -title: "404: Page not found" -permalink: 404.html ---- - -

Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. Head back home to try finding it again.

diff --git a/CNAME b/CNAME deleted file mode 100644 index 02efced..0000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -learnangular2.com diff --git a/Gemfile b/Gemfile deleted file mode 100644 index 053c27d..0000000 --- a/Gemfile +++ /dev/null @@ -1,2 +0,0 @@ -source 'https://rubygems.org' -gem 'github-pages' diff --git a/Gemfile.lock b/Gemfile.lock deleted file mode 100644 index 509f817..0000000 --- a/Gemfile.lock +++ /dev/null @@ -1,126 +0,0 @@ -GEM - remote: https://rubygems.org/ - specs: - RedCloth (4.2.9) - activesupport (4.2.1) - i18n (~> 0.7) - json (~> 1.7, >= 1.7.7) - minitest (~> 5.1) - thread_safe (~> 0.3, >= 0.3.4) - tzinfo (~> 1.1) - blankslate (2.1.2.4) - celluloid (0.16.0) - timers (~> 4.0.0) - classifier-reborn (2.0.3) - fast-stemmer (~> 1.0) - coffee-script (2.4.1) - coffee-script-source - execjs - coffee-script-source (1.9.1.1) - colorator (0.1) - execjs (2.5.2) - fast-stemmer (1.0.2) - ffi (1.9.8) - gemoji (2.1.0) - github-pages (34) - RedCloth (= 4.2.9) - github-pages-health-check (~> 0.2) - jekyll (= 2.4.0) - jekyll-coffeescript (= 1.0.1) - jekyll-mentions (= 0.2.1) - jekyll-redirect-from (= 0.6.2) - jekyll-sass-converter (= 1.2.0) - jekyll-sitemap (= 0.8.1) - jemoji (= 0.4.0) - kramdown (= 1.5.0) - liquid (= 2.6.1) - maruku (= 0.7.0) - mercenary (~> 0.3) - pygments.rb (= 0.6.1) - rdiscount (= 2.1.7) - redcarpet (= 3.1.2) - terminal-table (~> 1.4) - github-pages-health-check (0.3.0) - net-dns (~> 0.6) - public_suffix (~> 1.4) - hitimes (1.2.2) - html-pipeline (1.9.0) - activesupport (>= 2) - nokogiri (~> 1.4) - i18n (0.7.0) - jekyll (2.4.0) - classifier-reborn (~> 2.0) - colorator (~> 0.1) - jekyll-coffeescript (~> 1.0) - jekyll-gist (~> 1.0) - jekyll-paginate (~> 1.0) - jekyll-sass-converter (~> 1.0) - jekyll-watch (~> 1.1) - kramdown (~> 1.3) - liquid (~> 2.6.1) - mercenary (~> 0.3.3) - pygments.rb (~> 0.6.0) - redcarpet (~> 3.1) - safe_yaml (~> 1.0) - toml (~> 0.1.0) - jekyll-coffeescript (1.0.1) - coffee-script (~> 2.2) - jekyll-gist (1.2.1) - jekyll-mentions (0.2.1) - html-pipeline (~> 1.9.0) - jekyll (~> 2.0) - jekyll-paginate (1.1.0) - jekyll-redirect-from (0.6.2) - jekyll (~> 2.0) - jekyll-sass-converter (1.2.0) - sass (~> 3.2) - jekyll-sitemap (0.8.1) - jekyll-watch (1.2.1) - listen (~> 2.7) - jemoji (0.4.0) - gemoji (~> 2.0) - html-pipeline (~> 1.9) - jekyll (~> 2.0) - json (1.8.2) - kramdown (1.5.0) - liquid (2.6.1) - listen (2.10.0) - celluloid (~> 0.16.0) - rb-fsevent (>= 0.9.3) - rb-inotify (>= 0.9) - maruku (0.7.0) - mercenary (0.3.5) - mini_portile (0.6.2) - minitest (5.6.0) - net-dns (0.8.0) - nokogiri (1.6.6.2) - mini_portile (~> 0.6.0) - parslet (1.5.0) - blankslate (~> 2.0) - posix-spawn (0.3.11) - public_suffix (1.5.1) - pygments.rb (0.6.1) - posix-spawn (~> 0.3.6) - yajl-ruby (~> 1.2.0) - rb-fsevent (0.9.4) - rb-inotify (0.9.5) - ffi (>= 0.5.0) - rdiscount (2.1.7) - redcarpet (3.1.2) - safe_yaml (1.0.4) - sass (3.4.13) - terminal-table (1.4.5) - thread_safe (0.3.5) - timers (4.0.1) - hitimes - toml (0.1.2) - parslet (~> 1.5.0) - tzinfo (1.2.2) - thread_safe (~> 0.1) - yajl-ruby (1.2.1) - -PLATFORMS - ruby - -DEPENDENCIES - github-pages diff --git a/LICENSE b/LICENSE deleted file mode 100644 index c4c708b..0000000 --- a/LICENSE +++ /dev/null @@ -1,13 +0,0 @@ -Copyright 2015-present Drifty Co. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. diff --git a/README.md b/README.md index 796876f..2b8e324 100644 --- a/README.md +++ b/README.md @@ -1,118 +1,2 @@ -# Hyde - -Hyde is a brazen two-column [Jekyll](http://jekyllrb.com) theme that pairs a prominent sidebar with uncomplicated content. It's based on [Poole](http://getpoole.com), the Jekyll butler. - -![Hyde screenshot](https://f.cloud.github.com/assets/98681/1831228/42af6c6a-7384-11e3-98fb-e0b923ee0468.png) - - -## Contents - -- [Usage](#usage) -- [Options](#options) - - [Sidebar menu](#sidebar-menu) - - [Sticky sidebar content](#sticky-sidebar-content) - - [Themes](#themes) - - [Reverse layout](#reverse-layout) -- [Development](#development) -- [Author](#author) -- [License](#license) - - -## Usage - -Hyde is a theme built on top of [Poole](https://github.com/poole/poole), which provides a fully furnished Jekyll setup—just download and start the Jekyll server. See [the Poole usage guidelines](https://github.com/poole/poole#usage) for how to install and use Jekyll. - - -## Options - -Hyde includes some customizable options, typically applied via classes on the `` element. - - -### Sidebar menu - -Create a list of nav links in the sidebar by assigning each Jekyll page the correct layout in the page's [front-matter](http://jekyllrb.com/docs/frontmatter/). - -``` ---- -layout: page -title: About ---- -``` - -**Why require a specific layout?** Jekyll will return *all* pages, including the `atom.xml`, and with an alphabetical sort order. To ensure the first link is *Home*, we exclude the `index.html` page from this list by specifying the `page` layout. - - -### Sticky sidebar content - -By default Hyde ships with a sidebar that affixes it's content to the bottom of the sidebar. You can optionally disable this by removing the `.sidebar-sticky` class from the sidebar's `.container`. Sidebar content will then normally flow from top to bottom. - -```html - - - - - -``` - - -### Themes - -Hyde ships with eight optional themes based on the [base16 color scheme](https://github.com/chriskempson/base16). Apply a theme to change the color scheme (mostly applies to sidebar and links). - -![Hyde in red](https://f.cloud.github.com/assets/98681/1831229/42b0b354-7384-11e3-8462-31b8df193fe5.png) - -There are eight themes available at this time. - -![Hyde theme classes](https://f.cloud.github.com/assets/98681/1817044/e5b0ec06-6f68-11e3-83d7-acd1942797a1.png) - -To use a theme, add anyone of the available theme classes to the `` element in the `default.html` layout, like so: - -```html - - ... - -``` - -To create your own theme, look to the Themes section of [included CSS file](https://github.com/poole/hyde/blob/master/public/css/hyde.css). Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors. - -### Reverse layout - -![Hyde with reverse layout](https://f.cloud.github.com/assets/98681/1831230/42b0d3ac-7384-11e3-8d54-2065afd03f9e.png) - -Hyde's page orientation can be reversed with a single class. - -```html - - ... - -``` - - -## Development - -Hyde has two branches, but only one is used for active development. - -- `master` for development. **All pull requests should be to submitted against `master`.** -- `gh-pages` for our hosted site, which includes our analytics tracking code. **Please avoid using this branch.** - - -## Author - -**Mark Otto** -- -- - - -## License - -Open sourced under the [MIT license](LICENSE.md). - -<3 +# learn-angular2 +A simple site for learning Angular 2 and ES6 diff --git a/_config.yml b/_config.yml deleted file mode 100644 index 17000df..0000000 --- a/_config.yml +++ /dev/null @@ -1,2 +0,0 @@ -markdown: redcarpet -highlighter: pygments diff --git a/_includes/head.html b/_includes/head.html deleted file mode 100644 index 6502278..0000000 --- a/_includes/head.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - {{ page.title }} · Learn Angular 2 - - - - - - - - - diff --git a/_includes/sidebar.html b/_includes/sidebar.html deleted file mode 100644 index 3499675..0000000 --- a/_includes/sidebar.html +++ /dev/null @@ -1,18 +0,0 @@ - diff --git a/_layouts/default.html b/_layouts/default.html deleted file mode 100644 index 51658d0..0000000 --- a/_layouts/default.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - {% include head.html %} - - - {% if page.edit_link %} -

- Suggest improvements -

- {% endif %} - -

- {% include sidebar.html %} -

- {% if page.tweet %} - - {% endif %} - {{ content }} -

- - - - - - - diff --git a/about.md b/about.md deleted file mode 100644 index 9b2605b..0000000 --- a/about.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -layout: page -title: About ---- - -

- Hey there! This page is included as an example. Feel free to customize it for your own use upon downloading. Carry on! -

- -In the novel, *The Strange Case of Dr. Jeykll and Mr. Hyde*, Mr. Poole is Dr. Jekyll's virtuous and loyal butler. Similarly, Poole is an upstanding and effective butler that helps you build Jekyll themes. It's made by [@mdo](https://twitter.com/mdo). - -There are currently two themes built on Poole: - -* [Hyde](http://hyde.getpoole.com) -* [Lanyon](http://lanyon.getpoole.com) - -Learn more and contribute on [GitHub](https://github.com/poole). - -## Setup - -Some fun facts about the setup of this project include: - -* Built for [Jekyll](http://jekyllrb.com) -* Developed on GitHub and hosted for free on [GitHub Pages](https://pages.github.com) -* Coded with [Sublime Text 2](http://sublimetext.com), an amazing code editor -* Designed and developed while listening to music like [Blood Bros Trilogy](https://soundcloud.com/maddecent/sets/blood-bros-series) - -Have questions or suggestions? Feel free to [open an issue on GitHub](https://github.com/poole/issues/new) or [ask me on Twitter](https://twitter.com/mdo). - -Thanks for reading! diff --git a/atom.xml b/atom.xml deleted file mode 100644 index 96c9681..0000000 --- a/atom.xml +++ /dev/null @@ -1,28 +0,0 @@ ---- -layout: null ---- - - - - - {{ site.title }} - - - {{ site.time | date_to_xmlschema }} - {{ site.url }} - - {{ site.author.name }} - {{ site.author.email }} - - - {% for post in site.posts %} - - {{ post.title }} - - {{ post.date | date_to_xmlschema }} - {{ site.url }}{{ post.id }} - {{ post.content | xml_escape }} - - {% endfor %} - - diff --git a/components/index.md b/components/index.md deleted file mode 100644 index 121f725..0000000 --- a/components/index.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -layout: default -title: Components -edit_link: https://github.com/driftyco/learn-angular2/edit/gh-pages/components/index.md -tweet: "How to use components in Angular 2" ---- - -In Angular 2, Components are the main way we build and specify elements and logic on the page. - -In Angular 1, we achieved this through directives, controllers, and scope. In Angular 2, all those concepts -are combined into Components. - -### A simple component - -Let's start with a very simple component that lists out our name: - -```javascript -import {Component, Template} from 'angular2/angular2' - -@Component({ - selector: 'my-component' -}) -@View({ - inline: "

Hello my name is {{name}}

" -}) -export class MyComponent { - constructor() { - this.name = 'Max' - } - sayMyName() { - console.log('My name is', this.name) - } -} -``` - diff --git a/css/normalize.css b/css/normalize.css deleted file mode 100644 index 81c6f31..0000000 --- a/css/normalize.css +++ /dev/null @@ -1,427 +0,0 @@ -/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -menu, -nav, -section, -summary { - display: block; -} - -/** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. - */ - -audio, -canvas, -progress, -video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address `[hidden]` styling not present in IE 8/9/10. - * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. - */ - -[hidden], -template { - display: none; -} - -/* Links - ========================================================================== */ - -/** - * Remove the gray background color from active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * Improve readability when focused and also mouse hovered in all browsers. - */ - -a:active, -a:hover { - outline: 0; -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -/** - * Address styling not present in Safari and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove border when inside `a` element in IE 8/9/10. - */ - -img { - border: 0; -} - -/** - * Correct overflow not hidden in IE 9/10/11. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -/** - * Address margin not present in IE 8/9 and Safari. - */ - -figure { - margin: 1em 40px; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; -} - -/** - * Contain overflow in all browsers. - */ - -pre { - overflow: auto; -} - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} - -/* Forms - ========================================================================== */ - -/** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. - */ - -/** - * 1. Correct color not being inherited. - * Known issue: affects color of disabled elements. - * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. - */ - -button, -input, -optgroup, -select, -textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ -} - -/** - * Address `overflow` set to `hidden` in IE 8/9/10/11. - */ - -button { - overflow: visible; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. - */ - -button, -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} - -/** - * Re-set default cursor for disabled elements. - */ - -button[disabled], -html input[disabled] { - cursor: default; -} - -/** - * Remove inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -input { - line-height: normal; -} - -/** - * It's recommended that you don't attempt to style these elements. - * Firefox's implementation doesn't respect box-sizing, padding, or width. - * - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Fix the cursor style for Chrome's increment/decrement buttons. For certain - * `font-size` values of the `input`, it causes the cursor style of the - * decrement button to change from `default` to `text`. - */ - -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome - * (include `-moz` to future-proof). - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; -} - -/** - * Remove inner padding and search cancel button in Safari and Chrome on OS X. - * Safari (but not Chrome) clips the cancel button when the search input has - * padding (and `textfield` appearance). - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ - -textarea { - overflow: auto; -} - -/** - * Don't inherit the `font-weight` (applied by a rule above). - * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. - */ - -optgroup { - font-weight: bold; -} - -/* Tables - ========================================================================== */ - -/** - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { - padding: 0; -} \ No newline at end of file diff --git a/css/skeleton.css b/css/skeleton.css deleted file mode 100644 index f28bf6c..0000000 --- a/css/skeleton.css +++ /dev/null @@ -1,418 +0,0 @@ -/* -* Skeleton V2.0.4 -* Copyright 2014, Dave Gamache -* www.getskeleton.com -* Free to use under the MIT license. -* http://www.opensource.org/licenses/mit-license.php -* 12/29/2014 -*/ - - -/* Table of contents -–––––––––––––––––––––––––––––––––––––––––––––––––– -- Grid -- Base Styles -- Typography -- Links -- Buttons -- Forms -- Lists -- Code -- Tables -- Spacing -- Utilities -- Clearing -- Media Queries -*/ - - -/* Grid -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.container { - position: relative; - width: 100%; - max-width: 960px; - margin: 0 auto; - padding: 0 20px; - box-sizing: border-box; } -.column, -.columns { - width: 100%; - float: left; - box-sizing: border-box; } - -/* For devices larger than 400px */ -@media (min-width: 400px) { - .container { - width: 85%; - padding: 0; } -} - -/* For devices larger than 550px */ -@media (min-width: 550px) { - .container { - width: 80%; } - .column, - .columns { - margin-left: 4%; } - .column:first-child, - .columns:first-child { - margin-left: 0; } - - .one.column, - .one.columns { width: 4.66666666667%; } - .two.columns { width: 13.3333333333%; } - .three.columns { width: 22%; } - .four.columns { width: 30.6666666667%; } - .five.columns { width: 39.3333333333%; } - .six.columns { width: 48%; } - .seven.columns { width: 56.6666666667%; } - .eight.columns { width: 65.3333333333%; } - .nine.columns { width: 74.0%; } - .ten.columns { width: 82.6666666667%; } - .eleven.columns { width: 91.3333333333%; } - .twelve.columns { width: 100%; margin-left: 0; } - - .one-third.column { width: 30.6666666667%; } - .two-thirds.column { width: 65.3333333333%; } - - .one-half.column { width: 48%; } - - /* Offsets */ - .offset-by-one.column, - .offset-by-one.columns { margin-left: 8.66666666667%; } - .offset-by-two.column, - .offset-by-two.columns { margin-left: 17.3333333333%; } - .offset-by-three.column, - .offset-by-three.columns { margin-left: 26%; } - .offset-by-four.column, - .offset-by-four.columns { margin-left: 34.6666666667%; } - .offset-by-five.column, - .offset-by-five.columns { margin-left: 43.3333333333%; } - .offset-by-six.column, - .offset-by-six.columns { margin-left: 52%; } - .offset-by-seven.column, - .offset-by-seven.columns { margin-left: 60.6666666667%; } - .offset-by-eight.column, - .offset-by-eight.columns { margin-left: 69.3333333333%; } - .offset-by-nine.column, - .offset-by-nine.columns { margin-left: 78.0%; } - .offset-by-ten.column, - .offset-by-ten.columns { margin-left: 86.6666666667%; } - .offset-by-eleven.column, - .offset-by-eleven.columns { margin-left: 95.3333333333%; } - - .offset-by-one-third.column, - .offset-by-one-third.columns { margin-left: 34.6666666667%; } - .offset-by-two-thirds.column, - .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } - - .offset-by-one-half.column, - .offset-by-one-half.columns { margin-left: 52%; } - -} - - -/* Base Styles -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -/* NOTE -html is set to 62.5% so that all the REM measurements throughout Skeleton -are based on 10px sizing. So basically 1.5rem = 15px :) */ -html { - font-size: 62.5%; } -body { - font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ - line-height: 1.6; - font-weight: 400; - font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #222; } - - -/* Typography -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -h1, h2, h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: 2rem; - font-weight: 300; } -h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} -h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } -h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } -h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } -h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } -h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } - -/* Larger than phablet */ -@media (min-width: 550px) { - h1 { font-size: 5.0rem; } - h2 { font-size: 4.2rem; } - h3 { font-size: 3.6rem; } - h4 { font-size: 3.0rem; } - h5 { font-size: 2.4rem; } - h6 { font-size: 1.5rem; } -} - -p { - margin-top: 0; } - - -/* Links -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -a { - color: #1EAEDB; } -a:hover { - color: #0FA0CE; } - - -/* Buttons -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.button, -button, -input[type="submit"], -input[type="reset"], -input[type="button"] { - display: inline-block; - height: 38px; - padding: 0 30px; - color: #555; - text-align: center; - font-size: 11px; - font-weight: 600; - line-height: 38px; - letter-spacing: .1rem; - text-transform: uppercase; - text-decoration: none; - white-space: nowrap; - background-color: transparent; - border-radius: 4px; - border: 1px solid #bbb; - cursor: pointer; - box-sizing: border-box; } -.button:hover, -button:hover, -input[type="submit"]:hover, -input[type="reset"]:hover, -input[type="button"]:hover, -.button:focus, -button:focus, -input[type="submit"]:focus, -input[type="reset"]:focus, -input[type="button"]:focus { - color: #333; - border-color: #888; - outline: 0; } -.button.button-primary, -button.button-primary, -input[type="submit"].button-primary, -input[type="reset"].button-primary, -input[type="button"].button-primary { - color: #FFF; - background-color: #33C3F0; - border-color: #33C3F0; } -.button.button-primary:hover, -button.button-primary:hover, -input[type="submit"].button-primary:hover, -input[type="reset"].button-primary:hover, -input[type="button"].button-primary:hover, -.button.button-primary:focus, -button.button-primary:focus, -input[type="submit"].button-primary:focus, -input[type="reset"].button-primary:focus, -input[type="button"].button-primary:focus { - color: #FFF; - background-color: #1EAEDB; - border-color: #1EAEDB; } - - -/* Forms -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -input[type="email"], -input[type="number"], -input[type="search"], -input[type="text"], -input[type="tel"], -input[type="url"], -input[type="password"], -textarea, -select { - height: 38px; - padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ - background-color: #fff; - border: 1px solid #D1D1D1; - border-radius: 4px; - box-shadow: none; - box-sizing: border-box; } -/* Removes awkward default styles on some inputs for iOS */ -input[type="email"], -input[type="number"], -input[type="search"], -input[type="text"], -input[type="tel"], -input[type="url"], -input[type="password"], -textarea { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; } -textarea { - min-height: 65px; - padding-top: 6px; - padding-bottom: 6px; } -input[type="email"]:focus, -input[type="number"]:focus, -input[type="search"]:focus, -input[type="text"]:focus, -input[type="tel"]:focus, -input[type="url"]:focus, -input[type="password"]:focus, -textarea:focus, -select:focus { - border: 1px solid #33C3F0; - outline: 0; } -label, -legend { - display: block; - margin-bottom: .5rem; - font-weight: 600; } -fieldset { - padding: 0; - border-width: 0; } -input[type="checkbox"], -input[type="radio"] { - display: inline; } -label > .label-body { - display: inline-block; - margin-left: .5rem; - font-weight: normal; } - - -/* Lists -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -ul { - list-style: circle inside; } -ol { - list-style: decimal inside; } -ol, ul { - padding-left: 0; - margin-top: 0; } -ul ul, -ul ol, -ol ol, -ol ul { - margin: 1.5rem 0 1.5rem 3rem; - font-size: 90%; } -li { - margin-bottom: 1rem; } - - -/* Code -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -code { - padding: .2rem .5rem; - margin: 0 .2rem; - font-size: 90%; - white-space: nowrap; - background: #F1F1F1; - border: 1px solid #E1E1E1; - border-radius: 4px; } -pre > code { - display: block; - padding: 1rem 1.5rem; - white-space: pre; } - - -/* Tables -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -th, -td { - padding: 12px 15px; - text-align: left; - border-bottom: 1px solid #E1E1E1; } -th:first-child, -td:first-child { - padding-left: 0; } -th:last-child, -td:last-child { - padding-right: 0; } - - -/* Spacing -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -button, -.button { - margin-bottom: 1rem; } -input, -textarea, -select, -fieldset { - margin-bottom: 1.5rem; } -pre, -blockquote, -dl, -figure, -table, -p, -ul, -ol, -form { - margin-bottom: 2.5rem; } - - -/* Utilities -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.u-full-width { - width: 100%; - box-sizing: border-box; } -.u-max-full-width { - max-width: 100%; - box-sizing: border-box; } -.u-pull-right { - float: right; } -.u-pull-left { - float: left; } - - -/* Misc -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -hr { - margin-top: 3rem; - margin-bottom: 3.5rem; - border-width: 0; - border-top: 1px solid #E1E1E1; } - - -/* Clearing -–––––––––––––––––––––––––––––––––––––––––––––––––– */ - -/* Self Clearing Goodness */ -.container:after, -.row:after, -.u-cf { - content: ""; - display: table; - clear: both; } - - -/* Media Queries -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -/* -Note: The best way to structure the use of media queries is to create the queries -near the relevant code. For example, if you wanted to change the styles for buttons -on small devices, paste the mobile query code up in the buttons section and style it -there. -*/ - - -/* Larger than mobile */ -@media (min-width: 400px) {} - -/* Larger than phablet (also point when grid becomes active) */ -@media (min-width: 550px) {} - -/* Larger than tablet */ -@media (min-width: 750px) {} - -/* Larger than desktop */ -@media (min-width: 1000px) {} - -/* Larger than Desktop HD */ -@media (min-width: 1200px) {} diff --git a/css/style.css b/css/style.css deleted file mode 100644 index 0a0778c..0000000 --- a/css/style.css +++ /dev/null @@ -1,81 +0,0 @@ -@font-face { - font-family: 'AvenirNextLTPro-Regular'; - src: url('http://code.ionicframework.com/assets/fonts/28882F_0_0.eot'); - src: url('http://code.ionicframework.com/assets/fonts/28882F_0_0.eot?#iefix') format('embedded-opentype'), url('http://code.ionicframework.com/assets/fonts/28882F_0_0.woff') format('woff'), url('http://code.ionicframework.com/assets/fonts/28882F_0_0.ttf') format('truetype'); } - -@font-face { - font-family: 'AvenirNextLTPro-Medium'; - src: url('http://code.ionicframework.com/assets/fonts/28882F_1_0.eot'); - src: url('http://code.ionicframework.com/assets/fonts/28882F_1_0.eot?#iefix') format('embedded-opentype'), url('http://code.ionicframework.com/assets/fonts/28882F_1_0.woff') format('woff'), url('http://code.ionicframework.com/assets/fonts/28882F_1_0.ttf') format('truetype'); } - -@font-face { - font-family: 'AvenirNextLTPro-UltLt'; - src: url('http://code.ionicframework.com/assets/fonts/29CC36_0_0.eot'); - src: url('http://code.ionicframework.com/assets/fonts/29CC36_0_0.eot?#iefix') format('embedded-opentype'), url('http://code.ionicframework.com/assets/fonts/29CC36_0_0.woff') format('woff'), url('http://code.ionicframework.com/assets/fonts/29CC36_0_0.ttf') format('truetype'); } - -/* Frieght Text Pro */ -@font-face { - font-family: 'FreightTextProBook-Regular'; - src: url('http://code.ionicframework.com/assets/fonts/29D26A_0_0.eot'); - src: url('http://code.ionicframework.com/assets/fonts/29D26A_0_0.eot?#iefix') format('embedded-opentype'), url('http://code.ionicframework.com/assets/fonts/29D26A_0_0.woff') format('woff'), url('http://code.ionicframework.com/assets/fonts/29D26A_0_0.ttf') format('truetype'); } - -@font-face { - font-family: 'FreightTextProMedium-Regular'; - src: url('http://code.ionicframework.com/assets/fonts/29D26A_1_0.eot'); - src: url('http://code.ionicframework.com/assets/fonts/29D26A_1_0.eot?#iefix') format('embedded-opentype'), url('http://code.ionicframework.com/assets/fonts/29D26A_1_0.woff') format('woff'), url('http://code.ionicframework.com/assets/fonts/29D26A_1_0.ttf') format('truetype'); } - -body { - font-family: Helvetica, arial, sans-serif; - padding: 40px 0; - font-family: "AvenirNextLTPro-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; -} - -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; -} -h3 { - font-size: 24px; -} - -#improve { - position: absolute; - right: 45px; - top: 45px; - z-index: 2; -} - -#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; - text-align: center; -} -#footer .container { - border-top: 1px solid #eee; - padding: 30px; -} diff --git a/css/syntax.css b/css/syntax.css deleted file mode 100644 index 0d84e83..0000000 --- a/css/syntax.css +++ /dev/null @@ -1,65 +0,0 @@ -.highlight .hll { background-color: #ffc; } -.highlight .c { color: #999; } /* Comment */ -.highlight .k { color: #069; } /* Keyword */ -.highlight .o { color: #555 } /* Operator */ -.highlight .cm { color: #09f; font-style: italic } /* Comment.Multiline */ -.highlight .cp { color: #099 } /* Comment.Preproc */ -.highlight .c1 { color: #999; } /* Comment.Single */ -.highlight .cs { color: #999; } /* Comment.Special */ -.highlight .gd { background-color: #fcc; border: 1px solid #c00 } /* Generic.Deleted */ -.highlight .ge { font-style: italic } /* Generic.Emph */ -.highlight .gr { color: #f00 } /* Generic.Error */ -.highlight .gh { color: #030; } /* Generic.Heading */ -.highlight .gi { background-color: #cfc; border: 1px solid #0c0 } /* Generic.Inserted */ -.highlight .go { color: #aaa } /* Generic.Output */ -.highlight .gp { color: #009; } /* Generic.Prompt */ -.highlight .gs { } /* Generic.Strong */ -.highlight .gu { color: #030; } /* Generic.Subheading */ -.highlight .gt { color: #9c6 } /* Generic.Traceback */ -.highlight .kc { color: #069; } /* Keyword.Constant */ -.highlight .kd { color: #069; } /* Keyword.Declaration */ -.highlight .kn { color: #069; } /* Keyword.Namespace */ -.highlight .kp { color: #069 } /* Keyword.Pseudo */ -.highlight .kr { color: #069; } /* Keyword.Reserved */ -.highlight .kt { color: #078; } /* Keyword.Type */ -.highlight .m { color: #f60 } /* Literal.Number */ -.highlight .s { color: #d44950 } /* Literal.String */ -.highlight .na { color: #4f9fcf } /* Name.Attribute */ -.highlight .nb { color: #366 } /* Name.Builtin */ -.highlight .nc { color: #0a8; } /* Name.Class */ -.highlight .no { color: #360 } /* Name.Constant */ -.highlight .nd { color: #99f } /* Name.Decorator */ -.highlight .ni { color: #999; } /* Name.Entity */ -.highlight .ne { color: #c00; } /* Name.Exception */ -.highlight .nf { color: #c0f } /* Name.Function */ -.highlight .nl { color: #99f } /* Name.Label */ -.highlight .nn { color: #0cf; } /* Name.Namespace */ -.highlight .nt { color: #2f6f9f; } /* Name.Tag */ -.highlight .nv { color: #033 } /* Name.Variable */ -.highlight .ow { color: #000; } /* Operator.Word */ -.highlight .w { color: #bbb } /* Text.Whitespace */ -.highlight .mf { color: #f60 } /* Literal.Number.Float */ -.highlight .mh { color: #f60 } /* Literal.Number.Hex */ -.highlight .mi { color: #f60 } /* Literal.Number.Integer */ -.highlight .mo { color: #f60 } /* Literal.Number.Oct */ -.highlight .sb { color: #c30 } /* Literal.String.Backtick */ -.highlight .sc { color: #c30 } /* Literal.String.Char */ -.highlight .sd { color: #c30; font-style: italic } /* Literal.String.Doc */ -.highlight .s2 { color: #c30 } /* Literal.String.Double */ -.highlight .se { color: #c30; } /* Literal.String.Escape */ -.highlight .sh { color: #c30 } /* Literal.String.Heredoc */ -.highlight .si { color: #a00 } /* Literal.String.Interpol */ -.highlight .sx { color: #c30 } /* Literal.String.Other */ -.highlight .sr { color: #3aa } /* Literal.String.Regex */ -.highlight .s1 { color: #c30 } /* Literal.String.Single */ -.highlight .ss { color: #fc3 } /* Literal.String.Symbol */ -.highlight .bp { color: #366 } /* Name.Builtin.Pseudo */ -.highlight .vc { color: #033 } /* Name.Variable.Class */ -.highlight .vg { color: #033 } /* Name.Variable.Global */ -.highlight .vi { color: #033 } /* Name.Variable.Instance */ -.highlight .il { color: #f60 } /* Literal.Number.Integer.Long */ - -.css .o, -.css .o + .nt, -.css .nt + .nt { color: #999; } - diff --git a/es6/classes/index.md b/es6/classes/index.md deleted file mode 100644 index 02fd500..0000000 --- a/es6/classes/index.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -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 { - sell(location) { - } -} - -class SpottedCow extends Beer { - constructor() { - this.deliciousness = 50; - this.locations = 'Wisconsin'; - this.name = 'Spotted Cow'; - } - sell(location) { - if(location !== 'Wisconsin') { - throw new JailTimeError(); - } - } -} - -class MillerLite extends Beer { - constructor() { - this.deliciousness = 10; - this.locations = 'anywhere'; - this.name = 'Miller Lite'; - } - sell(location) { - if(Location.hasSportsTeam(location)) { - return true; - } - // Enh, we'll sell anywhere - return true; - } -} - -let beer = new SpottedCow(); - -console.log('I am drinking a delicious', beer.name, 'that is available', beer.location); - -beer.sell(); -``` diff --git a/es6/index.md b/es6/index.md deleted file mode 100644 index e69de29..0000000 diff --git a/es6/template-strings/index.md b/es6/template-strings/index.md deleted file mode 100644 index 380439a..0000000 --- a/es6/template-strings/index.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -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 = ` -

Rufferford's Travels

- A most gripping tale of one dog's quest - for more flavors. -

-`; -``` diff --git a/es6/variables/index.md b/es6/variables/index.md deleted file mode 100644 index a084c6a..0000000 --- a/es6/variables/index.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -layout: default -title: ES6 Classes -edit_link: https://github.com/driftyco/learn-angular2/edit/gh-pages/es6/classes/index.md -tweet: "Understanding let and var in ES6" ---- - -In ES6, we have a new way of specifying variables: `let` - -## Var - -Before ES6, we only had `var` which would create a variable scoped to the nearest function. - -This was problematic because variables would leak into the rest of the function, especially when used with for loops. - -Take this ES5 example: - -```javascript -for(var i in thing) { -} -``` - -After the loop, `i` is still available! - -## Let - -With `let`, that is no longer an issue. Let creates a variable -that is only available in the nearest block. - -This is perfect for loops and closures: - -```javascript -for(let i in thing) { - // i is available -} - -// i is NOT available -``` - -In general, use `let` whenever possible. diff --git a/forms/ex1.png b/forms/ex1.png deleted file mode 100644 index 515e918..0000000 Binary files a/forms/ex1.png and /dev/null differ diff --git a/forms/index.md b/forms/index.md deleted file mode 100644 index 9fb0e50..0000000 --- a/forms/index.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -layout: default -title: Forms -edit_link: https://github.com/driftyco/learn-angular2/edit/gh-pages/forms/index.md -tweet: "Build great forms in Angular 2" ---- - -Forms are the cornerstone of any real app. In Angular 2, forms have changed quite a bit from their v1 counterpart. - -Where we used to use `ngModel` and map to our internal data model, in Angular 2 we more explicitly build forms and form controls. - -While it feels like more code to write, in practice it's easier to reason about than with v1, and we no longer -have to deal with frustrating ngModel and scope data problems. - -## Simple Form - -Let's start with a simple login form in HTML with Angular 2: - -```html - -``` - -And the corresponding component JS: - -```javascript - -import {Component, Template, Parent} from 'angular2/angular2' -import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms'; - -@Component({ - selector: 'login-page' -}) -@Template({ - url: 'pages/login.html', - directives: [View, FormDirectives] -}) -export class LoginPage { - constructor() { - var fb = new FormBuilder() - - this.loginForm = fb.group({ - email: ['', Validators.required], - password: ['', Validators.required], - }); - } - - doLogin(event) { - // Show the value of the form - console.log(this.loginForm.value); - - event.preventDefault(); - } -} - -``` - -When we run this, we are shown a simple login form with email and password: - -![ex](ex1.png) - -## FormBuilder - -The FormBuilder from the example above makes it easy for us to specify form controls and the various -validators we might want to apply to certain controls. - -In the example above, we are creating two inputs, an `email` and `password` field: - -```javascript -this.loginForm = fb.group({ - email: ['', Validators.required], - password: ['', Validators.required], -}); -``` - -## ControlGroup - -The `FormBuilder` creates instances of `ControlGroup`, which we refer to as a `form`. - -Instead of using the `FormBuilder`, we could also construct the `ControlGroup` manually: - -```javascript -this.loginForm = new ControlGroup({ - email: new Control("email", Validators.required), - password: new Control("password", Validators.required) -}); -``` - -In practice though, the `FormBuilder` is what we will use to quickly create forms. - -## Form Directives - -You'll notice the lack of `ngModel` anywhere in our form. Instead, we have the `control` decorators that -map certain inputs to our control objects: - -```html - -``` - -This "binds" the email input to the instance of our `email` control. - -## Custom validators - -We can build custom form validators as a simple function: - -```javascript -function containsMagicWord(c: Control) { - if(c.value.indexOf('magic') >= 0) { - return { - noMagic: true - } - } - - // Null means valid, believe it or not - return null -} - -this.loginForm = fb.group({ - email: ['', containsMagicWord] - password: ['', Validators.required], -}); -``` - -## Handling form values - -We can easily get the simple Javascript object value of our form, or the value of an individual control: - -```javascript -doLogin(event) { - // Show the value of the form - var formData = this.loginForm.value; - // { email: 'blah@blah.net', password: 'imnottelling1' } - - // Or, grab the value of one control: - var email = this.loginForm.controls.email.value - - event.preventDefault(); -} -``` - diff --git a/index.md b/index.md deleted file mode 100644 index 8df6e20..0000000 --- a/index.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -layout: default -title: Learn Angular 2 ---- - -![Angular2](https://angular.io/resources/images/logos/standard/shield-large.png) - -Angular 2 is the next version of Google's massively popular MV* framework for building complex -applications in the browser (and beyond). - -We hope these simple tutorials help you get up and running with Angular 2 quickly. - -**THIS IS A VERY EARLY VERSION AND IS NOT COMPLETE NOR PUBICLY ANNOUCNED** diff --git a/params.json b/params.json deleted file mode 100644 index a21a001..0000000 --- a/params.json +++ /dev/null @@ -1 +0,0 @@ -{"name":"Learn-angular2","tagline":"A simple site for learning Angular 2 and ES6","body":"### Welcome to GitHub Pages.\r\nThis automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:\r\n\r\n```\r\n$ cd your_repo_root/repo_name\r\n$ git fetch origin\r\n$ git checkout gh-pages\r\n```\r\n\r\nIf you're using the GitHub for Mac, simply sync your repository and you'll see the new branch.\r\n\r\n### Designer Templates\r\nWe've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved if it remained markdown format.\r\n\r\n### Rather Drive Stick?\r\nIf you prefer to not use the automatic generator, push a branch named `gh-pages` to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator written by our own Tom Preston-Werner. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.\r\n\r\n### Authors and Contributors\r\nYou can @mention a GitHub username to generate a link to their profile. The resulting `` element will link to the contributor's GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.\r\n\r\n### Support or Contact\r\nHaving trouble with Pages? Check out the documentation at https://help.github.com/pages or contact support@github.com and we’ll help you sort it out.\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."} \ No newline at end of file diff --git a/templates/index.md b/templates/index.md deleted file mode 100644 index aab3d2e..0000000 --- a/templates/index.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -layout: default -title: Templates -edit_link: https://github.com/driftyco/learn-angular2/edit/gh-pages/templates/index.md -tweet: "All about Templates in Angular 2" ---- - -Templates are very similar to templates in Angular 1, though there are many small syntactical changes that make it more clear what is happening. - -## A simple template - -Let's start with a very simple template that shows our name and our favorite thing: - -```html -{% raw %} -

- Hello my name is {{name}} and I like {{thing}} quite a lot. -

-{% endraw %} -``` - -## Rendering - -To render a string, we can use the standard double-curly syntax: - - diff --git a/why-angular2.md b/why-angular2.md deleted file mode 100644 index 7a5b983..0000000 --- a/why-angular2.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -layout: default -title: Learn Angular 2 ---- - -![Angular2](https://angular.io/resources/images/logos/standard/shield-large.png) - -Angular 2 is the next version of Google's massively popular MV* framework for building complex -applications in the browser (and beyond). - -When Angular 2 was announced in October 2014 at the ngEurope conference, the ngCommunity was up in arms: what did this mean for their favorite -framework they invested so much time into learning and building real things with? A lot of Angular developers -were worried that Angular 2 would spell the end for Angular. - -Few teams are as invested in Angular as the [Ionic SDK](http://ionicframework.com/) team is. We've spent -years building our entire business on Angular. When Angular 2 was announced, we were also concerned that the next version of our favorite framework would negatively impact us. - -What we found when we started building with Angular 2, though, was something beyond our wildest dreams: a faster, more powerful, cleaner, and easier to use tool than we had with Angular 1. We found a tool that embraced future web standards and brought ES6 to more developers around the world. - -We realized that Angular 2 would make it *easier* to use Ionic, not harder. That it would give us performance gains -we desperately needed to push forward our goal of making the web win on mobile. That it would make it easier to write clean, testable code that would run on more devices and platforms. That it would help us empower more web developers to build great mobile apps. - -We knew we had to work to make sure the ngCommunity transitioned from Angular 1 to Angular 2 as quickly and cleanly as possible, so we started this site to help with the transition. - -As Angular 2 moves from alpha to beta and beyond, we will be updating this site with new tutorials and examples. If you ever have a question or feel there is something we could expand, [tweet at us](http://twitter.com/ionicframework). - -We hope you find Angular 2 as inspiring as we have, and we hope this guide helps you get there as quickly as possible. - -Cheers!
-*[Max Lynch](http://twitter.com/maxlynch)*
-*Co-creator of Ionic*
-*May 2015*

Angular 2

{{page.title}}

Rufferford's Travels