Skip to content

Commit

Permalink
Added download previous step to the tutorial.
Browse files Browse the repository at this point in the history
  • Loading branch information
okland committed Aug 18, 2015
1 parent 13375dd commit 426a861
Show file tree
Hide file tree
Showing 22 changed files with 49 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template name="tutorial.step_01.html">
{{#markdown}}
{{> downloadPreviousStep stepName="step_00"}}

Let's create a purely static HTML page and then examine how we can turn this HTML code into a template that Angular will use to dynamically display the same result with any set of data.

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template name="tutorial.step_02.html">
{{#markdown}}
{{> downloadPreviousStep stepName="step_01"}}

Now it's time to make the web page dynamic — with AngularJS.

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template name="tutorial.step_03.html">
{{#markdown}}
{{> downloadPreviousStep stepName="step_02"}}

OK, so we have a nice client side application that creates and renders it's own data.

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template name="tutorial.step_04.html">
{{#markdown}}
{{> downloadPreviousStep stepName="step_03"}}

Now that we have full data binding from server to client, let's interact with the data and see the updates in action.

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template name="tutorial.step_05.html">
{{#markdown}}
{{> downloadPreviousStep stepName="step_04"}}

In this step, you will learn how to create a layout template and how to build an app that has multiple views by adding routing, using an Angular module called `ui-router`.

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template name="tutorial.step_06.html">
{{#markdown}}
{{> downloadPreviousStep stepName="step_05"}}

In this step, we will implement the party details view, which is displayed when a user clicks on a party in the parties list.
The user will also be able to change the party's details.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template name="tutorial.step_07.html">
{{#markdown}}
{{> downloadPreviousStep stepName="step_06"}}

OK, so we have a working app, but, like a tutorial, it's not well organized.

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template name="tutorial.step_08.html">
{{#markdown}}
{{> downloadPreviousStep stepName="step_07"}}

One of Meteor's most powerful packages is the Meteor account system.

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template name="tutorial.step_09.html">
{{#markdown}}
{{> downloadPreviousStep stepName="step_08"}}

Right now our app has no privacy, every user can see all the parties on the screen.

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template name="tutorial.step_10.html">
{{#markdown}}
{{> downloadPreviousStep stepName="step_10"}}

Now that we have a working app, we can go public!
Meteor makes it really easy to put an app up on the internet where other people can use it.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template name="tutorial.step_11.html">
{{#markdown}}
{{> downloadPreviousStep stepName="step_11"}}

So far, we've been building our app and testing only in a web browser,
but Meteor has been designed to work across different platforms - your socially website can become an iOS or Android app in just a few commands.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template name="tutorial.step_12.html">
{{#markdown}}
{{> downloadPreviousStep stepName="step_11"}}


Currently we are dealing with a few parties, but we also need to support also a large number of parties.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template name="tutorial.step_13.html">
{{#markdown}}
{{> downloadPreviousStep stepName="step_12"}}

Our next mission is to invite users to private parties.

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template name="tutorial.step_14.html">
{{#markdown}}
{{> downloadPreviousStep stepName="step_13"}}


In this step we will learn how to use Meteor methods and how angular-meteor enhances them with the support of promises.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template name="tutorial.step_15.html">
{{#markdown}}
{{> downloadPreviousStep stepName="step_14"}}


AngularJS has great and very simple directives that help us show and hide DOM elements conditionally.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template name="tutorial.step_16.html">
{{#markdown}}
{{> downloadPreviousStep stepName="step_15"}}


Let's add location to our parties.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template name="tutorial.step_17.html">
{{#markdown}}
{{> downloadPreviousStep stepName="step_16"}}

Meteor has a great support for CSS.

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template name="tutorial.step_18.html">
{{#markdown}}
{{> downloadPreviousStep stepName="step_17"}}

In this step we will consider switching from *Twitter Bootstrap* to [*angular-material*](https://material.angularjs.org/#/).

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template name="tutorial.step_19.html">
{{#markdown}}
{{> downloadPreviousStep stepName="step_18"}}

This part of the tutorial will cover the usage of third-party libraries with angular-meteor.

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template name="tutorial.step_20.html">
{{#markdown}}
{{> downloadPreviousStep stepName="step_19"}}

In this step we are going to add the ability to upload images into our app, and also sorting and naming them.

Expand Down
12 changes: 12 additions & 0 deletions .docs/angular-meteor/client/content/tutorials/tutorials.html
Original file line number Diff line number Diff line change
Expand Up @@ -46,3 +46,15 @@
</div>
{{/if}}
</template>

<template name="downloadPreviousStep">
<div class="am-note">
<p>
<em class="am-note-bold">Note:</em>
If you skipped ahead to this section,
<a href="https://github.com/Urigo/meteor-angular-socially/archive/{{stepName}}.zip">here is a zip
</a>
of the tutorial at this point.
</p>
</div>
</template>
Original file line number Diff line number Diff line change
Expand Up @@ -106,3 +106,20 @@ code {
.return-arguments td:first-child {
width: 100px;
}

.am-note p {
font-size: 75%;

padding-top: 2px;
padding-left: 0.5em;
padding-bottom: 1px;
padding-right: 0.5em;
display:inline;
color: #C7254E;
background-color: #F9F2F4;
border-radius: 4px;

.am-note-bold {
font-weight: bold;
}
}

0 comments on commit 426a861

Please sign in to comment.