{"id":21043499,"url":"https://github.com/errorpro/angular-test","last_synced_at":"2025-03-13T21:44:42.802Z","repository":{"id":27550262,"uuid":"31031937","full_name":"ErrorPro/Angular-test","owner":"ErrorPro","description":null,"archived":false,"fork":false,"pushed_at":"2019-11-19T17:40:38.000Z","size":12511,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-20T17:24:23.410Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ErrorPro.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":"2015-02-19T19:14:55.000Z","updated_at":"2019-11-19T17:40:40.000Z","dependencies_parsed_at":"2022-09-02T11:11:57.750Z","dependency_job_id":null,"html_url":"https://github.com/ErrorPro/Angular-test","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErrorPro%2FAngular-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErrorPro%2FAngular-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErrorPro%2FAngular-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErrorPro%2FAngular-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ErrorPro","download_url":"https://codeload.github.com/ErrorPro/Angular-test/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243489806,"owners_count":20298997,"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-11-19T14:13:04.890Z","updated_at":"2025-03-13T21:44:42.779Z","avatar_url":"https://github.com/ErrorPro.png","language":"JavaScript","readme":"# AngularJS Phone Catalog Tutorial Application\n\n## Overview\n\nThis application takes the developer through the process of building a web-application using\nangular. The application is loosely based on the **Google Phone Gallery**, which no longer\nexists. Here is a historical reference: [Google Phone Gallery on WayBack](http://web.archive.org/web/20131215082038/http://www.android.com/devices/).\n\nEach tagged commit is a separate lesson teaching a single aspect of angular.\n\nThe full tutorial can be found at http://docs.angularjs.org/tutorial.\n\n## Prerequisites\n\n### Git\n\n- A good place to learn about setting up git is [here][git-github].\n- Git [home][git-home] (download, documentation).\n\n### Node.js and Tools\n\n- Get [Node.js][node-download].\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] 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 angular application.\n\n## Commits / Tutorial Outline\n\nYou can check out any point of the tutorial using\n    git checkout step-?\n\nTo see the changes which between any two lessons use the git diff command.\n    git diff step-?..step-?\n\n### step-0\n\n- Add ngApp directive to bootstrap the app.\n- Add simple template with an expression.\n\n\n### step-1\n\n- Add static html list with two phones into index.html. We will convert this static page into\n  dynamic one with the help of angular.\n\n\n### step-2\n\n- Convert the static html list into dynamic one by:\n  - creating `PhoneListCtrl` controller for the application.\n  - extracting the data from HTML, moving it into the controller as an in-memory dataset.\n  - converting the static HTML document into an Angular template with the use of the `ngRepeat`\n    directive which iterates over the dataset of phones.\n    `ngRepeat` clones its contents for each instance in the dataset and renders it into the view.\n- Add a simple unit test to show off how to write tests and run them with Karma.\n\n\n### step-3\n\n\n- Add a search box to demonstrate how:\n  - the data-binding works on input fields.\n  - to use the `filter` filter.\n  - `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 how to run them with Protractor.\n  - prove that the search box and the repeater are correctly wired together.\n\n\n### step-4\n\n- Add `age` property to each phone in the data model.\n- Add a `\u003cselect\u003e` input to change the phone list order.\n- Override the default order value in the controller.\n- Add unit and e2e tests for this feature.\n\n### step-5\n\n- Replace the in-memory dataset with data loaded from the server (in\n  the form of static `phones.json` file).\n  - The `phones.json` file is loaded using the `$http` service.\n- Demonstrate the use of [services][service] and [dependency injection][DI].\n  - The [$http] service is injected into the controller through [dependency injection][DI].\n\n\n### step-6\n\n- Add phone images and links to new pages that show the phone details.\n- Add end2end tests that verify the links to the detail pages.\n- Add CSS to style the page just a notch.\n\n\n### step-7\n\n- Introduce the [$route] service which allows binding URLs for deep-linking with\n  views:\n  - Create `PhoneCatCtrl` which governs the entire app and contains $route configuration.\n  - Install `angular-route` using bower and load the `ngRoute` module.\n    (Be sure to run npm install again.)\n  - Copy route parameters to root scope `params` property for access in sub controllers.\n  - Replace the contents of `index.html` with the `ngView` directive, which will display the partial\n    template of the current route.\n\n- Create phone list route:\n  - Map `/phones` route to `PhoneListCtrl` and `partials/phones-list.html`.\n  - Preserve existing `PhoneListCtrl` controller.\n  - Move existing html from `index.html` to `partials/phone-list.html`.\n- Create phone details route:\n  - Map `/phones/\u003cphone-id\u003e` route to `PhoneDetailCtrl` and `partials/phones-detail.html`.\n  - Create empty placeholder `PhoneDetailsCtrl` controller.\n\n\n### step-8\n\n\n- Implement `PhoneDetailCtrl` controller to fetch the details for a specific phone from a JSON file\n  using `$http` service.\n- Update the template for the phone detailed view.\n- Add CSS to make the phone details page look \"pretty\".\n\n\n### step-9\n\n- Add custom `checkmark` filter.\n- Update phone detail template to use `checkmark` filter.\n- Add unit test for the filter.\n\n### step-10\n\nIn the phone detail view, clicking on a thumbnail image, changes the main phone image to be the\nlarge version of the thumbnail image.\n\n- Define `mainImageUrl` model variable in the `PhoneDetailCtrl` and set its default value.\n- Create `setImage()` controller method to change `mainImageUrl`.\n- Register an expression with the `ngClick` directive on thumb images to set the main image, using\n  `setImage()`.\n- Add e2e tests for this feature.\n- Add CSS to change the mouse cursor when user points at thumnail images.\n\n\n### step-11\n\n- Replace [$http] with [$resource].\n- Created a custom `Phone` service that represents the `$resource` client.\n\n\n### step-12\n\n- Add animations to the application:\n  - Animate changes to the phone list, adding, removing and reordering phones.\n  - Animate changes to the main phone image in the detail view.\n\n\n## Development with angular-phonecat\n\nThe following docs describe how you can test and develop further this application.\n\n\n### Installing dependencies\n\nThe application relies upon various node.js tools, such as Bower, Karma and Protractor.  You can\ninstall these by running:\n\n```\nnpm install\n```\n\nThis will also run bower, which will download the angular files needed for the current step of the\ntutorial.\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### Running the app during development\n\n- Run `npm start`\n- navigate your browser to `http://localhost:8000/app/index.html` to see the app running in your browser.\n\n### Running unit tests\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 is the default browser, others can\n  be captured by loading the same url as the one in Chrome or by changing the `test/karma.conf.js`\n  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\n### End to end testing\n\nWe recommend using [Jasmine][jasmine] and [Protractor][protractor] for end-to-end testing.\n\nRequires a webserver that serves the application. See Running the app during development, above.\n\n- Serve the application: run `npm start`.\n- In a separate console run the end2end tests: `npm run protractor`. Protractor will execute the\n  end2end test scripts against the web application itself.\n  - The configuration is set up to run the tests on Chrome directly. If you want to run against\n    other browsers then you must install the webDriver, `npm run update-webdriver`, and modify the\n  configuration at `test/protractor-conf.js`.\n\n## Application Directory Layout\n\n    app/                --\u003e all of the files to be used in production\n      css/              --\u003e css files\n        app.css         --\u003e default stylesheet\n      img/              --\u003e image files\n      index.html        --\u003e app layout file (the main html template file of the app)\n      js/               --\u003e javascript files\n        app.js          --\u003e the main application module\n        controllers.js  --\u003e application controllers\n        directives.js   --\u003e application directives\n        filters.js      --\u003e custom angular filters\n        services.js     --\u003e custom angular services\n        animations.js   --\u003e hooks for running JQuery animations with ngAnimate\n      partials/         --\u003e angular view partials (partial html templates) used by ngRoute\n        partial1.html\n        partial2.html\n      bower_components  --\u003e 3rd party js libraries, including angular and jquery\n\n    scripts/            --\u003e handy scripts\n      update-repo.sh       --\u003e pull down the latest version of this repos\n                               (BE CAREFUL THIS DELETES ALL CHANGES YOU HAVE MADE)\n      private/             --\u003e private scripts used by the Angular Team to maintain this repo\n    test/               --\u003e test source files and libraries\n      karma.conf.js        --\u003e config file for running unit tests with Karma\n      protractor-conf.js   --\u003e config file for running e2e tests with Protractor\n      e2e/\n        scenarios.js       --\u003e end-to-end specs\n      unit/             --\u003e unit level specs/tests\n        controllersSpec.js --\u003e specs for controllers\n        directivesSpec.js  --\u003e specs for directives\n        filtersSpec.js     --\u003e specs for filters\n        servicesSpec.js    --\u003e specs for services\n\n## Contact\n\nFor more information on AngularJS please check out http://angularjs.org/\n\n[7 Zip]: http://www.7-zip.org/\n[angular-seed]: https://github.com/angular/angular-seed\n[DI]: http://docs.angularjs.org/guide/di\n[directive]: http://docs.angularjs.org/guide/directive\n[filterFilter]: http://docs.angularjs.org/api/ng/filter/filter\n[git-home]: http://git-scm.com\n[git-github]: http://help.github.com/set-up-git-redirect\n[ngRepeat]: http://docs.angularjs.org/api/ng/directive/ngRepeat\n[ngView]: http://docs.angularjs.org/api/ngRoute/directive/ngView\n[node-download]: http://nodejs.org/download/\n[$resource]: http://docs.angularjs.org/api/ngResource/service/$resource\n[$route]: http://docs.angularjs.org/api/ngRoute/service/$route\n[protractor]: https://github.com/angular/protractor\n[jasmine]: https://jasmine.github.io/\n[karma]: http://karma-runner.github.io\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferrorpro%2Fangular-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferrorpro%2Fangular-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferrorpro%2Fangular-test/lists"}