chore: rename files in ngUpgrade (#3146)

This commit is contained in:
Jesús Rodríguez 2017-01-26 15:24:10 +01:00 committed by GitHub
parent de4903be56
commit b968cabe34
40 changed files with 61 additions and 139 deletions

View File

@ -9,7 +9,7 @@ describe('Upgrade Tests', function () {
setProtractorToHybridMode(); setProtractorToHybridMode();
}); });
describe('NG1 Auto-bootstrap', function() { describe('AngularJS Auto-bootstrap', function() {
beforeAll(function () { beforeAll(function () {
browser.get('/index-ng-app.html'); browser.get('/index-ng-app.html');
@ -21,7 +21,7 @@ describe('Upgrade Tests', function () {
}); });
describe('NG1 JavaScript Bootstrap', function() { describe('AngularJS JavaScript Bootstrap', function() {
beforeAll(function () { beforeAll(function () {
browser.get('/index-bootstrap.html'); browser.get('/index-bootstrap.html');
@ -33,10 +33,10 @@ describe('Upgrade Tests', function () {
}); });
describe('NG1-2 Hybrid Bootstrap', function() { describe('AngularJS-Angular Hybrid Bootstrap', function() {
beforeAll(function () { beforeAll(function () {
browser.get('/index-1-2-hybrid-bootstrap.html'); browser.get('/index-ajs-a-hybrid-bootstrap.html');
}); });
it('bootstraps as expected', function () { it('bootstraps as expected', function () {
@ -113,7 +113,7 @@ describe('Upgrade Tests', function () {
describe('Downgraded component with content projection', function() { describe('Downgraded component with content projection', function() {
beforeAll(function () { beforeAll(function () {
browser.get('/index-1-to-2-projection.html'); browser.get('/index-ajs-to-a-projection.html');
}); });
it('can be transcluded into', function () { it('can be transcluded into', function () {
@ -126,7 +126,7 @@ describe('Upgrade Tests', function () {
describe('Upgraded component with transclusion', function() { describe('Upgraded component with transclusion', function() {
beforeAll(function () { beforeAll(function () {
browser.get('/index-2-to-1-transclusion.html'); browser.get('/index-a-to-ajs-transclusion.html');
}); });
it('can be projected into', function () { it('can be projected into', function () {
@ -136,10 +136,10 @@ describe('Upgrade Tests', function () {
}); });
describe('Upgrading NG1 Providers', function() { describe('Upgrading AngularJS Providers', function() {
beforeAll(function () { beforeAll(function () {
browser.get('/index-1-to-2-providers.html'); browser.get('/index-ajs-to-a-providers.html');
}); });
it('works', function () { it('works', function () {
@ -149,10 +149,10 @@ describe('Upgrade Tests', function () {
}); });
describe('Downgrading NG2 Providers', function() { describe('Downgrading Angular Providers', function() {
beforeAll(function () { beforeAll(function () {
browser.get('/index-2-to-1-providers.html'); browser.get('/index-a-to-ajs-providers.html');
}); });
it('works', function () { it('works', function () {

View File

@ -16,7 +16,7 @@
<script src="systemjs.config.js"></script> <script src="systemjs.config.js"></script>
<script> <script>
System.import('app/1-to-2-providers/app.module') System.import('app/a-to-ajs-providers/app.module')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -16,7 +16,7 @@
<script src="systemjs.config.js"></script> <script src="systemjs.config.js"></script>
<script> <script>
System.import('app/2-to-1-transclusion/app.module') System.import('app/a-to-ajs-transclusion/app.module')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -16,7 +16,7 @@
<script src="systemjs.config.js"></script> <script src="systemjs.config.js"></script>
<script> <script>
System.import('app/1-2-hybrid-bootstrap/app.module') System.import('app/ajs-a-hybrid-bootstrap/app.module')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -16,7 +16,7 @@
<script src="systemjs.config.js"></script> <script src="systemjs.config.js"></script>
<script> <script>
System.import('app/1-to-2-projection/app.module') System.import('app/ajs-to-a-projection/app.module')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -16,7 +16,7 @@
<script src="systemjs.config.js"></script> <script src="systemjs.config.js"></script>
<script> <script>
System.import('app/2-to-1-providers/app.module') System.import('app/ajs-to-a-providers/app.module')
.then(null, console.error.bind(console)); .then(null, console.error.bind(console));
</script> </script>
</head> </head>

View File

@ -3,7 +3,7 @@
<html> <html>
<head> <head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="app/1-bootstrap/app.module.js"></script> <script src="app/ajs-bootstrap/app.module.js"></script>
</head> </head>
<body> <body>

View File

@ -3,7 +3,7 @@
<html> <html>
<head> <head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="app/1-ng-app/app.module.js"></script> <script src="app/ajs-ng-app/app.module.js"></script>
</head> </head>
<body ng-app="heroApp" ng-strict-di> <body ng-app="heroApp" ng-strict-di>

View File

@ -3,13 +3,13 @@ structure.
The following changes from vanilla Phonecat are applied: The following changes from vanilla Phonecat are applied:
* The TypeScript config file shown in the guide is `tsconfig.ng1.json` instead * The TypeScript config file shown in the guide is `tsconfig.ajs.json` instead
of the default, because we don't want to enable `noImplicitAny` for migration. of the default, because we don't want to enable `noImplicitAny` for migration.
* Karma config for unit tests is in karma.conf.ng1.js because the boilerplate * Karma config for unit tests is in karma.conf.ajs.js because the boilerplate
Karma config is not compatible with the way AngularJS tests need to be run. Karma config is not compatible with the way AngularJS tests need to be run.
The shell script run-unit-tests.sh can be used to run the unit tests. The shell script run-unit-tests.sh can be used to run the unit tests.
* Instead of using Bower, AngularJS and its dependencies are fetched from a CDN * Instead of using Bower, AngularJS and its dependencies are fetched from a CDN
in index.html and karma.conf.ng1.js. in index.html and karma.conf.ajs.js.
* E2E tests have been moved to the parent directory, where `gulp run-e2e-tests` can * E2E tests have been moved to the parent directory, where `gulp run-e2e-tests` can
discover and run them along with all the other examples. discover and run them along with all the other examples.
* Most of the phone JSON and image data removed in the interest of keeping * Most of the phone JSON and image data removed in the interest of keeping

View File

@ -0,0 +1 @@
!karma.conf.ajs.js

View File

@ -1,7 +1,7 @@
## The boilerplate Karma configuration won't work with AngularJS tests since ## The boilerplate Karma configuration won't work with AngularJS tests since
## a specific loading configuration is needed for them. ## a specific loading configuration is needed for them.
## We keep one in karma.conf.ng1.js. This scripts runs the ng1 tests with ## We keep one in karma.conf.ajs.js. This scripts runs the AngularJS tests with
## that config. ## that config.
PATH=$(npm bin):$PATH PATH=$(npm bin):$PATH
tsc && karma start karma.conf.ng1.js tsc && karma start karma.conf.ajs.js

View File

@ -3,15 +3,15 @@ structure.
The following changes from vanilla Phonecat are applied: The following changes from vanilla Phonecat are applied:
* Karma config for unit tests is in karma.conf.ng1.js because the boilerplate * Karma config for unit tests is in karma.conf.ajs.js because the boilerplate
Karma config is not compatible with the way AngularJS tests need to be run. Karma config is not compatible with the way AngularJS tests need to be run.
The shell script run-unit-tests.sh can be used to run the unit tests. The shell script run-unit-tests.sh can be used to run the unit tests.
* There's a `package.ng1.json`, which is not used to run anything but only to * There's a `package.ajs.json`, which is not used to run anything but only to
show an example of changing the PhoneCat http-server root path. show an example of changing the PhoneCat http-server root path.
* Also for the Karma shim, there is a `karma-test-shim.1.js` file which isn't * Also for the Karma shim, there is a `karma-test-shim.1.js` file which isn't
used but is shown in the test appendix. used but is shown in the test appendix.
* Instead of using Bower, AngularJS and its dependencies are fetched from a CDN * Instead of using Bower, AngularJS and its dependencies are fetched from a CDN
in index.html and karma.conf.ng1.js. in index.html and karma.conf.ajs.js.
* E2E tests have been moved to the parent directory, where `run-e2e-tests` can * E2E tests have been moved to the parent directory, where `run-e2e-tests` can
discover and run them along with all the other examples. discover and run them along with all the other examples.
* Most of the phone JSON and image data removed in the interest of keeping * Most of the phone JSON and image data removed in the interest of keeping

View File

@ -6,3 +6,4 @@ aot/**/*.ts
dist dist
!app/tsconfig.json !app/tsconfig.json
!rollup-config.js !rollup-config.js
!karma.conf.ajs.js

View File

@ -17,7 +17,7 @@
<script src="https://code.angularjs.org/1.5.5/angular-resource.js"></script> <script src="https://code.angularjs.org/1.5.5/angular-resource.js"></script>
<script src="https://code.angularjs.org/1.5.5/angular-route.js"></script> <script src="https://code.angularjs.org/1.5.5/angular-route.js"></script>
<script src="app.module.ng1.js"></script> <script src="app.module.ajs.js"></script>
<script src="app.config.js"></script> <script src="app.config.js"></script>
<script src="app.animations.js"></script> <script src="app.animations.js"></script>
<script src="core/core.module.js"></script> <script src="core/core.module.js"></script>
@ -25,18 +25,18 @@
<script src="phone-list/phone-list.module.js"></script> <script src="phone-list/phone-list.module.js"></script>
<script src="phone-detail/phone-detail.module.js"></script> <script src="phone-detail/phone-detail.module.js"></script>
<!-- #docregion ng2 --> <!-- #docregion angular -->
<script src="/node_modules/core-js/client/shim.min.js"></script> <script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script> <script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script> <script src="/node_modules/systemjs/dist/system.src.js"></script>
<!-- #enddocregion ng2 --> <!-- #enddocregion angular -->
<script src="/systemjs.config.1.js"></script> <script src="/systemjs.config.1.js"></script>
<!-- #docregion ng2 <!-- #docregion angular
<script src="/systemjs.config.js"></script> <script src="/systemjs.config.js"></script>
<script> <script>
System.import('/app'); System.import('/app');
</script> </script>
<!-- #enddocregion ng2 --> <!-- #enddocregion angular -->
<script> <script>
System.import('/app'); System.import('/app');
</script> </script>

View File

@ -1,7 +1,7 @@
## The boilerplate Karma configuration won't work with AngularJS tests since ## The boilerplate Karma configuration won't work with AngularJS tests since
## a specific loading configuration is needed for them. ## a specific loading configuration is needed for them.
## We keep one in karma.conf.ng1.js. This scripts runs the ng1 tests with ## We keep one in karma.conf.ajs.js. This scripts runs the AngularJS tests with
## that config. ## that config.
PATH=$(npm bin):$PATH PATH=$(npm bin):$PATH
tsc && karma start karma.conf.ng1.js tsc && karma start karma.conf.ajs.js

View File

@ -1,73 +0,0 @@
//jshint strict: false
module.exports = function(config) {
config.set({
// #docregion basepath
basePath: './',
// #enddocregion basepath
files: [
'https://code.angularjs.org/1.5.5/angular.js',
'https://code.angularjs.org/1.5.5/angular-animate.js',
'https://code.angularjs.org/1.5.5/angular-resource.js',
'https://code.angularjs.org/1.5.5/angular-route.js',
'https://code.angularjs.org/1.5.5/angular-mocks.js',
// #docregion files
// System.js for module loading
'node_modules/systemjs/dist/system.src.js',
// Polyfills
'node_modules/core-js/client/shim.js',
// zone.js
'node_modules/zone.js/dist/zone.js',
'node_modules/zone.js/dist/long-stack-trace-zone.js',
'node_modules/zone.js/dist/proxy.js',
'node_modules/zone.js/dist/sync-test.js',
'node_modules/zone.js/dist/jasmine-patch.js',
'node_modules/zone.js/dist/async-test.js',
'node_modules/zone.js/dist/fake-async-test.js',
// RxJs.
{ pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
// Angular itself and the testing library
{pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
{pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
{pattern: 'systemjs.config.js', included: false, watched: false},
'karma-test-shim.js',
{pattern: 'app/**/*.module.js', included: false, watched: true},
{pattern: 'app/*!(.module|.spec).js', included: false, watched: true},
{pattern: 'app/!(bower_components)/**/*!(.module|.spec).js', included: false, watched: true},
{pattern: 'app/**/*.spec.js', included: false, watched: true},
{pattern: '**/*.html', included: false, watched: true},
// #enddocregion files
],
// #docregion html
// proxied base paths for loading assets
proxies: {
// required for component assets fetched by Angular's compiler
"/phone-detail": '/base/app/phone-detail',
"/phone-list": '/base/app/phone-list'
},
// #enddocregion html
autoWatch: true,
frameworks: ['jasmine'],
browsers: ['Chrome'],
plugins: [
'karma-chrome-launcher',
'karma-jasmine'
]
});
};

View File

@ -1,7 +0,0 @@
## The boilerplate Karma configuration won't work with AngularJS tests since
## a specific loading configuration is needed for them.
## We keep one in karma.conf.ng1.js. This scripts runs the ng1 tests with
## that config.
PATH=$(npm bin):$PATH
tsc && karma start karma.conf.ng1.js

View File

@ -334,8 +334,8 @@ code-example(language="html" escape="html").
The DOM element `<a-component>` will remain to be an AngularJS managed The DOM element `<a-component>` will remain to be an AngularJS managed
element, because it's defined in an AngularJS template. That also element, because it's defined in an AngularJS template. That also
means you can apply additional AngularJS directives to it, but *not* means you can apply additional AngularJS directives to it, but *not*
Angular directives. It is only in the template of the `Ng2Component` Angular directives. It is only in the template of the `<a-component>`
component where Angular steps in. This same rule also applies when you where Angular steps in. This same rule also applies when you
use AngularJS component directives from Angular. use AngularJS component directives from Angular.
:marked :marked
@ -433,7 +433,7 @@ figure.image-display
and instead switch to calling `angular.bootstrap` from JavaScript, which and instead switch to calling `angular.bootstrap` from JavaScript, which
will result in the same thing: will result in the same thing:
+makeExample('upgrade-module/ts/app/1-bootstrap/app.module.ts', 'bootstrap') +makeExample('upgrade-module/ts/app/ajs-bootstrap/app.module.ts', 'bootstrap')
:marked :marked
Now introduce Angular to the project. Inspired by instructions in Now introduce Angular to the project. Inspired by instructions in
@ -442,7 +442,7 @@ figure.image-display
Next, create an `app.module.ts` file and add the following `NgModule` class: Next, create an `app.module.ts` file and add the following `NgModule` class:
+makeExample('upgrade-module/ts/app/1-2-hybrid-bootstrap/app.module.ts', 'ngmodule') +makeExample('upgrade-module/ts/app/ajs-a-hybrid-bootstrap/app.module.ts', 'ngmodule')
:marked :marked
This bare minimum `NgModule` imports `BrowserModule`, the module every Angular browser-based app must have. This bare minimum `NgModule` imports `BrowserModule`, the module every Angular browser-based app must have.
@ -455,7 +455,7 @@ figure.image-display
and use it to bootstrap our AngularJS app. and use it to bootstrap our AngularJS app.
The `upgrade.bootstrap` method takes the exact same arguments as [angular.bootstrap](https://docs.angularjs.org/api/ng/function/angular.bootstrap): The `upgrade.bootstrap` method takes the exact same arguments as [angular.bootstrap](https://docs.angularjs.org/api/ng/function/angular.bootstrap):
+makeExample('upgrade-module/ts/app/1-2-hybrid-bootstrap/app.module.ts', 'bootstrap') +makeExample('upgrade-module/ts/app/ajs-a-hybrid-bootstrap/app.module.ts', 'bootstrap')
:marked :marked
Congratulations! You're running a hybrid application! The Congratulations! You're running a hybrid application! The
@ -669,14 +669,14 @@ figure
Angular components that support content projection make use of an `<ng-content>` Angular components that support content projection make use of an `<ng-content>`
tag within them. Here's an example of such a component: tag within them. Here's an example of such a component:
+makeExample('upgrade-module/ts/app/1-to-2-projection/hero-detail.component.ts', null, 'hero-detail.component.ts') +makeExample('upgrade-module/ts/app/ajs-to-a-projection/hero-detail.component.ts', null, 'hero-detail.component.ts')
:marked :marked
When using the component from AngularJS, we can supply contents for it. Just When using the component from AngularJS, we can supply contents for it. Just
like they would be transcluded in AngularJS, they get projected to the location like they would be transcluded in AngularJS, they get projected to the location
of the `<ng-content>` tag in Angular: of the `<ng-content>` tag in Angular:
+makeExample('upgrade-module/ts/index-1-to-2-projection.html', 'usecomponent') +makeExample('upgrade-module/ts/index-ajs-to-a-projection.html', 'usecomponent')
.alert.is-helpful .alert.is-helpful
:marked :marked
@ -696,7 +696,7 @@ figure
the `ng-transclude` directive in its template to mark the transclusion the `ng-transclude` directive in its template to mark the transclusion
point: point:
+makeExample('upgrade-module/ts/app/2-to-1-transclusion/hero-detail.component.ts', null, 'hero-detail.component.ts') +makeExample('upgrade-module/ts/app/a-to-ajs-transclusion/hero-detail.component.ts', null, 'hero-detail.component.ts')
.alert.is-helpful .alert.is-helpful
:marked :marked
@ -708,7 +708,7 @@ figure
If we upgrade this component and use it from Angular, we can populate If we upgrade this component and use it from Angular, we can populate
the component tag with contents that will then get transcluded: the component tag with contents that will then get transcluded:
+makeExample('upgrade-module/ts/app/2-to-1-transclusion/container.component.ts', null, 'container.component.ts') +makeExample('upgrade-module/ts/app/a-to-ajs-transclusion/container.component.ts', null, 'container.component.ts')
:marked :marked
### Making AngularJS Dependencies Injectable to Angular ### Making AngularJS Dependencies Injectable to Angular
@ -722,18 +722,18 @@ figure
Angular. This makes it possible to then inject it somewhere in Angular Angular. This makes it possible to then inject it somewhere in Angular
code. For example, we might have a service called `HeroesService` in AngularJS: code. For example, we might have a service called `HeroesService` in AngularJS:
+makeExample('upgrade-module/ts/app/1-to-2-providers/heroes.service.ts', null, 'heroes.service.ts') +makeExample('upgrade-module/ts/app/ajs-to-a-providers/heroes.service.ts', null, 'heroes.service.ts')
:marked :marked
We can upgrade the service using a Angular [Factory provider](../guide/dependency-injection.html#factory-providers) We can upgrade the service using a Angular [Factory provider](../guide/dependency-injection.html#factory-providers)
that requests the service from the AngularJS `$injector`. The name of the Angular dependency is up to you: that requests the service from the AngularJS `$injector`. The name of the Angular dependency is up to you:
+makeExample('upgrade-module/ts/app/1-to-2-providers/app.module.ts', 'register', 'app.module.ts') +makeExample('upgrade-module/ts/app/ajs-to-a-providers/app.module.ts', 'register', 'app.module.ts')
:marked :marked
We can then inject it in Angular using a string token: We can then inject it in Angular using a string token:
+makeExample('upgrade-module/ts/app/1-to-2-providers/hero-detail.component.ts', null, 'hero-detail.component.ts') +makeExample('upgrade-module/ts/app/ajs-to-a-providers/hero-detail.component.ts', null, 'hero-detail.component.ts')
.alert.is-helpful .alert.is-helpful
:marked :marked
@ -753,24 +753,24 @@ figure
For example, we might have an Angular service called `Heroes`: For example, we might have an Angular service called `Heroes`:
+makeExample('upgrade-module/ts/app/2-to-1-providers/heroes.ts', null, 'heroes.ts') +makeExample('upgrade-module/ts/app/a-to-ajs-providers/heroes.ts', null, 'heroes.ts')
:marked :marked
Again, as with Angular components, register the provider with the `NgModule` by adding it to the module's `providers` list. Again, as with Angular components, register the provider with the `NgModule` by adding it to the module's `providers` list.
+makeExample('upgrade-module/ts/app/2-to-1-providers/app.module.ts', 'ngmodule', 'app.module.ts') +makeExample('upgrade-module/ts/app/a-to-ajs-providers/app.module.ts', 'ngmodule', 'app.module.ts')
:marked :marked
Now wrap the Angular `Heroes` in an *AngularJS factory function* using `downgradeInjectable()`. Now wrap the Angular `Heroes` in an *AngularJS factory function* using `downgradeInjectable()`.
and plug the factory into an AngularJS module. and plug the factory into an AngularJS module.
The name of the AngularJS dependency is up to you: The name of the AngularJS dependency is up to you:
+makeExample('upgrade-module/ts/app/2-to-1-providers/app.module.ts', 'register', 'app.module.ts') +makeExample('upgrade-module/ts/app/a-to-ajs-providers/app.module.ts', 'register', 'app.module.ts')
:marked :marked
After this, the service is injectable anywhere in our AngularJS code: After this, the service is injectable anywhere in our AngularJS code:
+makeExample('upgrade-module/ts/app/2-to-1-providers/hero-detail.component.ts', null, 'hero-detail.component.ts') +makeExample('upgrade-module/ts/app/a-to-ajs-providers/hero-detail.component.ts', null, 'hero-detail.component.ts')
@ -899,7 +899,7 @@ code-example(format="").
in the documentation [setup](setup.html). It instructs the TypeScript compiler how in the documentation [setup](setup.html). It instructs the TypeScript compiler how
to interpret our source files. to interpret our source files.
+makeJson('upgrade-phonecat-1-typescript/ts/tsconfig.ng1.json', null, 'tsconfig.json') +makeJson('upgrade-phonecat-1-typescript/ts/tsconfig.ajs.json', null, 'tsconfig.json')
:marked :marked
We are telling the TypeScript compiler to turn our TypeScript files to ES5 code We are telling the TypeScript compiler to turn our TypeScript files to ES5 code
@ -1046,7 +1046,7 @@ code-example(format="").
development server root path in `package.json` to also point to the project root development server root path in `package.json` to also point to the project root
instead of `app`: instead of `app`:
+makeJson('upgrade-phonecat-2-hybrid/ts/package.ng1.json', {paths: 'scripts.start'}, 'package.json (start script)') +makeJson('upgrade-phonecat-2-hybrid/ts/package.ajs.json', {paths: 'scripts.start'}, 'package.json (start script)')
:marked :marked
Now we're able to serve everything from the project root to the web browser. But we do *not* Now we're able to serve everything from the project root to the web browser. But we do *not*
@ -1061,7 +1061,7 @@ code-example(format="").
SystemJS config to the end of the `<head>` section, and then we'll use `System.import` SystemJS config to the end of the `<head>` section, and then we'll use `System.import`
to load the actual application: to load the actual application:
+makeExample('upgrade-phonecat-2-hybrid/ts/index.html', 'ng2', 'index.html') +makeExample('upgrade-phonecat-2-hybrid/ts/index.html', 'angular', 'index.html')
:marked :marked
We also need to make a couple of adjustments We also need to make a couple of adjustments
@ -1076,10 +1076,10 @@ code-example(format="").
Now create the root `NgModule` class called `AppModule`. Now create the root `NgModule` class called `AppModule`.
There is already a file named `app.module.ts` that holds the AngularJS module. There is already a file named `app.module.ts` that holds the AngularJS module.
Rename it to `app.module.ng1.ts` and update the corresponding script name in the `index.html` as well. Rename it to `app.module.ajs.ts` and update the corresponding script name in the `index.html` as well.
The file contents remain: The file contents remain:
+makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ng1.ts', null, 'app.module.ng1.ts') +makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ajs.ts', null, 'app.module.ajs.ts')
:marked :marked
Now create a new `app.module.ts` with the minimum `NgModule` class: Now create a new `app.module.ts` with the minimum `NgModule` class:
@ -1217,9 +1217,9 @@ code-example(format="").
but it's really an instance of the `Phone` class and we can annotate its type but it's really an instance of the `Phone` class and we can annotate its type
accordingly: accordingly:
+makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ng1.ts', null, 'app/phone-list/phone-list.component.ts') +makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ajs.ts', null, 'app/phone-list/phone-list.component.ts')
+makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ng1.ts', null, 'app/phone-detail/phone-detail.component.ts') +makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ajs.ts', null, 'app/phone-detail/phone-detail.component.ts')
:marked :marked
What we have here are two AngularJS components using an Angular service! What we have here are two AngularJS components using an Angular service!
@ -1480,7 +1480,7 @@ code-example(format="").
You may also completely remove the following files. They are AngularJS You may also completely remove the following files. They are AngularJS
module configuration files and not needed in Angular: module configuration files and not needed in Angular:
* `app/app.module.ng1.ts` * `app/app.module.ajs.ts`
* `app/app.config.ts` * `app/app.config.ts`
* `app/core/core.module.ts` * `app/core/core.module.ts`
* `app/core/phone/phone.module.ts` * `app/core/phone/phone.module.ts`
@ -1651,20 +1651,20 @@ code-example(format="").
Karma configuration should then be changed so that it uses the application root dir Karma configuration should then be changed so that it uses the application root dir
as the base directory, instead of `app`. as the base directory, instead of `app`.
+makeExample('upgrade-phonecat-2-hybrid/ts/karma.conf.ng1.js', 'basepath', 'karma.conf.js') +makeExample('upgrade-phonecat-2-hybrid/ts/karma.conf.ajs.js', 'basepath', 'karma.conf.js')
:marked :marked
Once this is done, we can load SystemJS and other dependencies, and also switch the configuration Once this is done, we can load SystemJS and other dependencies, and also switch the configuration
for loading application files so that they are *not* included to the page by Karma. We'll let for loading application files so that they are *not* included to the page by Karma. We'll let
the shim and SystemJS load them. the shim and SystemJS load them.
+makeExample('upgrade-phonecat-2-hybrid/ts/karma.conf.ng1.js', 'files', 'karma.conf.js') +makeExample('upgrade-phonecat-2-hybrid/ts/karma.conf.ajs.js', 'files', 'karma.conf.js')
:marked :marked
Since the HTML templates of Angular components will be loaded as well, we need to help Since the HTML templates of Angular components will be loaded as well, we need to help
Karma out a bit so that it can route them to the right paths: Karma out a bit so that it can route them to the right paths:
+makeExample('upgrade-phonecat-2-hybrid/ts/karma.conf.ng1.js', 'html', 'karma.conf.js') +makeExample('upgrade-phonecat-2-hybrid/ts/karma.conf.ajs.js', 'html', 'karma.conf.js')
:marked :marked
The unit test files themselves also need to be switched to Angular when their production The unit test files themselves also need to be switched to Angular when their production