Skip to content

Tags: rizecode/angular-phonecat

Tags

step-11

Toggle step-11's commit message
step-11 custom service and $resource - Replaced [$xhr] with [$resource] - Created a custom Phone service that represents the $resource client

step-10

Toggle step-10's commit message
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-9

Toggle step-9's commit message
step-9 checkmark filter - Added custom checkmark filter - Update phone detail template to use checkmark filter - Added spec for the filter

step-8

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

step-7

Toggle step-7's commit message
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 - 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 [ng:view] widget - 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-6

Toggle step-6's commit message
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-5

Toggle step-5's commit message
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]

step-4

Toggle step-4's commit message
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

step-3

Toggle step-3's commit message
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

Toggle step-2's commit message
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 JsTD (see README.md for instructions)