{"id":13474859,"url":"https://github.com/angular/angular-phonecat","last_synced_at":"2025-10-06T11:31:02.887Z","repository":{"id":38628968,"uuid":"1452079","full_name":"angular/angular-phonecat","owner":"angular","description":"Tutorial on building an angular application.","archived":true,"fork":false,"pushed_at":"2021-11-15T10:46:31.000Z","size":103848,"stargazers_count":3124,"open_issues_count":5,"forks_count":4665,"subscribers_count":297,"default_branch":"master","last_synced_at":"2024-09-26T11:03:25.191Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://docs.angularjs.org/tutorial","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/angular.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2011-03-07T21:42:29.000Z","updated_at":"2024-09-18T18:26:43.000Z","dependencies_parsed_at":"2022-07-27T14:19:04.987Z","dependency_job_id":null,"html_url":"https://github.com/angular/angular-phonecat","commit_stats":null,"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular%2Fangular-phonecat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular%2Fangular-phonecat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular%2Fangular-phonecat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular%2Fangular-phonecat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angular","download_url":"https://codeload.github.com/angular/angular-phonecat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219877267,"owners_count":16554853,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T16:01:15.448Z","updated_at":"2025-10-06T11:30:57.502Z","avatar_url":"https://github.com/angular.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# AngularJS Phone Catalog Tutorial Application\n\n\n## Overview\n\nThis application takes the developer through the process of building a web-application using\nAngularJS. The application is loosely based on the **Google Phone Gallery**, which no longer exists.\nHere is a historical reference: [Google Phone Gallery on WayBack][google-phone-gallery]\n\nEach tagged commit is a separate lesson teaching a single aspect of the framework.\n\nThe full tutorial can be found at https://docs.angularjs.org/tutorial.\n\n\n## Prerequisites\n\n### Git\n\n- A good place to learn about setting up git is [here][git-setup].\n- You can find documentation and download git [here][git-home].\n\n### Node.js and Tools\n\n- Get [Node.js][node].\n- Install the tool dependencies: `npm install`\n\n\n## Workings of the Application\n\n- The application filesystem layout structure is based on the [angular-seed][angular-seed] project.\n- There is no dynamic backend (no application server) for this application. Instead we fake the\n  application server by fetching static JSON files.\n- Read the _Development_ section at the end to familiarize yourself with running and developing\n  an AngularJS application.\n\n\n## Commits / Tutorial Outline\n\nYou can check out any point of the tutorial using:\n\n```\ngit checkout step-?\n```\n\nTo see the changes made between any two lessons use the `git diff` command:\n\n```\ngit diff step-?..step-?\n```\n\n### step-0 _Bootstrapping_\n\n- Add the 'angular.js' script.\n- Add the `ngApp` directive to bootstrap the application.\n- Add a simple template with an expression.\n\n### step-1 _Static Template_\n\n- Add a stylesheet file ('app/app.css').\n- Add a static list with two phones.\n\n### step-2 _AngularJS Templates_\n\n- Convert the static phone list to dynamic by:\n  - Creating a `PhoneListController` controller.\n  - Extracting the data from HTML into the controller as an in-memory dataset.\n  - Converting the static document into a template with the use of the `ngRepeat` directive.\n- Add a simple unit test for the `PhoneListController` controller to show how to write tests and\n  run them using Karma.\n\n### step-3 _Components_\n\n- Introduce components.\n- Combine the controller and the template into a reusable, isolated `phoneList` component.\n- Refactor the application and tests to use the `phoneList` component.\n\n### step-4 _Directory and File Organization_\n\n- Refactor the layout of files and directories, applying best practices and techniques that will\n  make the application easier to maintain and expand in the future:\n  - Put each entity in its own file.\n  - Organize code by feature area (instead of by function).\n  - Split code into modules that other modules can depend on.\n  - Use external templates in `.html` files (instead of inline HTML strings).\n\n### step-5 _Filtering Repeaters_\n\n- Add a search box to demonstrate:\n  - How the data-binding works on input fields.\n  - How to use the `filter` filter.\n  - How `ngRepeat` automatically shrinks and grows the number of phones in the view.\n- Add an end-to-end test to:\n  - Show how end-to-end tests are written and used.\n  - Prove that the search box and the repeater are correctly wired together.\n\n### step-6 _Two-way Data Binding_\n\n- Add an `age` property to the phone model.\n- Add a drop-down menu to control the phone list order.\n- Override the default order value in controller.\n- Add unit and end-to-end tests for this feature.\n\n### step-7 _XHR \u0026 Dependency Injection_\n\n- Replace the in-memory dataset with data loaded from the server (in the form of a static\n  'phone.json' file to keep the tutorial backend agnostic):\n  - The JSON data is loaded using the `$http` service.\n- Demonstrate the use of `services` and `dependency injection` (DI):\n  - `$http` is injected into the controller through DI.\n  - Introduce DI annotation methods: `.$inject` and inline array\n\n### step-8 _Templating Links \u0026 Images_\n\n- Add a phone image and links to phone pages.\n- Add an end-to-end test that verifies the phone links.\n- Tweak the CSS to style the page just a notch.\n\n### step-9 _Routing \u0026 Multiple Views_\n\n- Introduce the `$route` service, which allows binding URLs to views for routing and deep-linking:\n  - Add the `ngRoute` module as a dependency.\n  - Configure routes for the application.\n  - Use the `ngView` directive in 'index.html'.\n- Create a phone list route (`/phones`):\n  - Map `/phones` to the existing `phoneList` component.\n- Create a phone detail route (`/phones/:phoneId`):\n  - Map `/phones/:phoneId` to a new `phoneDetail` component.\n  - Create a dummy `phoneDetail` component, which displays the selected phone ID.\n  - Pass the `phoneId` parameter to the component's controller via `$routeParams`.\n\n### step-10 _More Templating_\n\n- Implement fetching data for the selected phone and rendering to the view:\n  - Use `$http` in `PhoneDetailController` to fetch the phone details from a JSON file.\n  - Create the template for the detail view.\n- Add CSS styles to make the phone detail page look \"pretty-ish\".\n\n### step-11 _Custom Filters_\n\n- Implement a custom `checkmark` filter.\n- Update the `phoneDetail` template to use the `checkmark` filter.\n- Add a unit test for the `checkmark` filter.\n\n### step-12 _Event Handlers_\n\n- Make the thumbnail images in the phone detail view clickable:\n  - Introduce a `mainImageUrl` property on `PhoneDetailController`.\n  - Implement the `setImage()` method for changing the main image.\n  - Use `ngClick` on the thumbnails to register a handler that changes the main image.\n  - Add an end-to-end test for this feature.\n\n### step-13 _REST and Custom Services_\n\n- Replace `$http` with `$resource`.\n- Create a custom `Phone` service that represents the RESTful client.\n- Use a custom Jasmine equality tester in unit tests to ignore irrelevant properties.\n\n### step-14 _Animations_\n\n- Add animations to the application:\n  - Animate changes to the phone list, adding, removing and reordering phones with `ngRepeat`.\n  - Animate view transitions with `ngView`.\n  - Animate changes to the main phone image in the phone detail view.\n- Showcase three different kinds of animations:\n  - CSS transition animations.\n  - CSS keyframe animations.\n  - JavaScript-based animations.\n\n\n## Development with `angular-phonecat`\n\nThe following docs describe how you can test and develop this application further.\n\n### Installing Dependencies\n\nThe application relies upon various JS libraries, such as AngularJS and jQuery, and Node.js tools,\nsuch as [Karma][karma] and [Protractor][protractor]. You can install these by running:\n\n```\nnpm install\n```\n\nThis will also download the AngularJS files needed for the current step of the tutorial and copy\nthem to `app/lib`.\n\nMost of the scripts described below will run this automatically but it doesn't do any harm to run\nit whenever you like.\n\n*Note copying the AngularJS files from `node_modules` to `app/lib` makes it easier to serve the\nfiles by a web server.*\n\n### Running the Application during Development\n\n- Run `npm start`.\n- Navigate your browser to [http://localhost:8000/](http://localhost:8000/) to see the application\n  running.\n\n### Unit Testing\n\nWe recommend using [Jasmine][jasmine] and [Karma][karma] for your unit tests/specs, but you are free\nto use whatever works for you.\n\n- Start Karma with `npm test`.\n- A browser will start and connect to the Karma server. Chrome and Firefox are the default browsers,\n  others can be captured by loading the same URL or by changing the `karma.conf.js` file.\n- Karma will sit and watch your application and test JavaScript files. To run or re-run tests just\n  change any of your these files.\n\n### End-to-End Testing\n\nWe recommend using [Protractor][protractor] for end-to-end (e2e) testing.\n\nIt requires a webserver that serves the application. See the\n_Running the Application during Development_ section, above.\n\n- Serve the application with: `npm start`\n- In a separate terminal/command line window run the e2e tests: `npm run protractor`.\n- Protractor will execute the e2e test scripts against the web application itself. The project is\n  set up to run the tests on Chrome directly. If you want to run against other browsers, you must\n  modify the configuration at `e2e-tests/protractor-conf.js`.\n\n**Note:**\nUnder the hood, Protractor uses the [Selenium Standalone Server][selenium], which in turn requires\nthe [Java Development Kit (JDK)][jdk] to be installed on your local machine. Check this by running\n`java -version` from the command line.\n\nIf JDK is not already installed, you can download it [here][jdk-download].\n\n\n## Application Directory Layout\n\n```\napp/                     --\u003e all the source code of the app (along with unit tests)\n  lib/...                --\u003e 3rd party JS/CSS libraries, including AngularJS and jQuery (copied over from `node_modules/`)\n  core/                  --\u003e all the source code of the core module (stuff used throughout the app)\n    checkmark/...        --\u003e files for the `checkmark` filter, including JS source code, specs\n    phone/...            --\u003e files for the `core.phone` submodule, including JS source code, specs\n    core.module.js       --\u003e the core module\n  img/...                --\u003e image files\n  phone-detail/...       --\u003e files for the `phoneDetail` module, including JS source code, HTML templates, specs\n  phone-list/...         --\u003e files for the `phoneList` module, including JS source code, HTML templates, specs\n  phones/...             --\u003e static JSON files with phone data (used to fake a backend API)\n  app.animations.css     --\u003e hooks for running CSS animations with `ngAnimate`\n  app.animations.js      --\u003e hooks for running JS animations with `ngAnimate`\n  app.config.js          --\u003e app-wide configuration of AngularJS services\n  app.css                --\u003e default stylesheet\n  app.module.js          --\u003e the main app module\n  index.html             --\u003e app layout file (the main HTML template file of the app)\n\ne2e-tests/               --\u003e config and source files for e2e tests\n  protractor.conf.js     --\u003e config file for running e2e tests with Protractor\n  scenarios.js           --\u003e e2e specs\n\nnode_modules/...         --\u003e 3rd party libraries and development tools (fetched using `npm`)\n\nscripts/                 --\u003e handy scripts\n  private/...            --\u003e private scripts used by the AngularJS Team to maintain this repo\n  update-repo.sh         --\u003e script for pulling down the latest version of this repo (!!! DELETES ALL CHANGES YOU HAVE MADE !!!)\n\nkarma.conf.js            --\u003e config file for running unit tests with Karma\npackage.json             --\u003e Node.js specific metadata, including development tools dependencies\npackage-lock.json        --\u003e Npm specific metadata, including versions of installed development tools dependencies\n```\n\n## Contact\n\nFor more information on AngularJS, please check out https://angularjs.org/.\n\n\n[angular-seed]: https://github.com/angular/angular-seed\n[git-home]: https://git-scm.com/\n[git-setup]: https://help.github.com/articles/set-up-git\n[google-phone-gallery]: http://web.archive.org/web/20131215082038/http://www.android.com/devices\n[jasmine]: https://jasmine.github.io/\n[jdk]: https://wikipedia.org/wiki/Java_Development_Kit\n[jdk-download]: http://www.oracle.com/technetwork/java/javase/downloads\n[karma]: https://karma-runner.github.io/\n[node]: https://nodejs.org/\n[protractor]: http://www.protractortest.org/\n[selenium]: http://docs.seleniumhq.org/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular%2Fangular-phonecat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangular%2Fangular-phonecat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular%2Fangular-phonecat/lists"}