User:Rexi

This module will help you understand Angular, a framework to build mobile and web applications. We will be using the language TypeScript (with some HTML and CSS) to develop our site, but JavaScript and Dart are also compatible with Angular.

Individual Assignment

In this assignment, you will build an Angular dog-walking website. To get Angular running on your machine, follow the quickstart tutorial. Once you are able to see the "Hello Angular!" on your screen, you are ready to begin.

Understanding Angular and TypeScript

Before starting this section, create a copy the quickstart folder you just created. Use one folder to complete the tutorial and another folder to create your dog walking site.

Complete steps 1-6 of the angular tutorial. Go slowly through the tutorial and try to understand the code. Pay close attention to the routing section as this can be quite tricky. TAs will check out your working tutorial code.

Overview of the dog walking site

The dog walking site will have two main views: dogs and walkers. Each page should show a picture as well as basic information about each dog/walker. Clicking on an image should show more information about the selected dog/walker.

Under more information, there should be buttons that link to personalized pages for the specified dog/walker. This will be done by using a parameterized route.

Here is a general layout of the website:

File:Siteflow.png

Building the site

1. You should start with the quickstart base that you created. Your folder structure should look like:

2. Create two files: mock-dogs.ts and mock-walkers.ts. These files are very similar to mock-heroes.ts from the tutorial.

In mock-dogs.ts, put the following code:

    import { Dog } from './dog';
    import { Walker } from './walker';
    
    let rexi = new Walker(1, 'Rexi', 20, [], 'http://cdnak1.psbin.com/img/mw=300/cr=n/d=tqw7n/vmdxhv95r1qhos2t.jpg');
    let caroline =  new Walker(2, 'Caroline', 21, [], 'http://cdnak1.psbin.com/img/mw=300/cr=n/d=d75wq/jhm8rmg2i2ckxj7g.jpg');
    let joe =  new Walker(3, 'Joe', 25, [],'https://images-na.ssl-images-amazon.com/images/M/MV5BOTI3ODk1MTMyNV5BMl5BanBnXkFtZTcwNDEyNTE2Mg@@._V1_UY317_CR6,0,214,317_AL_.jpg');
    let jake =  new Walker(4, 'Jake', 19, [], 'http://a4.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE4MDAzNDEwNzk1MjAyMDYy.jpg');
     
    export const DOGS: Dog[] = [
      { id: 1, name: 'Sheila', age: 7, walkers: [rexi, caroline], personality:'Fun-loving, very active', picture:'https://www.what-dog.net/Images/faces2/scroll0015.jpg'},
      { id: 2, name: 'Doge', age: 10, walkers: [joe, rexi, jake], personality:'Slow moving, tired', picture:'https://pbs.twimg.com/profile_images/378800000822867536/3f5a00acf72df93528b6bb7cd0a4fd0c.jpeg'},
      { id: 3, name: 'Lola', age: 2, walkers: [jake], personality:'Hyper active puppy', picture:'https://d2csxpduxe849s.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/62E3C530-E8C8-445A-B6EA56249F2436C8/51B393D6-AC74-46BC-B669648017EF48AF/b9824b6d-ea23-5b20-8412-45061f7ebc8b/thul-IMG_1809.jpg'},
      { id: 4, name: 'Gizmo', age: 4, walkers: [joe], personality:'Likes to bark at squirrels', picture:'https://pbs.twimg.com/profile_images/473535319090819074/6j-F-_N-_400x400.jpeg'},
    ];

In mock-walkers.ts put the following code:

import { Walker } from './walker'; import { Dog } from './dog';

     let sheila = new Dog(1, 'Sheila', 7, [], 'Fun-loving, very active', 'https://www.what-dog.net/Images/faces2/scroll0015.jpg');
      let doge = new Dog( 2, 'Doge', 10, [], 'Slow moving, tired', 'http://www.dogchannel.com/images/articles/breed_profile_images/canaan-dog.jpg');
      let lola = new Dog(3,'Lola',2, [], 'Hyper active puppy','https://d2csxpduxe849s.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/62E3C530-E8C8-445A-B6EA56249F2436C8/51B393D6-AC74-46BC-B669648017EF48AF/b9824b6d-ea23-5b20-8412-45061f7ebc8b/thul-IMG_1809.jpg');
      let gizmo = new Dog(4, 'Gizmo', 4, [], 'Likes to bark at squirrels', 'https://pbs.twimg.com/profile_images/473535319090819074/6j-F-_N-_400x400.jpeg');
     
     export const WALKERS: Walker[] = [
       { id: 1, name: 'Rexi', age: 20, dogsWalked:[gizmo], picture:'http://cdnak1.psbin.com/img/mw=300/cr=n/d=tqw7n/vmdxhv95r1qhos2t.jpg'},
       { id: 2, name: 'Caroline', age: 21, dogsWalked:[sheila, lola], picture:'http://cdnak1.psbin.com/img/mw=300/cr=n/d=d75wq/jhm8rmg2i2ckxj7g.jpg'},
       { id: 3, name: 'Joe', age: 25, dogsWalked:[gizmo, lola, doge], picture:'https://images-na.ssl-images-amazon.com/images/M/MV5BOTI3ODk1MTMyNV5BMl5BanBnXkFtZTcwNDEyNTE2Mg@@._V1_UY317_CR6,0,214,317_AL_.jpg'},
       { id: 4, name: 'Jake', age: 19, dogsWalked:[gizmo, sheila], picture:'http://a4.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE4MDAzNDEwNzk1MjAyMDYy.jpg'},
     ];

You will need to create a dog class and a walker class based upon the mock data above. Call these dog.ts and walker.ts (the format should be similar to hero.ts from the tutorial). In these files, create constructors for the appropriate object. This should look something like:

     export class Example{
          id: number;
          name: string;
     
          constructor ( id: number, name: string){
              this.id = id;
              this.name = name;
          }
     }

You will also need to create two service files (one for dog and one for walker) to be able to access the mock data. Call these dog.service.ts and walker.service.ts. Reference the tutorial (especially hero.service.ts) if you need help.

3. Create dog.component.ts. This component should iterate through all the dogs of mock-dogs and display their picture and general information. Refer to hero.component.ts from the tutorial for help.

File:DogHomePage.png

4. Create dog-detail.component.ts. This component should show more information about the dog if its picture is clicked. Refer to hero-detail.component.ts from the tutorial for help.

5. Create a nav bar at the top of the page and link the other tab to a walker.component.ts. This page should operate the same as dog.component.ts but iterate through mock-walkers. Use the routing section of the tutorial for help.

6. Create walker-page.component.ts. This will be a separate "facebook page" that will be routed by a deep link. The parameterized routes in routing from the tutorial will be extremely helpful.

The best way to make this route work is to pass a walker object to the deep link page. Some helpful code that should go into DogDetailComponent:

 getWalkers(): void {
   this.walkerService.getWalkers().then(walkers => this.walkers = walkers);
 }
     
 ngOnInit():void{
   this.getWalkers();
 }
     
 onSelect(walker: Walker):void {
   this.selectedWalker = walker;
   this.gotoDetail();
 }
     
 gotoDetail(): void{
   this.router.navigate(['/walker', this.selectedWalker.id]);
 }

This code will help you get the proper walker based on the button selected and help you pass the object to the deep link page.

To parse the walker object on the deep-link page, you can use the following code. This should go in WalkerPageComponent in walker-page.component.ts:

     ngOnInit(): void {
         this.route.params.forEach((params: Params) => {
             let id = +params['id'];
             this.walkerService.getWalker(id)
             .then(walker => this.walker = walker);
         });
       }

7. Once you have all the routes working, feel free to add different pictures, different attributes for the classes, nice CSS and bootstrap, etc.

Debugging

Debugging in Angular can be quite tricky. Here are some helpful hints:

1. Check your terminal. If there is a 404 message, something is wrong with that file. Check to make sure all your files are spelled correctly and linked correctly.

2. Use inspect element on Google Chrome. Usually an error will be thrown and you can identify it through the inspector.