chore: rename files in ngUpgrade (#3146)
This commit is contained in:
parent
de4903be56
commit
b968cabe34
|
@ -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 () {
|
||||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
!karma.conf.ajs.js
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -6,3 +6,4 @@ aot/**/*.ts
|
||||||
dist
|
dist
|
||||||
!app/tsconfig.json
|
!app/tsconfig.json
|
||||||
!rollup-config.js
|
!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-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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
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
|
||||||
|
|
Loading…
Reference in New Issue