{"id":16946349,"url":"https://github.com/abritopach/angular-phonecat-upgrade","last_synced_at":"2025-04-05T14:44:22.560Z","repository":{"id":38681409,"uuid":"211947484","full_name":"abritopach/angular-phonecat-upgrade","owner":"abritopach","description":"Sample project where you migrate from AngularJS Phone Catalog to Angular (Angular 8, current version) Phone Catalog.","archived":false,"fork":false,"pushed_at":"2022-12-06T17:29:22.000Z","size":12986,"stargazers_count":0,"open_issues_count":16,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-11T11:42:17.719Z","etag":null,"topics":["angular","angular8","angularjs","angularjs-phone-catalog","tutorial","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/abritopach.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":"2019-09-30T20:11:31.000Z","updated_at":"2019-10-15T17:03:32.000Z","dependencies_parsed_at":"2023-01-24T11:30:50.804Z","dependency_job_id":null,"html_url":"https://github.com/abritopach/angular-phonecat-upgrade","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/abritopach%2Fangular-phonecat-upgrade","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abritopach%2Fangular-phonecat-upgrade/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abritopach%2Fangular-phonecat-upgrade/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abritopach%2Fangular-phonecat-upgrade/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abritopach","download_url":"https://codeload.github.com/abritopach/angular-phonecat-upgrade/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247353676,"owners_count":20925325,"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":["angular","angular8","angularjs","angularjs-phone-catalog","tutorial","typescript"],"created_at":"2024-10-13T21:27:12.627Z","updated_at":"2025-04-05T14:44:22.542Z","avatar_url":"https://github.com/abritopach.png","language":"TypeScript","readme":"# Angular-Phonecat-Upgrade\n\n## Overview\n\nSample project where you migrate from AngularJS Phone Catalog to Angular (Angular 8, current version) Phone Catalog.\n\nAngular is the name for the Angular of today and tomorrow.\nAngularJS is the name for all 1.x versions of Angular.\n\nThe full migration guide can be found at https://angular.io/guide/upgrade#upgrading-from-angularjs-to-angular.\n\n## PhoneCat Upgrade Tutorial\n\nWhen performing the migration process, although the [tutorial](https://angular.io/guide/upgrade#phonecat-upgrade-tutorial) is quite detailed, code is missing in some sections of the tutorial.\n\nSo that you don't have the problems I had I leave the code in each step.\n\n### Steps\n\n#### Step 1: Switching to TypeScript\n\nInstall TypeScript to the project.\n\n```bash\n  npm i typescript --save-dev\n```\n\nInstall type definitions for the existing libraries that you're using but that don't come with prepackaged types: AngularJS and the Jasmine unit test framework.\n\n```bash\n  npm install @types/jasmine @types/angular @types/angular-animate @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev\n```\n\nAdd a tsconfig.json in the project directory.\n\n```bash\n  {\n    \"compileOnSave\": false,\n    \"compilerOptions\": {\n      \"sourceMap\": true,\n      \"declaration\": false,\n      \"module\": \"umd\",\n      \"moduleResolution\": \"node\",\n      \"emitDecoratorMetadata\": true,\n      \"experimentalDecorators\": true,\n      \"importHelpers\": true,\n      \"target\": \"es2015\",\n      \"typeRoots\": [\n        \"node_modules/@types\"\n      ],\n      \"lib\": [\n        \"es2018\",\n        \"dom\"\n      ]\n    },\n    \"angularCompilerOptions\": {\n      \"fullTemplateTypeCheck\": true,\n      \"strictInjectionParameters\": true\n    }\n  }\n```\n\nAdd some npm scripts in package.json to compile the TypeScript files to JavaScript (based on the tsconfig.json configuration file).\n\n```bash\n  \"scripts\": {\n  \"tsc\": \"tsc\",\n  \"tsc:w\": \"tsc -w\",\n  ...\n\n```\n\nLaunch the TypeScript compiler from the command line in watch mode\n\n```bash\n  npm run tsc:w\n```\n\nNext, convert your current JavaScript files into TypeScript. Show tutorial.\n\n#### Step 2: Installing Angular\n\nAdd Angular and the other new dependencies to package.json\n\n```bash\n  ...\n  \"dependencies\": {\n    \"@angular/common\": \"^8.2.8\",\n    \"@angular/compiler\": \"^8.2.8\",\n    \"@angular/core\": \"^8.2.8\",\n    \"@angular/forms\": \"^8.2.8\",\n    \"@angular/http\": \"~7.2.15\",\n    \"@angular/platform-browser\": \"^8.2.8\",\n    \"@angular/platform-browser-dynamic\": \"^8.2.8\",\n    \"@angular/router\": \"^8.2.8\",\n    \"angular-in-memory-web-api\": \"~0.3.0\",\n    \"core-js\": \"^2.4.1\",\n    \"rxjs\": \"^6.5.3\",\n    \"systemjs\": \"0.19.40\",\n    \"zone.js\": \"^0.10.2\"\n  },\n  ...\n```\n\nAdd systemjs.config.js to the project root directory\n\n```bash\n  /**\n * System configuration for Angular samples\n * Adjust as necessary for your application needs.\n */\n(function (global) {\n    // #docregion paths\n    System.config({\n      paths: {\n        // paths serve as alias\n        'npm:': '/node_modules/'\n      },\n      map: {\n        'ng-loader': '/systemjs-angular-loader.js',\n        app: '/app',\n        // #enddocregion paths\n        // angular bundles\n        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',\n        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',\n        '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',\n        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',\n        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',\n        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',\n        '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',\n        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',\n        // #docregion paths\n        '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',\n        // #enddocregion paths\n  \n        // other libraries\n        'rxjs': 'npm:rxjs',\n        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',\n        'tslib': 'npm:tslib/tslib.js',\n        // #docregion paths\n      },\n      // #enddocregion paths\n  \n      // packages tells the System loader how to load when no filename and/or no extension\n      packages: {\n        'app': {\n          defaultExtension: 'js',\n          meta: {\n            './*.js': {\n              loader: 'ng-loader'\n            }\n          }\n        },\n        'angular-in-memory-web-api': {\n          main: './index.js',\n          defaultExtension: 'js'\n        },\n        'rxjs/ajax': {main: 'index.js', defaultExtension: 'js' },\n        'rxjs/operators': {main: 'index.js', defaultExtension: 'js' },\n        'rxjs/testing': {main: 'index.js', defaultExtension: 'js' },\n        'rxjs/websocket': {main: 'index.js', defaultExtension: 'js' },\n        'rxjs': { main: 'index.js', defaultExtension: 'js' },\n      }\n    });\n  })(this);\n  \n```\n\nAdd systemjs-angular-loader.js to the project root directory\n\n```bash\n  var templateUrlRegex = /templateUrl\\s*:(\\s*['\"`](.*?)['\"`]\\s*)/gm;\n  var stylesRegex = /styleUrls *:(\\s*\\[[^\\]]*?\\])/g;\n  var stringRegex = /(['`\"])((?:[^\\\\]\\\\\\1|.)*?)\\1/g;\n\nmodule.exports.translate = function(load){\n  if (load.source.indexOf('moduleId') != -1) return load;\n\n  var url = document.createElement('a');\n  url.href = load.address;\n\n  var basePathParts = url.pathname.split('/');\n\n  basePathParts.pop();\n  var basePath = basePathParts.join('/');\n\n  var baseHref = document.createElement('a');\n  baseHref.href = this.baseURL;\n  baseHref = baseHref.pathname;\n\n  if (!baseHref.startsWith('/base/')) { // it is not karma\n    basePath = basePath.replace(baseHref, '');\n  }\n\n  load.source = load.source\n    .replace(templateUrlRegex, function(match, quote, url){\n      var resolvedUrl = url;\n\n      if (url.startsWith('.')) {\n        resolvedUrl = basePath + url.substr(1);\n      }\n\n      return 'templateUrl: \"' + resolvedUrl + '\"';\n    })\n    .replace(stylesRegex, function(match, relativeUrls) {\n      var urls = [];\n\n      while ((match = stringRegex.exec(relativeUrls)) !== null) {\n        if (match[2].startsWith('.')) {\n          urls.push('\"' + basePath + match[2].substr(1) + '\"');\n        } else {\n          urls.push('\"' + match[2] + '\"');\n        }\n      }\n\n      return \"styleUrls: [\" + urls.join(', ') + \"]\";\n    });\n\n  return load;\n};\n\n```\n\nOnce these are done, run:\n\n```bash\n  npm install\n```\n\nMove the app/index.html file to the project root directory. Then change the development server root path in package.json to also point to the project root instead of app.\n\n```bash\n  \"start\": \"http-server ./ -a localhost -p 8000 -c-1\",\n```\n\nNow you're able to serve everything from the project root to the web browser. But you do not want to have to change all the image and data paths used in the application code to match the development setup. For that reason, you'll add a \u003cbase\u003e tag to index.html, which will cause relative URLs to be resolved back to the /app directory:\n\n```bash\n  \u003cbase href=\"/app/\"\u003e\n```\n\nNow you can load Angular via SystemJS. You'll add the Angular polyfills and the SystemJS config to the end of the \u003chead\u003e section, and then you'll use System.import to load the actual application:\n\n```bash\n  \u003cscript src=\"/node_modules/core-js/client/shim.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"/node_modules/zone.js/dist/zone.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"/node_modules/systemjs/dist/system.src.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"/systemjs.config.js\"\u003e\u003c/script\u003e\n  \u003cscript\u003e\n    System.import('/app');\n  \u003c/script\u003e\n```\n\nInstall the upgrade package via npm install @angular/upgrade --save and add a mapping for the @angular/upgrade/static package.\n\nIf you get the following error when access to http://localhost:8000 \n\n```bash\nzone.js:699 Unhandled Promise rejection: (SystemJS) Unexpected token '\u003c'\n\tSyntaxError: Unexpected token '\u003c'\n\t    at eval (\u003canonymous\u003e)\n\tEvaluating http://localhost:8000/app\n\tError loading http://localhost:8000/app ; Zone: \u003croot\u003e ; Task: Promise.then ; Value: (SystemJS) Unexpected token '\u003c'\n\tSyntaxError: Unexpected token '\u003c'\n\t    at eval (\u003canonymous\u003e)\n\tEvaluating http://localhost:8000/app\n\tError loading http://localhost:8000/app (SystemJS) Unexpected token '\u003c'\n\tSyntaxError: Unexpected token '\u003c'\n\t    at eval (\u003canonymous\u003e)\n\tEvaluating http://localhost:8000/app\n\tError loading http://localhost:8000/app\n```\n\nis due to this line of code\n\n```bash\n\u003cscript\u003e\n    System.import('/app');\n  \u003c/script\u003e\n```\nis solved in step 4 or comment the line for the moment // System.import('/app');\n\nUpdate href in Phone List Template.\n\n```bash\n  ...\n  \u003cul class=\"phones\"\u003e\n    \u003cli ng-repeat=\"phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp\"\n        class=\"thumbnail phone-list-item\"\u003e\n      \u003ca href=\"/#!/phones/{{phone.id}}\" class=\"thumb\"\u003e\n        \u003cimg ng-src=\"{{phone.imageUrl}}\" alt=\"{{phone.name}}\" /\u003e\n      \u003c/a\u003e\n      \u003ca href=\"/#!/phones/{{phone.id}}\"\u003e{{phone.name}}\u003c/a\u003e\n      \u003cp\u003e{{phone.snippet}}\u003c/p\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n  ...\n```\n\n#### Step 3: Creating the AppModule\n\nRename app.module.ts it to app.module.ajs.ts and update the corresponding script name in the index.html.\n\nNow create a new app.module.ts with the minimum NgModule class\n\n```bash\n  import { NgModule } from '@angular/core';\n  import { BrowserModule } from '@angular/platform-browser';\n\n  @NgModule({\n    imports: [\n      BrowserModule,\n    ],\n  })\n  export class AppModule {\n  }\n```\n\n#### Step 4: Bootstrapping a hybrid PhoneCat\n\nFirst, remove the ng-app attribute from index.html. Then import UpgradeModule in the AppModule, and override its ngDoBootstrap method.\n\n```bash\n  import { NgModule } from '@angular/core';\n  import { BrowserModule } from '@angular/platform-browser';\n  import { UpgradeModule } from '@angular/upgrade/static';\n\n  @NgModule({\n    imports: [\n      BrowserModule,\n      UpgradeModule,\n    ],\n  })\n  export class AppModule {\n    constructor(private upgrade: UpgradeModule) { }\n    ngDoBootstrap() {\n      this.upgrade.bootstrap(document.documentElement, ['phonecatApp']);\n    }\n  }\n```\n\nFinally, bootstrap the AppModule in app/main.ts. This file has been configured as the application entrypoint in systemjs.config.js, so it is already being loaded by the browser.\n\n```bash\n  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n  import { AppModule } from './app.module';\n\n  platformBrowserDynamic().bootstrapModule(AppModule);\n```\n\nModify systemjs.config.js\n\n```bash\n  ...\n   // packages tells the System loader how to load when no filename and/or no extension\n      packages: {\n        'app': {\n          main: './main.js',\n          defaultExtension: 'js',\n          meta: {\n            './*.js': {\n              loader: 'ng-loader'\n            }\n          }\n        },\n  ...\n```\n\n#### Step 5: Upgrading the Phone service\n\nImport and add HttpClientModule to the imports array of the AppModule.\n\n```bash\n  import { NgModule } from '@angular/core';\n  import { BrowserModule } from '@angular/platform-browser';\n  import { UpgradeModule } from '@angular/upgrade/static';\n  import { HttpClientModule } from '@angular/common/http';\n\n  @NgModule({\n    imports: [\n      BrowserModule,\n      UpgradeModule,\n      HttpClientModule\n    ],\n  })\n  export class AppModule {\n    constructor(private upgrade: UpgradeModule) { }\n    ngDoBootstrap() {\n      this.upgrade.bootstrap(document.documentElement, ['phonecatApp']);\n    }\n  }\n```\n\nUpgrade the Phone service itself.\n\n```bash\n  import { Injectable } from '@angular/core';\n  import { HttpClient } from '@angular/common/http';\n  import { Observable } from 'rxjs';\n\n  declare var angular: angular.IAngularStatic;\n  import { downgradeInjectable } from '@angular/upgrade/static';\n\n  export interface PhoneData {\n    name: string;\n    snippet: string;\n    images: string[];\n  }\n\n  @Injectable()\n  export class Phone {\n    constructor(private http: HttpClient) { }\n    query(): Observable\u003cPhoneData[]\u003e {\n      return this.http.get\u003cPhoneData[]\u003e(`phones/phones.json`);\n    }\n    get(id: string): Observable\u003cPhoneData\u003e {\n      return this.http.get\u003cPhoneData\u003e(`phones/${id}.json`);\n    }\n  }\n\n  angular.module('core.phone')\n    .factory('phone', downgradeInjectable(Phone));\n```\n\nThe new Phone service has the same features as the original, ngResource-based service. Because it's an Angular service, you register it with the NgModule providers.\n\n```bash\n  import { NgModule } from '@angular/core';\n  import { BrowserModule } from '@angular/platform-browser';\n  import { UpgradeModule } from '@angular/upgrade/static';\n  import { HttpClientModule } from '@angular/common/http';\n  import { Phone } from './core/phone/phone.service';\n\n  @NgModule({\n    imports: [\n      BrowserModule,\n      UpgradeModule,\n      HttpClientModule\n    ],\n    providers: [\n      Phone\n    ]\n  })\n  export class AppModule {\n    constructor(private upgrade: UpgradeModule) { }\n    ngDoBootstrap() {\n      this.upgrade.bootstrap(document.documentElement, ['phonecatApp']);\n    }\n  }\n```\n\nRemove the \u003cscript\u003e tag for the phone service from index.html\n\nAt this point, you can switch the two components to use the new service instead of the old one. While you $inject it as the downgraded phone factory, it's really an instance of the Phone class and you annotate its type accordingly.\n\napp/phone-list/phone-list.component.ts\n\n```bash\n  declare var angular: angular.IAngularStatic;\n  import { Phone, PhoneData } from '../core/phone/phone.service';\n\n  class PhoneListController {\n    phones: PhoneData[];\n    orderProp: string;\n\n    static $inject = ['phone'];\n    constructor(phone: Phone) {\n      phone.query().subscribe(phones =\u003e {\n        this.phones = phones;\n      });\n      this.orderProp = 'age';\n    }\n\n  }\n\n  angular.\n    module('phoneList').\n    component('phoneList', {\n      templateUrl: 'app/phone-list/phone-list.template.html',\n      controller: PhoneListController\n    });\n```\n\napp/phone-detail/phone-detail.component.ts\n\n```bash\n  declare var angular: angular.IAngularStatic;\n  import { Phone, PhoneData } from '../core/phone/phone.service';\n\n  class PhoneDetailController {\n    phone: PhoneData;\n    mainImageUrl: string;\n\n    static $inject = ['$routeParams', 'phone'];\n    constructor($routeParams: angular.route.IRouteParamsService, phone: Phone) {\n      let phoneId = $routeParams['phoneId'];\n      phone.get(phoneId).subscribe(data =\u003e {\n        this.phone = data;\n        this.setImage(data.images[0]);\n      });\n    }\n\n    setImage(imageUrl: string) {\n      this.mainImageUrl = imageUrl;\n    }\n  }\n\n  angular.\n    module('phoneDetail').\n    component('phoneDetail', {\n      templateUrl: 'phone-detail/phone-detail.template.html',\n      controller: PhoneDetailController\n    });\n```\n\n#### Step 6: Upgrading Components\n\napp/phone-list/phone-list.component.ts\n\n```bash\n\n  declare var angular: angular.IAngularStatic;\n  import { downgradeComponent } from '@angular/upgrade/static';\n\n  import { Component } from '@angular/core';\n  import { Phone, PhoneData } from '../core/phone/phone.service';\n\n  @Component({\n    selector: 'phone-list',\n    templateUrl: './phone-list.template.html'\n  })\n  export class PhoneListComponent {\n    phones: PhoneData[];\n    query: string;\n    orderProp: string;\n\n    constructor(phone: Phone) {\n      phone.query().subscribe(phones =\u003e {\n        this.phones = phones;\n      });\n      this.orderProp = 'age';\n    }\n  \n    getPhones(): PhoneData[] {\n      return this.sortPhones(this.filterPhones(this.phones));\n    }\n\n    private filterPhones(phones: PhoneData[]) {\n      if (phones \u0026\u0026 this.query) {\n        return phones.filter(phone =\u003e {\n          let name = phone.name.toLowerCase();\n          let snippet = phone.snippet.toLowerCase();\n          return name.indexOf(this.query) \u003e= 0 || snippet.indexOf(this.query) \u003e= 0;\n        });\n      }\n      return phones;\n    }\n\n    private sortPhones(phones: PhoneData[]) {\n      if (phones \u0026\u0026 this.orderProp) {\n        return phones\n          .slice(0) // Make a copy\n          .sort((a, b) =\u003e {\n            if (a[this.orderProp] \u003c b[this.orderProp]) {\n              return -1;\n            } else if ([b[this.orderProp] \u003c a[this.orderProp]]) {\n              return 1;\n            } else {\n              return 0;\n            }\n          });\n      }\n      return phones;\n    }\n  }\n\n  angular.module('phoneList')\n  .directive(\n    'phoneList',\n    downgradeComponent({component: PhoneListComponent}) as angular.IDirectiveFactory\n  );\n```\n\napp/phone-list/phone-list.template.html (search controls)\n\n```bash\n  \u003cp\u003e\n    Search:\n    \u003cinput [(ngModel)]=\"query\" /\u003e\n  \u003c/p\u003e\n\n  \u003cp\u003e\n    Sort by:\n    \u003cselect [(ngModel)]=\"orderProp\"\u003e\n      \u003coption value=\"name\"\u003eAlphabetical\u003c/option\u003e\n      \u003coption value=\"age\"\u003eNewest\u003c/option\u003e\n    \u003c/select\u003e\n  \u003c/p\u003e\n```\n\napp/phone-list/phone-list.template.html (phones)\n\n```bash\n  \u003cul class=\"phones\"\u003e\n    \u003cli *ngFor=\"let phone of getPhones()\"\n        class=\"thumbnail phone-list-item\"\u003e\n      \u003ca href=\"/#!/phones/{{phone.id}}\" class=\"thumb\"\u003e\n        \u003cimg [src]=\"phone.imageUrl\" [alt]=\"phone.name\" /\u003e\n      \u003c/a\u003e\n      \u003ca href=\"/#!/phones/{{phone.id}}\" class=\"name\"\u003e{{phone.name}}\u003c/a\u003e\n      \u003cp\u003e{{phone.snippet}}\u003c/p\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n```\n\napp.module.ts\n\n```bash\n  import { NgModule } from '@angular/core';\n  import { BrowserModule } from '@angular/platform-browser';\n  import { UpgradeModule } from '@angular/upgrade/static';\n  import { Phone } from './core/phone/phone.service';\n  import { HttpClientModule } from '@angular/common/http';\n\n  import { FormsModule } from '@angular/forms';\n  import { PhoneListComponent } from './phone-list/phone-list.component';\n\n  @NgModule({\n  imports: [\n      BrowserModule,\n      UpgradeModule,\n      HttpClientModule,\n      FormsModule,\n  ],\n  providers: [\n      Phone\n  ],\n  declarations: [\n      PhoneListComponent,\n    ],\n    entryComponents: [\n      PhoneListComponent\n    ]\n  })\n  export class AppModule {\n  constructor(private upgrade: UpgradeModule) { }\n  ngDoBootstrap() {\n      this.upgrade.bootstrap(document.documentElement, ['phonecatApp']);\n  }\n}\n```\n\nRemove the \u003cscript\u003e tag for the phone list component from index.html.\n\napp/phone-detail/phone-detail.component.ts\n\n```bash\n  declare var angular: angular.IAngularStatic;\n  import { downgradeComponent } from '@angular/upgrade/static';\n\n  import { Component } from '@angular/core';\n\n  import { Phone, PhoneData } from '../core/phone/phone.service';\n  import { RouteParams } from '../ajs-upgraded-providers';\n\n  @Component({\n    selector: 'phone-detail',\n    templateUrl: './phone-detail.template.html',\n  })\n  export class PhoneDetailComponent {\n    phone: PhoneData;\n    mainImageUrl: string;\n\n    constructor(routeParams: RouteParams, phone: Phone) {\n      phone.get(routeParams['phoneId']).subscribe(phone =\u003e {\n        this.phone = phone;\n        this.setImage(phone.images[0]);\n      });\n    }\n\n    setImage(imageUrl: string) {\n      this.mainImageUrl = imageUrl;\n    }\n  }\n\n  angular.module('phoneDetail')\n    .directive(\n      'phoneDetail',\n      downgradeComponent({component: PhoneDetailComponent}) as angular.IDirectiveFactory\n    );\n```\n\nCreate ajs-upgraded-providers.ts and import it in app.module.ts\n\napp/ajs-upgraded-providers.ts\n\n```bash\n  export abstract class RouteParams {\n  [key: string]: string;\n  }\n\n  export function routeParamsFactory(i: any) {\n    return i.get('$routeParams');\n  }\n\n  export const routeParamsProvider = {\n    provide: RouteParams,\n    useFactory: routeParamsFactory,\n    deps: ['$injector']\n  };\n```\n\napp/app.module.ts ($routeParams)\n\n```bash\n  import { NgModule } from '@angular/core';\n  import { BrowserModule } from '@angular/platform-browser';\n  import { UpgradeModule } from '@angular/upgrade/static';\n  import { Phone } from './core/phone/phone.service';\n  import { HttpClientModule } from '@angular/common/http';\n\n  import { FormsModule } from '@angular/forms';\n  import { PhoneListComponent } from './phone-list/phone-list.component';\n\n  import { routeParamsProvider } from './ajs-upgraded-provider';\n\n  @NgModule({\n  imports: [\n      BrowserModule,\n      UpgradeModule,\n      HttpClientModule,\n      FormsModule,\n  ],\n  providers: [\n      Phone,\n      routeParamsProvider\n  ],\n  declarations: [\n      PhoneListComponent,\n    ],\n    entryComponents: [\n      PhoneListComponent\n    ]\n  })\n  export class AppModule {\n  constructor(private upgrade: UpgradeModule) { }\n  ngDoBootstrap() {\n      this.upgrade.bootstrap(document.documentElement, ['phonecatApp']);\n  }\n}\n```\n\napp/phone-detail/phone-detail.template.html\n\n```bash\n  \u003cdiv *ngIf=\"phone\"\u003e\n  \u003cdiv class=\"phone-images\"\u003e\n    \u003cimg [src]=\"img\" class=\"phone\"\n        [ngClass]=\"{'selected': img === mainImageUrl}\"\n        *ngFor=\"let img of phone.images\" /\u003e\n  \u003c/div\u003e\n\n  \u003ch1\u003e{{phone.name}}\u003c/h1\u003e\n\n  \u003cp\u003e{{phone.description}}\u003c/p\u003e\n\n  \u003cul class=\"phone-thumbs\"\u003e\n    \u003cli *ngFor=\"let img of phone.images\"\u003e\n      \u003cimg [src]=\"img\" (click)=\"setImage(img)\" /\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003cul class=\"specs\"\u003e\n    \u003cli\u003e\n      \u003cspan\u003eAvailability and Networks\u003c/span\u003e\n      \u003cdl\u003e\n        \u003cdt\u003eAvailability\u003c/dt\u003e\n        \u003cdd *ngFor=\"let availability of phone.availability\"\u003e{{availability}}\u003c/dd\u003e\n      \u003c/dl\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003cspan\u003eBattery\u003c/span\u003e\n      \u003cdl\u003e\n        \u003cdt\u003eType\u003c/dt\u003e\n        \u003cdd\u003e{{phone.battery?.type}}\u003c/dd\u003e\n        \u003cdt\u003eTalk Time\u003c/dt\u003e\n        \u003cdd\u003e{{phone.battery?.talkTime}}\u003c/dd\u003e\n        \u003cdt\u003eStandby time (max)\u003c/dt\u003e\n        \u003cdd\u003e{{phone.battery?.standbyTime}}\u003c/dd\u003e\n      \u003c/dl\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003cspan\u003eStorage and Memory\u003c/span\u003e\n      \u003cdl\u003e\n        \u003cdt\u003eRAM\u003c/dt\u003e\n        \u003cdd\u003e{{phone.storage?.ram}}\u003c/dd\u003e\n        \u003cdt\u003eInternal Storage\u003c/dt\u003e\n        \u003cdd\u003e{{phone.storage?.flash}}\u003c/dd\u003e\n      \u003c/dl\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003cspan\u003eConnectivity\u003c/span\u003e\n      \u003cdl\u003e\n        \u003cdt\u003eNetwork Support\u003c/dt\u003e\n        \u003cdd\u003e{{phone.connectivity?.cell}}\u003c/dd\u003e\n        \u003cdt\u003eWiFi\u003c/dt\u003e\n        \u003cdd\u003e{{phone.connectivity?.wifi}}\u003c/dd\u003e\n        \u003cdt\u003eBluetooth\u003c/dt\u003e\n        \u003cdd\u003e{{phone.connectivity?.bluetooth}}\u003c/dd\u003e\n        \u003cdt\u003eInfrared\u003c/dt\u003e\n        \u003cdd\u003e{{phone.connectivity?.infrared | checkmark}}\u003c/dd\u003e\n        \u003cdt\u003eGPS\u003c/dt\u003e\n        \u003cdd\u003e{{phone.connectivity?.gps | checkmark}}\u003c/dd\u003e\n      \u003c/dl\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003cspan\u003eAndroid\u003c/span\u003e\n      \u003cdl\u003e\n        \u003cdt\u003eOS Version\u003c/dt\u003e\n        \u003cdd\u003e{{phone.android?.os}}\u003c/dd\u003e\n        \u003cdt\u003eUI\u003c/dt\u003e\n        \u003cdd\u003e{{phone.android?.ui}}\u003c/dd\u003e\n      \u003c/dl\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003cspan\u003eSize and Weight\u003c/span\u003e\n      \u003cdl\u003e\n        \u003cdt\u003eDimensions\u003c/dt\u003e\n        \u003cdd *ngFor=\"let dim of phone.sizeAndWeight?.dimensions\"\u003e{{dim}}\u003c/dd\u003e\n        \u003cdt\u003eWeight\u003c/dt\u003e\n        \u003cdd\u003e{{phone.sizeAndWeight?.weight}}\u003c/dd\u003e\n      \u003c/dl\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003cspan\u003eDisplay\u003c/span\u003e\n      \u003cdl\u003e\n        \u003cdt\u003eScreen size\u003c/dt\u003e\n        \u003cdd\u003e{{phone.display?.screenSize}}\u003c/dd\u003e\n        \u003cdt\u003eScreen resolution\u003c/dt\u003e\n        \u003cdd\u003e{{phone.display?.screenResolution}}\u003c/dd\u003e\n        \u003cdt\u003eTouch screen\u003c/dt\u003e\n        \u003cdd\u003e{{phone.display?.touchScreen | checkmark}}\u003c/dd\u003e\n      \u003c/dl\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003cspan\u003eHardware\u003c/span\u003e\n      \u003cdl\u003e\n        \u003cdt\u003eCPU\u003c/dt\u003e\n        \u003cdd\u003e{{phone.hardware?.cpu}}\u003c/dd\u003e\n        \u003cdt\u003eUSB\u003c/dt\u003e\n        \u003cdd\u003e{{phone.hardware?.usb}}\u003c/dd\u003e\n        \u003cdt\u003eAudio / headphone jack\u003c/dt\u003e\n        \u003cdd\u003e{{phone.hardware?.audioJack}}\u003c/dd\u003e\n        \u003cdt\u003eFM Radio\u003c/dt\u003e\n        \u003cdd\u003e{{phone.hardware?.fmRadio | checkmark}}\u003c/dd\u003e\n        \u003cdt\u003eAccelerometer\u003c/dt\u003e\n        \u003cdd\u003e{{phone.hardware?.accelerometer | checkmark}}\u003c/dd\u003e\n      \u003c/dl\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003cspan\u003eCamera\u003c/span\u003e\n      \u003cdl\u003e\n        \u003cdt\u003ePrimary\u003c/dt\u003e\n        \u003cdd\u003e{{phone.camera?.primary}}\u003c/dd\u003e\n        \u003cdt\u003eFeatures\u003c/dt\u003e\n        \u003cdd\u003e{{phone.camera?.features?.join(', ')}}\u003c/dd\u003e\n      \u003c/dl\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003cspan\u003eAdditional Features\u003c/span\u003e\n      \u003cdd\u003e{{phone.additionalFeatures}}\u003c/dd\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\nAdd PhoneDetailComponent component to the NgModule declarations and entryComponents\n\n```bash\n  import { NgModule } from '@angular/core';\n  import { BrowserModule } from '@angular/platform-browser';\n  import { UpgradeModule } from '@angular/upgrade/static';\n  import { Phone } from './core/phone/phone.service';\n  import { HttpClientModule } from '@angular/common/http';\n\n  import { FormsModule } from '@angular/forms';\n  import { PhoneListComponent } from './phone-list/phone-list.component';\n\n  import { routeParamsProvider } from './ajs-upgraded-provider';\n  import { PhoneDetailComponent } from './phone-detail/phone-detail.component';\n\n  @NgModule({\n  imports: [\n      BrowserModule,\n      UpgradeModule,\n      HttpClientModule,\n      FormsModule,\n  ],\n  providers: [\n      Phone,\n      routeParamsProvider\n  ],\n  declarations: [\n      PhoneListComponent,\n      PhoneDetailComponent\n    ],\n    entryComponents: [\n      PhoneListComponent,\n      PhoneDetailComponent\n    ]\n  })\n  export class AppModule {\n  constructor(private upgrade: UpgradeModule) { }\n  ngDoBootstrap() {\n      this.upgrade.bootstrap(document.documentElement, ['phonecatApp']);\n  }\n}\n```\n\nThe AngularJS directive had a checkmark filter. Turn that into an Angular pipe.\n\nThere is no upgrade method to convert filters into pipes. You won't miss it. It's easy to turn the filter function into an equivalent Pipe class. The implementation is the same as before, repackaged in the transform method. Rename the file to checkmark.pipe.ts to conform with Angular conventions\n\napp/core/checkmark/checkmark.pipe.ts\n\n```bash\n  import { Pipe, PipeTransform } from '@angular/core';\n\n  @Pipe({name: 'checkmark'})\n  export class CheckmarkPipe implements PipeTransform {\n    transform(input: boolean) {\n      return input ? '\\u2713' : '\\u2718';\n    }\n  }\n```\n\napp/app.module.ts (checkmarkpipe)\n\n```bash\n  import { NgModule } from '@angular/core';\n  import { BrowserModule } from '@angular/platform-browser';\n  import { UpgradeModule } from '@angular/upgrade/static';\n  import { Phone } from './core/phone/phone.service';\n  import { HttpClientModule } from '@angular/common/http';\n\n  import { FormsModule } from '@angular/forms';\n  import { PhoneListComponent } from './phone-list/phone-list.component';\n\n  import { routeParamsProvider } from './ajs-upgraded-provider';\n  import { PhoneDetailComponent } from './phone-detail/phone-detail.component';\n\n  import { CheckmarkPipe } from './core/checkmark/checkmark.pipe';\n\n  @NgModule({\n  imports: [\n      BrowserModule,\n      UpgradeModule,\n      HttpClientModule,\n      FormsModule,\n  ],\n  providers: [\n      Phone,\n      routeParamsProvider\n  ],\n  declarations: [\n      PhoneListComponent,\n      PhoneDetailComponent,\n      CheckmarkPipe\n    ],\n    entryComponents: [\n      PhoneListComponent,\n      PhoneDetailComponent\n    ]\n  })\n  export class AppModule {\n  constructor(private upgrade: UpgradeModule) { }\n  ngDoBootstrap() {\n      this.upgrade.bootstrap(document.documentElement, ['phonecatApp']);\n  }\n}\n```\n\nRemove the filter \u003cscript\u003e tag from index.html\n\n#### Step 7: Adding The Angular Router And Bootstrap\n\nCreate a new app.component.ts file with the following AppComponent class\n\n```bash\n  import { Component } from '@angular/core';\n\n  @Component({\n    selector: 'phonecat-app',\n    template: '\u003crouter-outlet\u003e\u003c/router-outlet\u003e'\n  })\n  export class AppComponent { }\n```\n\nIt has a simple template that only includes the \u003crouter-outlet\u003e. This component just renders the contents of the active route and nothing else.\n\nThe selector tells Angular to plug this root component into the \u003cphonecat-app\u003e element on the host web page when the application launches.\n\nAdd this \u003cphonecat-app\u003e element to the index.html. It replaces the old AngularJS ng-view directive\n\nindex.html (body)\n\n```bash\n  \u003cbody\u003e\n    \u003cphonecat-app\u003e\u003c/phonecat-app\u003e\n  \u003c/body\u003e\n```\n\napp/app-routing.module.ts\n\n```bash\n  import { NgModule } from '@angular/core';\n  import { Routes, RouterModule } from '@angular/router';\n  import { APP_BASE_HREF, HashLocationStrategy, LocationStrategy } from '@angular/common';\n\n  import { PhoneDetailComponent } from './phone-detail/phone-detail.component';\n  import { PhoneListComponent }   from './phone-list/phone-list.component';\n\n  const routes: Routes = [\n    { path: '', redirectTo: 'phones', pathMatch: 'full' },\n    { path: 'phones',          component: PhoneListComponent },\n    { path: 'phones/:phoneId', component: PhoneDetailComponent }\n  ];\n\n  @NgModule({\n    imports: [ RouterModule.forRoot(routes) ],\n    exports: [ RouterModule ],\n    providers: [\n      { provide: APP_BASE_HREF, useValue: '!' },\n      { provide: LocationStrategy, useClass: HashLocationStrategy },\n    ]\n  })\n  export class AppRoutingModule { }\n```\n\napp/app.module.ts\n\n```bash\n  import { NgModule } from '@angular/core';\n  import { BrowserModule } from '@angular/platform-browser';\n  import { FormsModule } from '@angular/forms';\n  import { HttpClientModule } from '@angular/common/http';\n\n  import { AppRoutingModule } from './app-routing.module';\n  import { AppComponent }     from './app.component';\n  import { CheckmarkPipe }    from './core/checkmark/checkmark.pipe';\n  import { Phone }            from './core/phone/phone.service';\n  import { PhoneDetailComponent } from './phone-detail/phone-detail.component';\n  import { PhoneListComponent }   from './phone-list/phone-list.component';\n\n  @NgModule({\n    imports: [\n      BrowserModule,\n      FormsModule,\n      HttpClientModule,\n      AppRoutingModule\n    ],\n    declarations: [\n      AppComponent,\n      PhoneListComponent,\n      CheckmarkPipe,\n      PhoneDetailComponent\n    ],\n    providers: [\n      Phone\n    ],\n    bootstrap: [ AppComponent ]\n  })\n  export class AppModule {}\n```\n\napp/phone-list/phone-list.template.html (list with links)\n\n```bash\n  \u003cul class=\"phones\"\u003e\n  \u003cli *ngFor=\"let phone of getPhones()\"\n      class=\"thumbnail phone-list-item\"\u003e\n    \u003ca [routerLink]=\"['/phones', phone.id]\" class=\"thumb\"\u003e\n      \u003cimg [src]=\"phone.imageUrl\" [alt]=\"phone.name\" /\u003e\n    \u003c/a\u003e\n    \u003ca [routerLink]=\"['/phones', phone.id]\" class=\"name\"\u003e{{phone.name}}\u003c/a\u003e\n    \u003cp\u003e{{phone.snippet}}\u003c/p\u003e\n  \u003c/li\u003e\n  \u003c/ul\u003e\n```\n\napp/phone-detail/phone-detail.component.ts\n\n```bash\n  import { Component }      from '@angular/core';\n  import { ActivatedRoute } from '@angular/router';\n\n  import { Phone, PhoneData } from '../core/phone/phone.service';\n\n  @Component({\n    selector: 'phone-detail',\n    templateUrl: './phone-detail.template.html'\n  })\n  export class PhoneDetailComponent {\n    phone: PhoneData;\n    mainImageUrl: string;\n\n    constructor(activatedRoute: ActivatedRoute, phone: Phone) {\n      phone.get(activatedRoute.snapshot.paramMap.get('phoneId'))\n        .subscribe((p: PhoneData) =\u003e {\n          this.phone = p;\n          this.setImage(p.images[0]);\n        });\n    }\n\n    setImage(imageUrl: string) {\n      this.mainImageUrl = imageUrl;\n    }\n  }\n```\n\n#### Step 8: Say Goodbye to AngularJS\n\nmain.ts\n\n```bash\n  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\n  import { AppModule } from './app.module';\n\n  platformBrowserDynamic().bootstrapModule(AppModule);\n```\n\nAlso remove any downgradeInjectable() or downgradeComponent() you find, together with the associated AngularJS factory or directive declarations.\n\napp.module.ts\n\n```bash\n  import { NgModule } from '@angular/core';\n  import { BrowserModule } from '@angular/platform-browser';\n  import { FormsModule } from '@angular/forms';\n  import { HttpClientModule } from '@angular/common/http';\n\n  import { AppRoutingModule } from './app-routing.module';\n  import { AppComponent }     from './app.component';\n  import { CheckmarkPipe }    from './core/checkmark/checkmark.pipe';\n  import { Phone }            from './core/phone/phone.service';\n  import { PhoneDetailComponent } from './phone-detail/phone-detail.component';\n  import { PhoneListComponent }   from './phone-list/phone-list.component';\n\n  @NgModule({\n    imports: [\n      BrowserModule,\n      FormsModule,\n      HttpClientModule,\n      AppRoutingModule\n    ],\n    declarations: [\n      AppComponent,\n      PhoneListComponent,\n      CheckmarkPipe,\n      PhoneDetailComponent\n    ],\n    providers: [\n      Phone\n    ],\n    bootstrap: [ AppComponent ]\n  })\n  export class AppModule {}\n```\n\nYou may also completely remove the following files. They are AngularJS module configuration files and not needed in Angular:\n\napp/app.module.ajs.ts\napp/app.config.ts\napp/core/core.module.ts\napp/core/phone/phone.module.ts\napp/phone-detail/phone-detail.module.ts\napp/phone-list/phone-list.module.ts\n\nThe external typings for AngularJS may be uninstalled as well. The only ones you still need are for Jasmine and Angular polyfills. The @angular/upgrade package and its mapping in systemjs.config.js can also go.\n\n```bash\n  npm uninstall @angular/upgrade --save\n  npm uninstall @types/angular @types/angular-animate @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev\n```\n\nFinally, from index.html, remove all references to AngularJS scripts and jQuery. When you're done, this is what it should look like\n\n```bash\n```\n\n\n## Application Directory Layout After Upgrade\n\n```bash\naot/                     --\u003e \napp/                     --\u003e all the source code of the app (along with unit tests)\n  lib/...                --\u003e 3rd party bootstrap CSS library\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 TS source code, specs\n    phone/...            --\u003e files for the phone service, including TS source code, specs\n  img/...                --\u003e image files\n  phone-detail/...       --\u003e files for the `phoneDetail` component, including TS source code, HTML templates, specs\n  phone-list/...         --\u003e files for the `phoneList` component, including TS source code, HTML templates, specs\n  phones/...             --\u003e static JSON files with phone data (used to fake a backend API)\n  app.css                --\u003e default stylesheet\n  app.component.ts       --\u003e the main app component\n  app.module.ts          --\u003e the main app module\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.ts          --\u003e e2e specs\n\nnode_modules/...         --\u003e 3rd party libraries and development tools (fetched using `npm`)\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\nindex.html               --\u003e app layout file (the main HTML template file of the app)\nmain.ts\nmain-aot.ts\nsystemjs.config.js\nsystemjs-angular-loader.js\ntsconfig.json\n```\n\n## Original 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## Tools to help with AngularJS to Angular Migrations\n\n### ngMigration Assistant\n\n[ngMigration Assistant](https://github.com/ellamaolson/ngMigration-Assistant) is a command-line tool that analyzes an AngularJS application and recommends a migration path. It provides statistics on the complexity, size, and patterns of an app. It outlines the necessary preparation work for migrating to Angular.\n\n### ngMigration Forum\n\nThe new [ngMigration Forum](https://github.com/angular/ngMigration-Forum/wiki) is a community hub that provides a starting place to find information about migration paths, tools, and to consolidate some of the best information and experts from the web.\n\n## Others AngularJS to Angular migration repositories\n\n* https://github.com/angular/angular/tree/master/aio/content/examples/upgrade-phonecat-2-hybrid\n* https://github.com/timofeysie/angular-phonecat-upgrade\n* https://github.com/melxx001/angular2-phonecat-migration\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","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabritopach%2Fangular-phonecat-upgrade","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabritopach%2Fangular-phonecat-upgrade","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabritopach%2Fangular-phonecat-upgrade/lists"}