CSC360: Lecture 4 (UX)

Trickier than you might expect!

But it's complicated.

I think we need a textbook!

Get ng-book2. It is not simply a rehash of the tutorials.

A relevant blog post on forms from the authors.

Project descriptions due midnight next monday

• Give an idea of what your application will do.
• Discuss the data that you need for your appliaction. Where will you get it?
• Discuss the javascript libraries that you plan on using for your project. What do you need to do that will require help?
• Your application should have a least two different routes/view. List the different routes you will support.
• Give a hand draw layouts for the routes. You can scan this and include online, or you can bring your drawings to class on tuesday the 26th.

Here is an example of the use of services: angular2-seed

Should work for you as before, simply using:

npm install
npm start
open http://localhost:3000/ in your browser (not automatic)

Interesting bits:

• This bootstraps using webpack rather than system.js
• SeedApp has top-level routes: Home, About, RepoBrowser.
• RepoBrowser has nested routes: RepoList, RepoDetail.
• GitHub is an injectable service.
• The private makeRequest method uses RxJS Observables, which we will talk about later.
  • Obervable.map allows you to transform all of the values returned by an Observable.
  • The function (res) => res.json() takes a string and parses it into a json object.
  • In RepoDetail, Obervable.subscribe is similar to Promise.then.
  • In RepoList, async calls Obervable.subscribe.

    01 02 03 04 05

    <li *ngFor="#repo of repos | async"> <a [routerLink]=" ['RepoDetail', {org: repo.owner.login, name: repo.name}] "> {{ repo.name }} </a> </li>

By Craig Miller

Here's a sequence of steps to get a twitter API key.

Revised: 2008/03/17 13:01