http://goo.gl/Xa0Ea

FoodMe Workshop

Please submit your feedback to http://goo.gl/itCym

TODO App for inspiration https://github.com/IgorMinar/ng-todo/tree/demo-rupy

Dependencies:

On Linux, we recommend using NVM for installing Node.js

Grab the code

Install local dependencies

Run Web Server (in separate terminal window)

This will start a Node.js server and open your default browser on http://localhost:3000, where the app should be served.

Run the unit tests (in a separate terminal window)

This will start Testacular, that will keep watching the files and whenever you make any change to a file, it will re-run all the unit tests.

It will also try to start Chrome. If you don’t have Chrome installed, you can specify another browser for Testacular to use. Eg. --browsers Firefox

Exercises

(skip) Step 1 - Static mocks

What we have:

This is an example of a static web-app mock that you might have received from a web-designer.

Goal:

We need to turn the static mocks into an angular application:

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-1-solution

>> Step 2 - Collect user data

Get this step:

git checkout -f step-2

What we have:

At this point, the angular application is bootstrapped.

We have created CustomerController.js and added it into scripts.

We have implemented findRestaurants() to alert() the inputted text (for now).

Goal:

Turn the mocked form into a working form. Use end-to-end testing to check that the form does what you expect it to.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-2-solution

>> Step 3 - customer form validation

Get this step:

git checkout -f step-3

What we have:

A working form, which does not do any input validation.

Goal:

Add form validation and disable the submit button whenever a form has empty fields.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-3-solution

(skip) Step 4 - Customer model, localStorage persistence

What we have:

A working, self-validating, customer information form.

Goal:

Create a customer service which persists into localStorage.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-4-solution

(skip) Step 5 - wire a customer model with CustomerController

What we have:

A customer form which does not persist, and a customer model which is auto-persisted when changed.

Goal:

Persist customer form into localStorage when the customer form is submitted.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-5-solution

(skip) Step 6 - customer route

What we have:

All of the UI is in the index.html.

Goal:

Extract the UI from index.html into a separate file, and enable routing.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-6-solution

>> Step 7 - static routes

Get this step:

git checkout -f step-7

What we have:

We're able to receive user information and persist it in localStorage, but top-level navigation doesn't work yet.

We created a customer service which persists name and address into localStorage, and wired it into app.js.

We defined a root route in the app.js to point to views/customer.html and CustomerController.

We created a view for each of the static pages: views/who-we-are.html views/how-it-works.html and views/help.html.

Goal:

Wire up the remaining views and get the navigation working.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-7-solution

(skip) Step 8 - navbar selection

What we have:

Working menu system, which does not show which menu is active.

Goal:

Add active class to the menu item which is currently active.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-8-solution

(skip) Step 9 - empty restaurants route + redirections

What we have:

Collect customer information form as the main screen.

Goal:

Create a list of restaurants placeholder as the main screen, move customer information screen into separate route definition.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-9-solution

(skip) Step 10 - static restaurants view

What we have:

Placeholder for the views/restaurants.html.

Goal:

Add static web-designer mocks to the views/restaurants.html placeholder.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-10-solution

(skip) Step 11 - Create fake restaurant data

What we have:

Static designer mock of restaurants.

Goal:

Add some fake restaurants into the controller.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-11-solution

>> Step 12 - Data-bind to fake restaurant data

Get this step:

git checkout -f step-12

What we have:

An HTML mock with some hardcoded data for restaurants, working navigation, and defined views for the static pages.

Goal:

Add data binding to the mock so that the data in the views can be generated dynamically based on the data in the controller.

What needs to be done:

Useful links

http://docs.angularjs.org/api/ng.directive:ngRepeat

Solution:

https://github.com/IgorMinar/foodme/commit/step-12-solution

(skip) Step 13 - fetch restaurants data via $http

What we have:

Designer mock of restaurants bound to fake data.

Goal:

Bind restaurants to data from the server.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-13-solution

(skip) Step 14 - replace $http with Restaurant resource

What we have:

Restaurants page which is populated with $http.get() service.

Goal:

Simplify data fetching through the use of $resource over $http.get() service.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-14-solution

(skip) Step 15 - wire up the 'deliver to' info panel

What we have:

Restaurants list.

Goal:

Add deliver to information on top of the restaurants view.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-15-solution

(skip) Step 16 - add ngPluralize

What we have:

Count of restaurants without pluralization. (we show 1 restaurants found!)

Goal:

Change the message depending on the number of restaurants returned.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-16-solution

(skip) Step 17 - static menu view

What we have:

List of restaurants

Goal:

Show the static restaurant menu mock from the web-designer.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-17-solution

>> Step 18 - add fmDeliverTo directive

Get this step:

git checkout -f step-18

What we have:

An inline "deliver to" message in the views/restaurants.html view

Goal:

Extract the message into a reusable component. Introduce unit tests into our code, and run them.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-18-solution

(skip) Step 19 - data-bind the menu view

What we have:

Static web-designer mock of the menu.

Goal:

Data-bind the menu to real data from the server.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-19-solution

(skip) Step 20 - stars & dollars filters

What we have:

Currently prices and ratings show up as numbers.

Goal:

Create a filter to display prices and ratings using $ and ★.

Solution:

https://github.com/IgorMinar/foodme/commit/step-20-solution

What needs to be done:

--> Step 21 - fmRating directive to replace filters and data-bind to filter

What we have:

Filters to render $ and .

Goal:

Replace these filters with a more versatile directive that can do both one-way binding (similar to what filters did) as well as two-way data-binding.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-21-solution

>> Step 22 - wire up rating and price filters

Get this step:

git checkout -f step-22

What we have:

Currently the filtering in our restaurants view does nothing.

Goal:

Enable filtering of the restaurant list. Add unit tests to the new filtering code.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-22-solution

>> Step 23 - fmCheckboxList Directive

Get this step:

git checkout -f step-23

What we have:

A static list of cuisines.

Goal:

Turn the static list into a dynamic list and add unit tests for it.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-23-solution

>> Step 24 - add sorting

Get this step:

git checkout -f step-24

What we have:

Restaurants are returned always in the same order.

Goal:

Allow sorting of the restaurant list and add unit tests for it.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-24-solution

Step 25 - cart + add/remove stuff from cart

What we have:

Menu view does not allow ordering.

Goal:

Allow adding menu items into a cart.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-25-solution

(skip) Step 26 - static checkout view

What we have:

We don't have a checkout view

Goal:

Add static mock of the checkout view.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-26-solution

(skip) Step 27 - wire up checkout view

What we have:

Static checkout view.

Goal:

Wire up the checkout view to show the contents of the cart and allow the purchase.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-27-solution

Step 28 - static thank-you view

What we have:

We don't have checkout confirmation page

Goal:

Add web-designer mocks of the checkout confirmation page.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-28-solution

Step 29 - wire up thank-you view

What we have:

Static mock of thank you page.

Goal:

Add behavior to the mock.

What needs to be done:

Solution:

https://github.com/IgorMinar/foodme/commit/step-29-solution

--> Conclusion

Get this step:

git checkout -f master

What we have: