This repository was archived by the owner on Nov 27, 2025. It is now read-only.
Permalink
Checking mergeability…
Don’t worry, you can still create the pull request.
Comparing changes
Choose two branches to see what’s changed or to start a new pull request.
If you need to, you can also or
learn more about diff comparisons.
Open a pull request
Create a new pull request by comparing changes across two branches. If you need to, you can also .
Learn more about diff comparisons here.
...
- 15 commits
- 23 files changed
- 3 contributors
Commits on Nov 21, 2016
-
- Add the 'angular.js' script. - Add the `ngApp` directive to bootstrap the application. - Add a simple template with an expression.
-
- Add a stylesheet file ('app/app.css'). - Add a static list with two phones. -
- Convert the static phone list to dynamic by: - Creating a `PhoneListController` controller. - Extracting the data from HTML into the controller as an in-memory dataset. - Converting the static document into a template with the use of the `ngRepeat` directive. - Add a simple unit test for the `PhoneListController` controller to show how to write tests and run them using Karma (see README.md for instructions).
-
- Introduce components. - Combine the controller and the template into a reusable, isolated `phoneList` component. - Refactor the application and tests to use the `phoneList` component.
-
step-4 Directory and File Organization
- Refactor the layout of files and directories, applying best practices and techniques that will make the application easier to maintain and expand in the future: - Put each entity in its own file. - Organize code by feature area (instead of by function). - Split code into modules that other modules can depend on. - Use external templates in `.html` files (instead of inline HTML strings).
-
- Add a search box to demonstrate: - How the data-binding works on input fields. - How to use the `filter` filter. - How `ngRepeat` automatically shrinks and grows the number of phones in the view. - Add an end-to-end test to: - Show how end-to-end tests are written and used. - Prove that the search box and the repeater are correctly wired together.
-
- Add an `age` property to the phone model. - Add a drop-down menu to control the phone list order. - Override the default order value in controller. - Add unit and end-to-end tests for this feature. Closes #213
-
step-7 XHR & Dependency Injection
- Replace the in-memory dataset with data loaded from the server (in the form of a static 'phone.json' file to keep the tutorial backend agnostic): - The JSON data is loaded using the `$http` service. - Demonstrate the use of `services` and `dependency injection` (DI): - `$http` is injected into the controller through DI. - Introduce DI annotation methods: `.$inject` and inline array Closes #207
-
step-8 Templating Links & Images
- Add a phone image and links to phone pages. - Add an end-to-end test that verifies the phone links. - Tweak the CSS to style the page just a notch.
-
step-9 Routing & Multiple Views
- Introduce the `$route` service, which allows binding URLs to views for routing and deep-linking: - Add the `ngRoute` module as a dependency. - Configure routes for the application. - Use the `ngView` directive in 'index.html'. - Create a phone list route (`/phones`): - Map `/phones` to the existing `phoneList` component. - Create a phone detail route (`/phones/:phoneId`): - Map `/phones/:phoneId` to a new `phoneDetail` component. - Create a dummy `phoneDetail` component, which displays the selected phone ID. - Pass the `phoneId` parameter to the component's controller via `$routeParams`.
-
- Implement fetching data for the selected phone and rendering to the view: - Use `$http` in `PhoneDetailController` to fetch the phone details from a JSON file. - Create the template for the detail view. - Add CSS styles to make the phone detail page look "pretty-ish".
-
- Implement a custom `checkmark` filter. - Update the `phoneDetail` template to use the `checkmark` filter. - Add a unit test for the `checkmark` filter.
-
- Make the thumbnail images in the phone detail view clickable: - Introduce a `mainImageUrl` property on `PhoneDetailController`. - Implement the `setImage()` method for changing the main image. - Use `ngClick` on the thumbnails to register a handler that changes the main image. - Add an end-to-end test for this feature.
-
step-13 REST and Custom Services
- Replace `$http` with `$resource`. - Create a custom `Phone` service that represents the RESTful client. - Use a custom Jasmine equality tester in unit tests to ignore irrelevant properties.
-
- Add animations to the application: - Animate changes to the phone list, adding, removing and reordering phones with `ngRepeat`. - Animate view transitions with `ngView`. - Animate changes to the main phone image in the phone detail view. - Showcase three different kinds of animations: - CSS transition animations. - CSS keyframe animations. - JavaScript-based animations.
Loading
This comparison is taking too long to generate.
Unfortunately it looks like we can’t render this comparison for you right now. It might be too big, or there might be something weird with your repository.
You can try running this command locally to see the comparison on your machine:
git diff master...master