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 this.
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 parameterized route. 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 parameterized route 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 parameterized route page.
To parse the walker object on the parameterized route 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. Your final folder structure should look like this.
Debugging
Debugging in Angular can be quite tricky. Here are some helpful hints:
1. Check your terminal for 404 error messages. A 404 message usually means that you misspelled a file name in your imports or that file doesn't exist.
In this image above, we see a 404 error message in app.components.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. If you aren't getting a 404 error message in the console, use inspect element on Google Chrome. Usually an error will be thrown and you can identify it through the inspector. Let's take a look at the example below:
We immediately see that my walker page is not being rendered correctly (none of the walkers appear). So, right click the web page in Google Chrome and click "Inspect". The inspect toolbar should appear. Looking at the console, we can see that WalkerComponent doesn't have a DogService provider. We can easily fix this by doing the following:
Grading
We will be grading the following aspects of your work. There are 60 points total.
Assignments must be committed to Bitbucket by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0. Assignments must be demoed within 4 days of the due date (Friday at 11:30 AM for Module 7). You are allowed to demo your assignment at TA office hours. However, after Friday at 11:30 AM, you will receive a 0 for the assignment, regardless of your time-stamp.
- You must save your repo as:
- "<Season><year>-Module<#>-FirstName-LastName-StudentID"
- (ie. Spring2025-Module3-John-Doe-201343)
___________
- Completed Angular Tutorial steps 0-6 (5 points)
- Completed dog-walking website (55 points)
- Quickstart (5 points)
- Folder structure is correct (3 points)
- Set up Angular correctly (2 points)
- Main Components (12 points)
- Set up of mock-dogs.ts, dogs.ts, and dog.service.ts is correct (5 points)
- Iterates through all dog objects and displays correct information (5 points)
- The same is done for walker component (2 points)
- Detail Components (10 points):
- User is able to select a dog image and see more information about the selected dog (5 points)
- When the image is selected, the web page does not refresh or go to a different url (3 points)
- The same is done for walker detail component (2 points)
- Navigation Bar (8 points)
- A navigation bar is at the top of dog component page and walker component page (3 points)
- User can switch between the two components easily and appropriate data is rendered upon switch (5 points)
- Parameterized Route Page (15 points):
- User is taken to a separate page with a parameterized route when a walker button is clicked on dog component page (5 points)
- Info about the appropriate walker appears automatically (5 points)
- There is a back button to take user back to previous page (3 points)
- The same is done for dog buttons on walker component page (2 points)
- BootStrapping (5 points)
- Site looks good, intuitive, and professional (5 points)
- Quickstart (5 points)
