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();
});
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 () {

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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

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
## 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

View File

@ -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

View File

@ -6,3 +6,4 @@ aot/**/*.ts
dist
!app/tsconfig.json
!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-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>

View File

@ -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

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
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