修订完upgrade

This commit is contained in:
Zhicheng Wang 2017-04-15 23:25:23 +08:00
parent 04c77dc05a
commit 7a0137d5a5
1 changed files with 7 additions and 8 deletions

View File

@ -69,6 +69,7 @@ include ../_util-fns
2. [Bootstrapping hybrid](#bootstrapping-hybrid-applications) 2. [Bootstrapping hybrid](#bootstrapping-hybrid-applications)
[引导混合(hybrid)应用](#bootstrapping-hybrid-applications) [引导混合(hybrid)应用](#bootstrapping-hybrid-applications)
3. [Using Angular Components from AngularJS Code](#using-angular-components-from-angularjs-code) 3. [Using Angular Components from AngularJS Code](#using-angular-components-from-angularjs-code)
[从AngularJS的代码中使用Angular的组件](#using-angular-components-from-angularjs-code) [从AngularJS的代码中使用Angular的组件](#using-angular-components-from-angularjs-code)
@ -76,6 +77,7 @@ include ../_util-fns
4. [Using AngularJS Component Directives from Angular Code](#using-angularjs-component-directives-from-angular-code) 4. [Using AngularJS Component Directives from Angular Code](#using-angularjs-component-directives-from-angular-code)
[从Angular的代码中使用AngularJS的组件](#using-angularjs-component-directives-from-angular-components-from-angularjs-code) [从Angular的代码中使用AngularJS的组件](#using-angularjs-component-directives-from-angular-components-from-angularjs-code)
5. [Projecting AngularJS Content into Angular Components](#projecting-angularjs-content-into-angular-components) 5. [Projecting AngularJS Content into Angular Components](#projecting-angularjs-content-into-angular-components)
[把AngularJS的内容投影(project)进Angular组件中](#projecting-angularjs-content-into-angular-components) [把AngularJS的内容投影(project)进Angular组件中](#projecting-angularjs-content-into-angular-components)
@ -2168,7 +2170,7 @@ code-example(format="").
不幸的是AngularJS的依赖不会自动在Angular的组件中可用。 不幸的是AngularJS的依赖不会自动在Angular的组件中可用。
我们必须使用[工厂提供商factory provider](#making-angularjs-dependencies-injectable-to-angular) 我们必须使用[工厂提供商factory provider](#making-angularjs-dependencies-injectable-to-angular)
来把`$routeParams`包装成Angular的服务提供商。 来把`$routeParams`包装成Angular的服务提供商。
在`app.module.ts`中这样写 新建一个名叫`ajs-upgraded-providers.ts`的文件,并且在`app.module.ts`中导入它
+makeExample('upgrade-phonecat-2-hybrid/ts/app/ajs-upgraded-providers.ts', null, 'app/ajs-upgraded-providers.ts') +makeExample('upgrade-phonecat-2-hybrid/ts/app/ajs-upgraded-providers.ts', null, 'app/ajs-upgraded-providers.ts')
@ -2338,7 +2340,7 @@ code-example(format="").
and `ng-view` for AngularJS routes. and `ng-view` for AngularJS routes.
This component just renders the contents of the active route and nothing else. This component just renders the contents of the active route and nothing else.
它有一个很简单的模板,只包含`<router-outlet>`。 它有一个很简单的模板,只包含Angular路由的`<router-outlet>`和AngularJS路由的`ng-view`指令
该组件只负责渲染活动路由的内容,此外啥也不干。 该组件只负责渲染活动路由的内容,此外啥也不干。
The selector tells Angular to plug this root component into the `<phonecat-app>` The selector tells Angular to plug this root component into the `<phonecat-app>`
@ -2381,11 +2383,11 @@ code-example(format="").
A couple of extra providers enable routing with "hash" URLs such as `#!/phones` A couple of extra providers enable routing with "hash" URLs such as `#!/phones`
instead of the default "push state" strategy. instead of the default "push state" strategy.
一些额外的提供商让路由器使用“hash”策略解析URL比如`#!/phones`而不是默认的“Push State”策略。
There's a twist to our Routing Module though: we're also adding a custom `UrlHandlingStrategy` There's a twist to our Routing Module though: we're also adding a custom `UrlHandlingStrategy`
that tells the Angular router to only process the `/` and `/phones` routes. that tells the Angular router to only process the `/` and `/phones` routes.
一些额外的提供商让路由器使用“hash”策略解析URL比如`#!/phones`而不是默认的“Push State”策略。
Now update the `AppModule` to import this `AppRoutingModule` and also the Now update the `AppModule` to import this `AppRoutingModule` and also the
declare the root `AppComponent` as the bootstrap component. declare the root `AppComponent` as the bootstrap component.
That tells Angular that it should bootstrap the app with the _root_ `AppComponent` and That tells Angular that it should bootstrap the app with the _root_ `AppComponent` and
@ -2405,10 +2407,6 @@ code-example(format="").
:marked :marked
Now we need to tell the AngularJS router to only process the `/phones/:phoneId` route: Now we need to tell the AngularJS router to only process the `/phones/:phoneId` route:
Angular路由器传递路由参数的方式不同。
修改`PhoneDetail`组件的构造函数,来取得一个注入的`ActivatedRoute`对象。
从`ActivatedRoute.snapshot.params`中提取`phoneId`,并像以前那样获取电话数据:
+makeExample('upgrade-phonecat-3-router/ts/app/app.config.ts', 'ajs-routes', 'app/app.config.ts (route config)') +makeExample('upgrade-phonecat-3-router/ts/app/app.config.ts', 'ajs-routes', 'app/app.config.ts (route config)')
:marked :marked
@ -2516,6 +2514,7 @@ code-example(format="").
The `@angular/upgrade` package and it's mapping in `systemjs.config.js` can also go. The `@angular/upgrade` package and it's mapping in `systemjs.config.js` can also go.
AngularJS的外部类型定义文件还需要被反安装。我们现在只需要Jasmine的那些。 AngularJS的外部类型定义文件还需要被反安装。我们现在只需要Jasmine的那些。
`systemjs.config.js`中的`@angular/upgrade`包及其映射也可以移除了。
code-example(format=""). code-example(format="").
npm uninstall @angular/upgrade --save npm uninstall @angular/upgrade --save