Fork me on GitHub

Angular2-Meteor - Socially

https://github.com/Urigo/meteor-angular2.0-socially
Note: The Socially 2 tutorial is no longer maintained. Instead, we have a new, better and comprehensive tutorial, integrated with our WhatsApp clone tutorial: WhatsApp clone tutorial with Ionic 2, Angular 2 and Meteor (we just moved all features and steps, and implemented them better!)
navigate_beforePrevious searchCode Diff Nextnavigate_next
mode_editImprove This Tutorial

Static Templates

Note: If you skipped ahead to this section, click here to download a zip of the tutorial at this point.

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.

Add this template HTML to app.html:

2.1 Add static HTML to the main component view client/imports/app/app.component.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>
  <li>
    <span>Dubstep-Free Zone</span>
    <p>
      Can we please just for an evening not listen to dubstep.
    </p>
  </li>
  <li>
    <span>All dubstep all the time</span>
    <p>
      Get it on!
    </p>
  </li>
</ul>
Improve this code

Now, let's go to the next step and learn how to dynamically generate the same list using Angular 2.

navigate_beforePrevious searchCode Diff Nextnavigate_next
mode_editImprove This Tutorial