Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

step-9

step-9 checkmark filter
- Added custom checkmark filter
- Update phone detail template to use checkmark filter
- Added spec for the filter

step-7

step-7 $route and app partitioning
- Introduce the [$route] service which allows binding URLs for deep-linking with
  views
  - Create PhoneCatCtrl which governs the entire app and contains $route
    configuration
  - Load the ngRoute module
  - Map `/phones' to PhoneListCtrl and partails/phones-list.html
  - Map `/phones/<phone-id>' to PhoneDetailCtrl and partails/phones-detail.html
  - Copy deep linking parameters to root controller `params` property for access
    in sub controllers
  - Replace content of index.html with [ngView] directive

- Create phone list route
  - Preserve existing PhoneListCtrl controller
  - Move existing html from index.html to partials/phone-list.html
- Create phone details route
  - Empty placeholder PhoneDetailsCtrl controller
  - Empty placeholder partials/phane-details.html template

step-8

step-8 phone details view
- Fetch data for and render phone detail view
  - PhoneDetailCtrl controller to fetch details json with [$http] for a specific
    phone
  - template for the phone detailed view
- CSS to make the phone details page look "pretty"

step-10

step-10 image swapping with ng:click
In the phone detail view, clicking on a thumbnail image, changes the
main phone image to be the large version of the thumbnail image.

- Define mainImageUrl model variable in the PhoneDetailCtrl and set its
  default value
- Create setImage controller method to change mainImageUrl
- Register ng:click handler for thumb images to use setImage controller
  method
- Add e2e tests for this feature
- Add css to change the mouse cursor when user points at thumnail images

step-11

step-11 custom service and $resource
- Replaced [$http] with [$resource]
- Created a custom Phone service that represents the $resource client

step-6

step-6 phone images and links
- adding phone image and links to phone pages
- add end2end test that verifies our phone links
- css to style the page just a notch

step-3

step-3 interactive search
- Added a search box to demonstrate how:
  - the data-binding works on input fields
  - to use [filter] filter
  - [ngRepeat] automatically shrinks and grows the number of phones in the view
- Added an end-to-end test to:
  - show how end-to-end tests are written and used
  - to prove that the search box and the repeater are correctly wired together

step-2

step-2 angular template with repeater
- Converted the static html list into dynamic one by:
  - creating PhoneListCtrl controller for the application
  - extracting the data from HTML into a the controller as an in-memory
    dataset
  - converting the static document into a template with the use of
    `[ngRepeat]` [directive] which iterates over the dataset with phones,
    clones the ngRepeat template for each instance and renders it into the
    view
- Added a simple unit test to show off how to write tests and run them
  with Karma (see README.md for instructions)

step-4

step-4 phone ordering
- Add "age" property to the phone model
- Add select box to control phone list order
- Override the default order value in controller
- Add unit and e2e test for this feature

Closes #213

step-5

step-5 XHR and dependency injection
- Replaced the in-memory dataset with data loaded from the server (in
  the form of static phone.json file to make this tutorial backend
  agnostic)
  - The json file is loaded using the [$http] service
- Demonstrate the use of [services][service] and [dependency injection][DI]
  - The [$http] is injected into the controller through [dependency injection][DI]

(Added inline annotation - thanks to @guatebus - closes #207)

step-1

step-1 static phone list
- Added static html list with two phones into index.html

step-0

step-0 bootstrap angular app
- add ngApp directive to bootstrap the app
- add simple template with an expression
Something went wrong with that request. Please try again.