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:
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. When you have completed this section, your website should look like:
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. This is what your site should look like:
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. The nav bar should look something like:
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. This page should look like:
- Make sure to take note of the url - the number at the end corresponds to the id of the selected walker.
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 for 404 or 200 error messages. A 404 message usually means that you misspelled a file name in your imports or that file doesn't exist. A 200 error message means that something is wrong with that file.
In this image above, we see a 200 error message in app.module.ts. Let's take a look at what is in app.module.ts:
Looking over the file, we can see that the file app.component.ts is misspelled with an extra 's'. This is where we get the 404 error from. The compiler can't find app.components.ts because it does not exist.
2. Use inspect element on Google Chrome. Usually an error will be thrown and you can identify it through the inspector.
