chore: rename files in ngUpgrade (#3146)
This commit is contained in:
parent
de4903be56
commit
b968cabe34
|
@ -9,7 +9,7 @@ describe('Upgrade Tests', function () {
|
|||
setProtractorToHybridMode();
|
||||
});
|
||||
|
||||
describe('NG1 Auto-bootstrap', function() {
|
||||
describe('AngularJS Auto-bootstrap', function() {
|
||||
|
||||
beforeAll(function () {
|
||||
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 () {
|
||||
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 () {
|
||||
browser.get('/index-1-2-hybrid-bootstrap.html');
|
||||
browser.get('/index-ajs-a-hybrid-bootstrap.html');
|
||||
});
|
||||
|
||||
it('bootstraps as expected', function () {
|
||||
|
@ -113,7 +113,7 @@ describe('Upgrade Tests', function () {
|
|||
describe('Downgraded component with content projection', 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 () {
|
||||
|
@ -126,7 +126,7 @@ describe('Upgrade Tests', function () {
|
|||
describe('Upgraded component with transclusion', 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 () {
|
||||
|
@ -136,10 +136,10 @@ describe('Upgrade Tests', function () {
|
|||
});
|
||||
|
||||
|
||||
describe('Upgrading NG1 Providers', function() {
|
||||
describe('Upgrading AngularJS Providers', function() {
|
||||
|
||||
beforeAll(function () {
|
||||
browser.get('/index-1-to-2-providers.html');
|
||||
browser.get('/index-ajs-to-a-providers.html');
|
||||
});
|
||||
|
||||
it('works', function () {
|
||||
|
@ -149,10 +149,10 @@ describe('Upgrade Tests', function () {
|
|||
});
|
||||
|
||||
|
||||
describe('Downgrading NG2 Providers', function() {
|
||||
describe('Downgrading Angular Providers', function() {
|
||||
|
||||
beforeAll(function () {
|
||||
browser.get('/index-2-to-1-providers.html');
|
||||
browser.get('/index-a-to-ajs-providers.html');
|
||||
});
|
||||
|
||||
it('works', function () {
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<script src="systemjs.config.js"></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));
|
||||
</script>
|
||||
</head>
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<script src="systemjs.config.js"></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));
|
||||
</script>
|
||||
</head>
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<script src="systemjs.config.js"></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));
|
||||
</script>
|
||||
</head>
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<script src="systemjs.config.js"></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));
|
||||
</script>
|
||||
</head>
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<script src="systemjs.config.js"></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));
|
||||
</script>
|
||||
</head>
|
|
@ -3,7 +3,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<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>
|
||||
|
||||
<body>
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<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>
|
||||
|
||||
<body ng-app="heroApp" ng-strict-di>
|
||||
|
|
|
@ -3,13 +3,13 @@ structure.
|
|||
|
||||
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.
|
||||
* 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.
|
||||
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
|
||||
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
|
||||
discover and run them along with all the other examples.
|
||||
* Most of the phone JSON and image data removed in the interest of keeping
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
!karma.conf.ajs.js
|
|
@ -1,7 +1,7 @@
|
|||
## 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
|
||||
## We keep one in karma.conf.ajs.js. This scripts runs the AngularJS tests with
|
||||
## that config.
|
||||
|
||||
PATH=$(npm bin):$PATH
|
||||
tsc && karma start karma.conf.ng1.js
|
||||
tsc && karma start karma.conf.ajs.js
|
||||
|
|
|
@ -3,15 +3,15 @@ structure.
|
|||
|
||||
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.
|
||||
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.
|
||||
* 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.
|
||||
* 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
|
||||
discover and run them along with all the other examples.
|
||||
* Most of the phone JSON and image data removed in the interest of keeping
|
||||
|
|
|
@ -6,3 +6,4 @@ aot/**/*.ts
|
|||
dist
|
||||
!app/tsconfig.json
|
||||
!rollup-config.js
|
||||
!karma.conf.ajs.js
|
||||
|
|
|
@ -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-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.animations.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-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/zone.js/dist/zone.js"></script>
|
||||
<script src="/node_modules/systemjs/dist/system.src.js"></script>
|
||||
<!-- #enddocregion ng2 -->
|
||||
<!-- #enddocregion angular -->
|
||||
<script src="/systemjs.config.1.js"></script>
|
||||
<!-- #docregion ng2
|
||||
<!-- #docregion angular
|
||||
<script src="/systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('/app');
|
||||
</script>
|
||||
<!-- #enddocregion ng2 -->
|
||||
<!-- #enddocregion angular -->
|
||||
<script>
|
||||
System.import('/app');
|
||||
</script>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
## 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
|
||||
## We keep one in karma.conf.ajs.js. This scripts runs the AngularJS tests with
|
||||
## that config.
|
||||
|
||||
PATH=$(npm bin):$PATH
|
||||
tsc && karma start karma.conf.ng1.js
|
||||
tsc && karma start karma.conf.ajs.js
|
||||
|
|
|
@ -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'
|
||||
]
|
||||
|
||||
});
|
||||
};
|
|
@ -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
|
|
@ -334,8 +334,8 @@ code-example(language="html" escape="html").
|
|||
The DOM element `<a-component>` will remain to be an AngularJS managed
|
||||
element, because it's defined in an AngularJS template. That also
|
||||
means you can apply additional AngularJS directives to it, but *not*
|
||||
Angular directives. It is only in the template of the `Ng2Component`
|
||||
component where Angular steps in. This same rule also applies when you
|
||||
Angular directives. It is only in the template of the `<a-component>`
|
||||
where Angular steps in. This same rule also applies when you
|
||||
use AngularJS component directives from Angular.
|
||||
|
||||
:marked
|
||||
|
@ -433,7 +433,7 @@ figure.image-display
|
|||
and instead switch to calling `angular.bootstrap` from JavaScript, which
|
||||
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
|
||||
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:
|
||||
|
||||
+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
|
||||
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.
|
||||
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
|
||||
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>`
|
||||
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
|
||||
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
|
||||
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
|
||||
:marked
|
||||
|
@ -696,7 +696,7 @@ figure
|
|||
the `ng-transclude` directive in its template to mark the transclusion
|
||||
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
|
||||
:marked
|
||||
|
@ -708,7 +708,7 @@ figure
|
|||
If we upgrade this component and use it from Angular, we can populate
|
||||
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
|
||||
### Making AngularJS Dependencies Injectable to Angular
|
||||
|
@ -722,18 +722,18 @@ figure
|
|||
Angular. This makes it possible to then inject it somewhere in Angular
|
||||
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
|
||||
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:
|
||||
|
||||
+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
|
||||
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
|
||||
:marked
|
||||
|
@ -753,24 +753,24 @@ figure
|
|||
|
||||
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
|
||||
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
|
||||
Now wrap the Angular `Heroes` in an *AngularJS factory function* using `downgradeInjectable()`.
|
||||
and plug the factory into an AngularJS module.
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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`
|
||||
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
|
||||
We also need to make a couple of adjustments
|
||||
|
@ -1076,10 +1076,10 @@ code-example(format="").
|
|||
|
||||
Now create the root `NgModule` class called `AppModule`.
|
||||
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:
|
||||
|
||||
+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
|
||||
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
|
||||
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
|
||||
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
|
||||
module configuration files and not needed in Angular:
|
||||
|
||||
* `app/app.module.ng1.ts`
|
||||
* `app/app.module.ajs.ts`
|
||||
* `app/app.config.ts`
|
||||
* `app/core/core.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
|
||||
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
|
||||
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
|
||||
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
|
||||
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:
|
||||
|
||||
+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
|
||||
The unit test files themselves also need to be switched to Angular when their production
|
||||
|
|
Loading…
Reference in New Issue