结合使用 Redux 和 Angular（2）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-11-18 20:00 | 只看该作者

结合使用 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>

  
  <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 组件。

收藏分享评分

回复引用

订阅 TOP

返回列表