User:Rexi - Revision history

Rexi: /* Individual Assignment */

2016-12-07T04:36:55Z

Individual Assignment

Rexi: /* Individual Assignment */

2016-12-07T04:35:39Z

Individual Assignment

Rexi: /* Individual Assignment */

2016-12-07T04:32:12Z

Individual Assignment

Rexi: /* Individual Assignment */

2016-12-07T04:27:11Z

Individual Assignment

Rexi: /* Individual Assignment */

2016-12-07T04:23:24Z

Individual Assignment

Rexi: /* Grading */

2016-12-07T04:22:43Z

Grading

Rexi: /* Individual Assignment */

2016-12-07T04:22:20Z

Individual Assignment

Rexi: /* Individual Assignment */

2016-12-07T04:20:38Z

Individual Assignment

Rexi: /* Grading */

2016-11-30T00:01:16Z

Grading

Rexi: /* Grading */

2016-11-29T23:59:42Z

Grading

@@ Line 26: / Line 26: @@
 '''Building the site'''
-. You should start with the [https://angular.io/docs/ts/latest/guide/setup.html quickstart] base that you created. Your folder structure should look like [http://classes.engineering.wustl.edu/cse330/index.php/File:FolderStructure.png this].
+. You should start with the [https://angular.io/docs/ts/latest/guide/setup.html quickstart] base that you created. Your folder structure should look like [http://classes.engineering.wustl.edu/cse330/images/1/18/FolderStructure.png this].
 . Create two files: mock-dogs.ts and mock-walkers.ts. These files are very similar to [https://angular.io/docs/ts/latest/tutorial/toh-pt4.html mock-heroes.ts] from the tutorial.
@@ Line 127: / Line 127: @@
+         }
-. 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 [http://classes.engineering.wustl.edu/cse330/index.php/File:FinalFolderStructure.png this].
+. 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 [http://classes.engineering.wustl.edu/cse330/images/6/67/FinalFolderStructure.png this].

← Older revision		Revision as of 04:35, 7 December 2016
Line 127:		Line 127:
	}		}

−	7. Once you have all the routes working, feel free to add different pictures, different attributes for the classes, nice CSS and bootstrap, etc.	+	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 [http://classes.engineering.wustl.edu/cse330/index.php/File:FinalFolderStructure.png this].

@@ Line 134: / Line 134: @@
 Debugging in Angular can be quite tricky. Here are some helpful hints:
-. 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.
+. 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.
 [[File:terminalerrors.png|center|thumb|upright=2]]
-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:
+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:
 [[File:modulets.png|center|thumb|upright=2]]
@@ Line 144: / Line 144: @@
 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.
-. If you aren't getting a 200 or 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:
+. 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:
 [[File:inspectorerrors.png|center|thumb|upright=2]]

← Older revision		Revision as of 04:27, 7 December 2016
Line 21:		Line 21:
	Here is a general layout of the website:		Here is a general layout of the website:

−	[[File:siteflow.png\|center\|thumb\|upright=2]]	+	[[File:siteflow-2.png\|center\|thumb\|upright=2]]

@@ Line 90: / Line 90: @@
 [[File:NavBar.png|center|thumb|upright=2]]
-. Create walker-page.component.ts. This will be a separate "facebook page" that will be routed by a deep link. The parameterized routes in [https://angular.io/docs/ts/latest/tutorial/toh-pt5.html routing] from the tutorial will be extremely helpful. This page should look like:
+. Create walker-page.component.ts. This will be a separate "facebook page" that will be routed by a parameterized route. The parameterized routes in [https://angular.io/docs/ts/latest/tutorial/toh-pt5.html routing] from the tutorial will be extremely helpful. This page should look like:
 [[File:DeepLinkWalkerPage.png|center|thumb|upright=2]]
@@ Line 96: / Line 96: @@
 *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:
+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 {
@@ Line 115: / Line 115: @@
+        }
-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.
+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:

@@ Line 184: / Line 184: @@
 #**	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)
-#*    Deep Link Page (15 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)

@@ Line 117: / Line 117: @@
 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:
+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 {

@@ Line 26: / Line 26: @@
 '''Building the site'''
-. You should start with the [https://angular.io/docs/ts/latest/guide/setup.html quickstart] base that you created. Your folder structure should look like:
+. You should start with the [https://angular.io/docs/ts/latest/guide/setup.html quickstart] base that you created. Your folder structure should look like [http://classes.engineering.wustl.edu/cse330/index.php/File:FolderStructure.png this].
 . Create two files: mock-dogs.ts and mock-walkers.ts. These files are very similar to [https://angular.io/docs/ts/latest/tutorial/toh-pt4.html mock-heroes.ts] from the tutorial.
@@ Line 82: / Line 80: @@
 . Create dog.component.ts. This component should iterate through all the dogs of mock-dogs and display their picture and general information. Refer to [https://angular.io/docs/ts/latest/tutorial/toh-pt2.html hero.component.ts] from the tutorial for help. When you have completed this section, your website should look like:
-[[File:DogHomePage.png|center|thumb|upright=2]]
+[[File:DogHomePage-2.png|center|thumb|upright=2]]
 . Create dog-detail.component.ts. This component should show more information about the dog if its picture is clicked. Refer to [https://angular.io/docs/ts/latest/tutorial/toh-pt3.html hero-detail.component.ts] from the tutorial for help. This is what your site should look like:
@@ Line 153: / Line 151: @@
 [[File:errorfix.png|center|thumb|upright=2]]
 == Grading ==

@@ Line 158: / Line 158: @@
-We will be grading the following aspects of your work.  There are 55 points total.
+We will be grading the following aspects of your work.  There are 60 points total.
@@ Line 172: / Line 172: @@
 #	'''Completed Angular Tutorial steps 0-6 (5 points)'''
-#	 '''Completed dog-walking website (50 points)'''
+#	 '''Completed dog-walking website (55 points)'''
 #*	Quickstart (5 points)
 #**	Folder structure is correct (3 points)
 #**	Set up Angular correctly (2 points)
-#*	Main Components (10 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)
@@ Line 184: / Line 184: @@
 #**	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 (7 points)
+#*	Navigation Bar (8 points)
-#**	A navigation bar is at the top of dog component page and walker component page (2 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)
 #*    Deep Link Page (15 points):
@@ Line 192: / Line 192: @@
 #**  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 (3 points)
+#*	BootStrapping (5 points)
-#**	Site looks good, intuitive, and professional (3 points)
+#**	Site looks good, intuitive, and professional (5 points)

@@ Line 171: / Line 171: @@
-#	'''Completed Google Angular Tutorial steps 0-10 (5 points)'''
+#	'''Completed Angular Tutorial steps 0-6 (5 points)'''
-#	 '''Completed coffee web application (50 points)'''
+#	 '''Completed dog-walking website (50 points)'''
-#*	Index.html (5 points)
+#*	Quickstart (5 points)
-#**	Working button with back to home button at all times (3 points)
+#**	Folder structure is correct (3 points)
 #**	Set up Angular correctly (2 points)
-#*	App.js (10 points)
+#*	Main Components (10 points)
-#**	Set  up module ( 5 points)
+#**	Set up of mock-dogs.ts, dogs.ts, and dog.service.ts is correct (5 points)
-#**	Controller (5 points)
+#**	Iterates through all dog objects and displays correct information (5 points)
-#***	Have one or two controller(s) for the project ( 2 points)
+#**  The same is done for walker component (2 points)
-#***	Use scope injection  (3 points)
+#*	Detail Components (10 points):
-#*	Coffees.html (15 points):
+#**	User is able to select a dog image and see more information about the selected dog (5 points)
-#**	List of all coffees sorted by name (3 points)
+#**	When the image is selected, the web page does not refresh or go to a different url (3 points)
-#**	Search bar, working correctly (4 points)
+#**	The same is done for walker detail component (2 points)
-#**	Has Name, Brand, Location, and Review link all displayed in one table (3 points)
+#*	Navigation Bar (7 points)
-#**	Review link works, and takes you to another view (5 points)
+#**	A navigation bar is at the top of dog component page and walker component page (2 points)
-#*	Reviews.html
+#**  User can switch between the two components easily and appropriate data is rendered upon switch (5 points)
-#**	Reviews of correct coffee, and only correct coffee, are listed (10 points)
+#*    Deep Link Page (15 points):
-#**	All reviews are listed ( 2 points)
+#**  User is taken to a separate page with a parameterized route when a walker button is clicked on dog component page (5 points)
-#**	Rating, comment, and commenter are listed in the same table. (3 points)
+#**  Info about the appropriate walker appears automatically (5 points)
-#*	BootStrapping
+#**  There is a back button to take user back to previous page (3 points)
-#**	Site looks good, intuitive, and professional ( 5 points)
+#**  The same is done for dog buttons on walker component page (2 points)