首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

结合使用 Redux 和 Angular(2)

结合使用 Redux 和 Angular(2)

结合使用 Redux 和 Angular示例代码存储库可以从作者的 GitHub            获取图书搜索应用程序的两个版本的完整示例代码。

图 2 给出了图书搜索应用程序的 Angular 2(下文简称 Angular)版本。
图 2. 图书搜索应用程序的 Angular 版本
为什么选择 TypeScript?Angular 支持 3 种语言:JavaScript、  和          Dart。我为图书搜索应用程序选择了 TypeScript,这主要是因为 Angular 文档的 TypeScript 版本最完整。

像 React 一样(但不同于 Angular 1),Angular 是一个基于组件的框架。因此从理论上讲,我应该能有效地将 React 组件替换为 Angular 组件,并重用        React 版本的 reducer、操作和存储。事实证明该理论切实可行。
重要说明:图书搜索应用程序的代码不适用于 RC5 之前的任何 Angular 版本。
设置图书搜索应用程序的 Angular 版本的 HTML 如清单 4 所示。
清单 4. 该应用程序的 HTML          (index.html)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
  <head>
    <title>Book Search</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <app>Loading...</app>
  </body>

  <!-- Polyfill(s) for older browsers -->
  <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/reflect-metadata/Reflect.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>

  <script src="dist/bundle.js"></script>
</html>




清单 4 中的 HTML 拉入了一些填充信息和该应用程序的 TypeScript。清单 5 给出了应用程序的模块。
清单 5. 该应用程序的模块          (app/app.module.ts)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import App from './components/app.component';
import Book from './components/book.component';
import Books from './components/books.component';
import Controls from './components/controls.component';
import DisplayMode from './components/displayMode.component';
import History from './components/history.component';
import StateViewer from './components/stateviewer.component';
import TopicSelector from './components/topicselector.component';

@NgModule({
  bootstrap: [ App ],

  declarations: [
    App,
    Book,
    Books,
    Controls,
    DisplayMode,
    History,
    StateViewer,
    TopicSelector,
  ],

  imports: [
    BrowserModule,
    FormsModule,
  ],
})

export class AppModule { }




清单 5 的代码定义了一个 Angular 模块。@NgModule 是一个 TypeScript 注释。(Angular 的 TypeScript          版本中大量使用了注释。)@NgModule 注释是 Angular RC5 中的一项新功能。
在实现 Angular 应用程序时,必须声明模块中的所有组件。清单 5 的代码导入了浏览器模块,浏览器中运行的所有 Angular 应用程序都会导入该模块。该模块也是          @NgModule 注释的来源。
我没有在图书搜索应用程序中使用表单,但显然,我必须导入表单模块 (FormsModule);如果不导入,则会获得以下错误消息:
Can't bind to ngModel since it isn't a known property of            input.
该错误消息没有提供任何线索来表明需要导入表单模块;堆栈溢出为我提供了解决方案。
样板的最后一部分是应用程序的入口点 (app/main.ts):
1
2
3
4
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);




main.ts 代码启动 Angular 应用程序。
它负责运行图书搜索应用程序的 Angular 版本的样板。现在我将展示该应用程序的 Angular 组件。
返回列表