Tags: EpiphanyMachine/angular-phonecat
Tags
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-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-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-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 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)
PreviousNext