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:

• git: http://git-scm.com/
• node: http://nodejs.org/ (must be 0.8.x)

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

Grab the code

• git clone git://github.com/IgorMinar/foodme.git
• cd foodme
• git checkout step-0

Install local dependencies

• npm install

Run Web Server (in separate terminal window)

• Mac/Linux

• ./scripts/web-server.sh

• Windows

• ./scripts/web-server.bat

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)

• Mac/Linux

• ./scripts/test.sh

• Windows

• ./scripts/test.bat

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:

• Add an angular.js script tag.
• Add a js/app.js script tag.
• Create an angular module foodMeApp.
• Bootstrap the foodMeApp module in HTML.
• Verify that angular works by placing an angular expression {{1+2}} in your HTML.

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:

• Run the end-to-end test http://localhost:3000/test/e2e/runner.html to check your code.
• Add CustomerController to the HTML form element via the ng-controller directive.
• Add ng-model directive to the text input elements.
• Add ng-click directive to the form submit button to call findRestaurants() in CustomerController.

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:

• Run the end-to-end test http://localhost:3000/test/e2e/runner.html to check your code.
• Add ng-disabled to the form submit button.
• Add required attributes to the input elements.

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:

• Create a localStorage service, to allow mocking in tests
• Create a customer service which persists name and address into localStorage

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:

• Copy customer name and address into the form in CustomerController constructor
• In the findRestaurants method copy customer information into customer service.

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:

• Extract the HTML form index.html into views/customer.html, leaving behind only the chrome of the application, which is same on all pages. Place ng-view placeholder in where the extracted HTML used to be.
• Defined a root route in the app.js to point to views/customer.html and CustomerController.

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:

• Run the end-to-end test http://localhost:3000/test/e2e/runner.html to check your code.
• Add routes in app.js for each menu item's view. Use menu link as the route url (without # prefix).

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:

• Create NavbarController.
• Create routeIs() method which determines if the current path matches the menu.
• Place ng-class in the navbar HTML which uses routeIs() method to add active class.

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:

• Create RestaurantController, which redirects to CustomerController if the current customer is not defined.
• Change the root route / to point to RestaurantController and the previous CustomerController now points to /customer route.
• Redirect to RestaurantControler form CustomerControler when the customer fills in their information.

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:

• cut-and-paste web-designer mock data into views/restaurants.html.

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:

• Create a fake restaurant model in the RestaurantController.

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:

• Run the end-to-end test http://localhost:3000/test/e2e/runner.html to check your code.
• Refactor the views/restaurants.html to data bind to the data defined in the RestaurantController. (note: all restaurant images are stored as <restaurant.id>.jpg under /img/restaurants/)

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:

• Replace the fake data-set of restaurants with a call to $http.get().

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:

• Add dependencies on ngResource in foodMeApp module.
• Create the Restaurant resource.
• Inject Restaurant resource into RestaurantsController.
• Replace $http.get() with Restaurant.query().

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:

• Inject customer service into RestaurantsView and expose it to the view.
• Add HTML to show current deliver information in views/restaurants.html.

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:

• Replace the restaurant count message with ng-pluralize.

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:

• Add views/menu.html static web-designer mock.
• Create empty MenuController as a placeholder.
• Create parameterized /menu/:restarunatId route to point to the MenuController and the views/menu.html mock.

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:

• Start the unit testing server with ./scripts/tests.sh

• Create fmDeliverTo.js component using the directive api. The component should use the js/directives/fmDeliverTo.html as its template.
• Replace the inline HTML with the extracted component.

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:

• Retrieve restaurant from the server.
• Update the bindings in the HTML to bind to actual data.

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:

• create $ and ★ filter and register it with foodMeApp.

--> 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:

• convert filters to directives
• add behavior to support ng-model as well as selection and mouse over to clear.

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:

• Create a watch on the filter property of RestaurantsController.
• Run a filtering algorithm on the filters to show a subset of restaurants.

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:

• Create a fmCheckboxList directive which works with ng-model to render a dynamic list of checkboxes.

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:

• extend the sorting function to support sorting

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:

• Create a cart service which keeps track of ordered items.
• Inject cart service into MenuController.
• Enable links to add items into the cart service.

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:

• Create CheckoutController.
• Put checkout mocks into views/checkout.html.
• Add new route /checkout to routes.

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:

• Update the static mock with databindings to render the content of the shopping cart.
• Implement a purchase() button in CheckoutController which submits the order to server and clears the shopping cart.

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:

• Create ThankYouController.
• Put checkout mocks into views/thank-you.html.
• Add new route /thank-you to routes.

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:

• Show order ID as return from the server

Solution:

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

--> Conclusion

Get this step:

git checkout -f master

What we have: