原文地址:https://angular.io/docs/ts/latest/quickstart.html

Angular 2 终于发布了 beta 版。这意味着正式版应该很快就要发布了。

让我们使用 TypeScript 语言从头创建一个超级简单的 Angular 2 应用。

如果不喜欢 Typescript,你也可以使用 JavaScript 来完成这个演练。

See It Run!

官方提供了一个在线的演示,地址在这里:live example,不过你可能不能正常访问。还是让我们自己来实践一下算了。不过,可以先看一下运行的结果。

你很快就可以自己完成它。

这是最终的文件结构:

app
+app.component.ts
+boot.ts
index.html 

也就是说,根目录下有一个 index.html 文件,在 app 目录下,有两个 Typescript  文件。

我们需要如下的 4 个步骤来完成它。

  1. 创建开发环境
  2. 为我们的应用编写 root component
  3. 启动 root component 控制主页面
  4. 编写主页面 (index.html)

如果我们忽略掉那些旁支末节的说明,按照这些步骤,我们真的可以在 5 分钟之内就完成这个演练的。当然了,多数人对 why 和 how 一样感兴趣,所以,时间可能会长一点。

创建开发环境

首先,我们需要一个地方来作为项目文件夹,保存一些库文件,一些 TypeScript 配置,以及一个你喜欢的 TypeScript 编辑器。如果没有的话,其实文本编辑器就可以了。

创建项目文件夹

mkdir angular2-quickstart
cd angular2-quickstart

添加需要的库

推荐使用 npm  来获取和管理我们开发所使用的库。

还没有安装 npm? 现在就安装它,我们马上就会使用,而且在这个文档中会不断使用它。这里有安装 NPM 的介绍。

添加名为 package.json 的文件,将下面的内容粘贴到文件中。:

package.json
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}

想知道为什么这个写吗? 在这里有详细的说明: appendix below

使用下面的命令来安装这些 packages. 打开一个终端窗口,在 Windows 中使用 command window 就可以,然后执行下面的 npm 命令。

npm install

在安装过程中,会看到一些吓人的红色错误信息,无视它们就可以,安装将会成功,在  appendix below  有详细的说明。

配置 TypeScript

TypeScript 并不能直接在浏览器中执行,所以我们需要使用 TypeScript 编译器进行处理,我们必须对 TypeScript 编译器进行一些特殊的配置。

添加名为 tsconfig.Json 的文件到项目文件夹中,将下面的内容粘贴到文件中。

tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}

还是在 appendix below 中有详细的说明。

我们已经准备好了,现在开始编写一些代码。

第一个 Angular Component

Component 是 Angular 中的基础概念,一个 Component 管理一个视图 View, View 是页面中的一个片段,我们用来显示信息给用户并且响应用户的反馈。

从技术上说,Component 是一个用来控制 View 模板的类。在创建 Angular App 的时候,我们会编写大量的 Component。这是我们的第一次尝试,所以,我们会保持这个组件惊人的简单。

创建保存应用源码子文件夹

我们会将应用代码保存在名为 app 的子文件夹中,在控制台窗口中执行下面的命令创建文件夹。

mkdir app
cd app

添加 Component 文件

现在,我们创建名为 app.component.ts 的文件,将下面的代码粘贴进来。

app/app.component.ts
import {Component} from 'angular2/core';

@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

我们把上面的代码详细分析一下。先从最后一行的定义类开始。

The Component class

在代码的最后一行,是名为 AppComponent 的什么都没有做的类,在我们开始创建一个应用的时候,我们可以扩展这个类的属性和业务逻辑。由于我们还不需要在这个 QuickStart 中做什么,我们的 AppComponent 类目前还是空的。

Modules

Angular 应用是模块化的,其中包含一系列各有用途的独立文件。

多数应用文件导出一些东西,类似 Component,我们的 app.component 导出 AppComponent.

app/app.component.ts (export)
export class AppComponent { }

这个导出的行为将这个文件转化为了一个模块 module,文件的名称(不包含扩展名)通常作为模块的名称,根据这个规则,'app.component' 就是我们第一个模块的名称。

一个精巧的应用将会在一个组件构成的虚拟树中包含一些子组件,更加复杂的应用将会包含更多的文件和模块。

Quickstart 不复杂,我们只需要一个组件,在我们这个小应用中,组件还扮演着组织应用的角色。

模块依赖其它的模块。在 TypeScript 版本的 Angular 应用中,当我们需要其他模块提供服务的时候,我们将需要的模块导入到当前模块中。当其它的模块需要使用 AppComponent 的时候,可以使用下面的语法导入 AppComponent ,如下所示:

app/boot.ts (import)
import {AppComponent} from './app.component'

Angular 也是模块化的,它本身是一系列库模块的集合,每个库就是一个提供服务的模块,被未来的模块所使用。

当我们需要 Angular 中提供的服务的时候,我们就从 Angular 的库模块中导入。现在我们就需要 Angular 帮助我们,以便定义我们 Component 中的元数据。

Component Metadata

在我们为 Class 提供元数据之后,它才会成为 Angular Component. Angular 需要元数据来理解如何构造视图,以及这个组件如何同应用中的其他部分进行互动。

我们使用 Angular 提供的 Component 函数来定义 Component 的元数据,通过导入 Angular 的基础库 angular2/core, 我们可以访问这个函数。

app/app.component.ts (import)
import {Component} from 'angular2/core';

在 TypeScript 中,我们将这个函数应用到类的前缀来装饰这个类,使用 @ 符号,在组件类的上方调用这个函数。

app/app.component.ts (metadata)
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})

@Component 告诉 Angular 这个类是一个组件 Componet,配置对象传递给了 @Compoent 函数,包含两个字段,selector 和 template.

selector 指定了一个简单的 CSS 选择器,选择名为 my-app 的 HTML 元素。在 Angular 遇到页面中的 my-app 元素的时候, Angular 将会创建我们的 AppComponent 实例并显示它。

记住这个 my-app 选择器,在我们编写 index.html 的时候,我们需要这些信息。

template 属性保存伴随的模板,模板来自 HTML, 告诉 Angular 如何渲染视图,我们的视图只有一行 "My First Angular App"

现在我们需要告诉 Angular 如何加载组件。

Give it the boot

在 app 文件夹中,添加一个新文件 boot.rs,如下所示。

app/boot.ts
import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component' bootstrap(AppComponent);

我们需要两件事情来启动应用:

  1. Angular 的浏览器函数 bootstrap
  2. 我们刚刚编写的根组件

我们把它们导入进来,然后调用 bootatrap,将 AppComponent 组件作为参数传递给 bootstrap.

可以在 appendix below 中学习为什么我们从 angular2/platform/browser 导入 bootstrap ,以及为什么要创建独立的 boot.ts 文件。

我们已经请求 Angular 将我们的组件作为根来启动应用。Angular 将会把它放在哪里呢? 

Add the index.html

Angular 在我们 index.html 中特定的位置显示我们的应用,现在是创建这个文件的时候了。

我们不会将 index.html 保存在 app/ 文件夹中,我们将它保存在上一级文件夹中,就在项目的根目录中。

cd ..

现在创建 index.html 文件,将下面的内容粘贴到文件中。

index.html
<html>

  <head>
<title>Angular 2 QuickStart</title> <!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script> <!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script> </head> <!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body> </html>

这个文件由三个主要的部分组成:

  1. 加载我们需要的脚本文件,. Angular 2 需要 angular2-polyfills.js 和 Rx.js .

  2. 我们配置了 System, 然后通过它来导入和加载我们刚刚编写的启动文件。.

  3. 在 <body> 标记中添加了  <my-app> . 这就是我们应用执行的位置!

需要一些东西来定位和加载我们的应用模块,我们这里使用 SystemJS 做这件事。还有没有提到的方式也可以,但是 SystemJS 是最好的选择。我们喜欢使用它,它也能正常工作。

关于 SystemJS 配置的说明已经超出了今天的内容范围,我们将在  appendix below 中进行简单的介绍。

当 Angular 在 boot.ts 中调用 bootstrap 函数的时候,它将会读取 AppComponent 的元数据,发现 my-app 选择器,定位名为 my-app 的元素,然后在这个元素的标记之间加载我们的应用。

Compile and run!

打开一个终端窗口,输入下面的命令:

npm start

这个命令执行两个并行的 node 进程。

  1. TypeScript 编译器运行在监控模式。
  2. 称为  lite-server 的静态文件服务器,它会将 index.html 加载到浏览器中,当应用文件刷新的时候自动重新刷新浏览器。

稍等一下,一个浏览器的 Tab 页会被打开,然后显示出:

祝贺你!我们上路了。

如果你看到 Loading... ,而不是上述内容,查看:Browser ES6 support appendix.

Make some changes

将显示的信息修改为、 "My SECOND Angular 2 app".

TypeScript 编译器和 Lite-server 将会监控文件,它们将会检测到这些变化,自动重新编译 TypeScript 到 JavaScript ,刷新浏览器,显示修改之后的信息。

这是开发应用极好的方式。

 完成之后,我们可以关闭中断窗口。

Final structure

最终的项目结构看起来如下所示:

angular2-quickstart
node_modules
app
     app.component.ts
     boot.ts
index.html
package.json
tsconfig.json

下面是文件的内容:

app/app.component.ts

import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

app/boot.ts

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);

index.html

<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>

package.json

{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}

tsconfig.json

{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}

Wrap Up

我们的第一个应用没有做多少事,就是一个基本 Angular 2 版本的 "Hello, World"

我们保持第一个应用足够简单:我们编写了一点 Angular 组件,添加在一些 JavaScript 库到 index.html 中,并且使用一个静态文件服务器启动了应用。这就是我们期望 “Hello,World " 所做的事情。

我们有更大的目标

好消息是更大的目标在等着我们,我们将只需要更新 package.json 来更新库。只在需要的时候,我们打开 index.html 文件来添加库或者是 css 样式表。

 我们会使用 Angular 2 来创建一个小的应用来演示更多的内容。
来继续学习 Tour of Heroes Tutorial!

Appendices

最后是一系列我们涵盖内容中涉及的知识点的速览。

这里没有基础的资料,对于好奇者来说可以继续读下去。 

Appendix: Browser ES6 support

 Angular 2 基于一些 ES2015 特性,大多数在流行的浏览器中可以找到。有些浏览器(包括 IE11 ) 需要一个垫片来支持需要的功能。试着在 index.html 文件的其他脚本之前加载垫片库。
<script src="node_modules/es6-shim/es6-shim.js"></script>

Appendix: package.json

npm 是流行的包管理程序,Angular 应用开发者依赖它来获取和管理应用所使用的库。

我们在 npm 的 package.json 文件中,指定我们需要使用的包。

Angular 团队建议使用的包列在 dependencies 和 devDependencies 配置节中。

package.json (dependencies)
{
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}

还有一些其它的包选择,我们建议使用这些包,因为它们在一起工作的很好。现在使用它们,以后可以根据你的爱好和习惯使用其它的包。

在 package.json 中,包含一个可选的 scripts 配置节,我们可以定义一些有用的命令来执行开发和构建任务。我们已经在建议的 package.json 中包含了一些命令。

package.json (scripts)
{
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
}
}

我们已经看到了如何同时执行编译器和服务器的监控任务。

npm start

我们可以使用下面的方式来执行 npm 脚本: npm run + script-name. 下面是三个脚本的目的:

  • npm run tsc - 执行一次 TypeScript 编译器

  • npm run tsc:w - 在监控模式执行 TypeScript 编译器; 进程保持执行。等到 TypeScript 文件变化之后,重新编译它。

  • npm run lite - 执行 lite-server, 一个轻量级的,静态文件服务器。, 由 John Papa 编写和维护,对 Angular 使用路由的应用有着杰出的支持.

Appendix: Npm errors and warnings

当执行 npm install 没有错误的时候一切都好, 会有一些 npm 警告信息,一切完全没有问题。

我们经常在一系列的 gyp 错误信息之后看到 Npm 的警告信息。忽略它们吧,包可能试图使用 node-gyp 重新编译自己。如果重新编译失败,包会进行恢复(典型地使用上一个 build 版本)而且正常工作。 

Appendix: TypeScript configuration

我们添加了一个 TypgeScript 配置文件 tscofnig.json 到我们的项目,在编译生成 JavaScript 的时候来指导编译器。可以从 TypeScript 官方的 TypeScript wiki 来获取关于 tsconfig.json 的详细说明。

我们使用的选项和标志都是基本的。

我们花一点时间来讨论 noImplicitAny 标志。TypeScript 开发者不同意它到底应该是 true 还是 false。这里没有正确的答案,我们以后也可以修改它。但是我们现在的选择会在大的项目中造成很大的不同,所以,它值得讨论一下。

当 noImplicitAny 标志为 false 的时候,如果编译器不能根据变量的使用来推断变量的类型,直接默认为 any 类型。这就是为什么称为 "implicitly any ",

当 noImplicitAny 标志为 true 的时候,TypeScript 编译器不能推断类型,它仍然生成 JavaScript 文件,但是报告一个错误。

在这个 QuickStart 和其它的开发示例手册中,我们将 noImplicitAny 标志设置为 false.

希望强制类型检查的开发者可能会设置 noImplicitAny 标志为 true。我们仍然可以将变量的类型设置为 any,如果这是更好的选择的话。

如果我们将 noImplicitAny 标志设置为 true,我们会得到一个显式的索引错误。如果我们觉得没有用,而是被困扰了,可以使用下面的标志来抑制它们。

  1. "suppressImplicitAnyIndexErrors":true

Appendix: SystemJS Configuration

QuickStart 使用 SystemJS 加载应用和库模块。还有一些替代库页可以做的很好比如著名的 webpack 。SystemJS 在需要简单清楚的时候是一个好的选择。

各种模块加载器都需要进行配置,一旦文件变多,我们开始考虑生产力和性能的时候,所有的配置都变得复杂。

我们建议你精通所选择的加载器。

更多关于 SystemJS 的配置信息参考这里 here

由于以上的考虑,我们这里作了什么呢?

index.html (System configuration
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>

package 节点告诉 SystemJS 当遇到一个来自 app 文件中的模块请求的时候如何去做。

当应用中的一个 TypeScript 文件有类似下面的导入语句时,我们的 QuickStart 会发出一些请求。

boot.ts (excerpt)
import {AppComponent} from './app.component'

注意,from 后面的模块名称没有包含扩展名,package 的配置告诉 SystemJS 默认的扩展名是 ‘js',JavaScript 文件。

这是说的通的,因为我们会在编译 TypeScript 到 JavaScript 之后运行应用。

在 plunker 网站上的动态演示中,我们在浏览器中即时编译,演示没有问题,但是对于开发或者生产环境就不适合。

有许多因素我们建议在运行应用之前的 build 阶段编译成 JavaScript 代码:

  • 在浏览器中,我们可以看到隐藏在后面的编译警告和错误信息。We see compiler warnings and errors that are hidden from us in the browser.

  • 预编译简化了模块加载过程,而且当它是一个独立的外部步骤的时候更容易检测问题.

  • 由于浏览器不用浪费时间进行编译,预编译意味着更快的用户体验.

  • 迭代开发过程会更快,因为我们只需要编译变化的文件。一旦应用超过一定的量,我们就会注意到区别。

  • 预编译适应持续集成,测试,发布。

System.import 调用告诉 SystemJS 导入 boot 文件(boot.js ... 等到编译之后,记得吗?)boot 是我们告诉 Angular 启动应用的地方,我们同时也捕获和记录启动中的错误信息到控制台中。

其它的模块或者由 Angular 自身或者由前面的模块加载。

Appendix: boot.ts

Bootstrapping is platform-specific

我们从 angular2/platform/browser 中导入 bootstrap 函数,而不是 angular2/core, 有一些原因。

我们只在希望跨所有平台目标的时候调用 "core" ,是的,多数 Angular 应用仅仅运行在浏览器中,多数情况下我们调用这个库的函数,如果我们总是为浏览器的话,这是一个很好的选择。

但是,有可能在不同的环境下加载组件,我们可能在移动设备中使用  Apache Cordova ,我们希望在服务器渲染首页,以便提高加载性能或者便于 SEO。

这些目标需要我们从其它库中导入不同的函数。

为什么创建独立的 boot.ts 文件?

boot.ts 文件很小,仅仅是一个 QuickStart,我们可以将仅有的几行合并到 app.component 文件中,减少一些复杂度。

下面的原因使我们没有这样做:

  1. 很容易写好。
  2. 可测试
  3. 可重用
  4. 关注点分离
  5. 可以学到更多的导入和导出

容易

确实是额外的步骤和额外的文件,有多难呢?

我们会在更多的应用中看到独立的 boot.ts 的优点,让我们用很低的代价学到更多好的习惯。

Testability

即使我们知道我们永远不会测试这个 QuckStart ,我们也应该从一开始考虑到可测试性。

如果同一个组件文件中包含了 bootstrap 调用的话,它是很难测试的。一旦我们加载这个组件文件进行测试,bootstrap 函数就会试图加载应用到浏览器中。由于我们并不希望运行整个应用,它会报错,

将 bootstrap 功能移到独立的 boot.ts 文件中,可以避免这个错误,保持组件文件的清晰。

Reusability

在应用开发过程中,我们重构,重命名文件,如果文件中调用了 bootstrap,我们不能就不能做这些事情。我们不能移动,不能在其它应用中重用组件,不能为了更好的性能在服务区端预先渲染。

Separation of concerns

组件的职责是呈现和管理视图。

启动应用对视图来说完全无关。

Import/Export

在分离的 boot.ts 文件中,我们学到了 Angular 的基本技能:如何从模块导出,如何导入到其它模块。在学习 Angular 的过程中,我们会做大量的此类工作。

 

翻译:Angular 2 - TypeScript 5 分钟快速入门的更多相关文章

  1. Vue.js 60 分钟快速入门

    Vue.js 60 分钟快速入门 转载 作者:keepfool 链接:http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下 ...

  2. 不会几个框架,都不好意思说搞过前端: Vue.js - 60分钟快速入门

    Vue.js——60分钟快速入门   Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理 ...

  3. 一分钟快速入门openstack

    一.它是什么,能干什么想认识一个事物,必须先弄明白它是什么,能干什么.首先说一下,openstack是一个搭建云平台的一个解决方案,说他不是个软件,但是我觉得说是一个软件,能够让大家认识更清晰些.op ...

  4. Vue.js——60分钟快速入门(转)

    vue:Vue.js——60分钟快速入门 <!doctype html> <html lang="en"> <head> <meta ch ...

  5. AngularJS 30分钟快速入门【译】

    引用自:http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/,翻译如下: 简介 我三年前开始使用 ...

  6. 5分钟快速入门 - Less

    下面给大家讲解下Less,纯手工,入门级别,相信没学过的人阅读完后就懂了,以下是我要讲的四点: 简单介绍 Less CSS 是一个使用广泛的 CSS 预处理器. 对 CSS 进行扩展,减少很多 CSS ...

  7. ichartjs一分钟快速入门教程

    1.构建项目环境 由于ichartjs是一个js库,所以只要将ichart.js加入你页面的head中就完成了ichartjs的运行环境.代码如下: <script type="tex ...

  8. Redis 十分钟快速入门

    本教程是一个快速入门教程,所以Redis的命令只是简单介绍了几个常用的,如果有其他需求请求官网查看API 使用. 1. Redis简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的ke ...

  9. Angular 2 - 5 分钟快速入门

    原文地址: https://angular.io/docs/ts/latest/quickstart.html 让我们从 0 开始创建一个简单的 Angular 2 应用. 下载任何版本的 angul ...

随机推荐

  1. 文字对齐之text-align总结

    一.文字对齐总结: 下面是我实际运用中遇到的问题总结: css代码: 效果(段落文字没有对齐): 去掉html中的<p>标签,css样式同样去掉p标签,效果如下(达到预期效果): 为什么在 ...

  2. 【Hadoop需要的Jar包】Hadoop编程-pom.xml文件

    JDK版本的要求 Hadoop 2.7 以及之后的版本,需要JDK 7: Hadoop 2.6 以及之前的版本,支持JDK 6: 对于Hadoop1.x.x版本,只需要引入1个jar: hadoop- ...

  3. 【Struts2学习笔记-8】Struts2实现json数据的返回

    需要的jar包 struts2-json-plugin-2.3.12.jar xwork-core-2.3.16.3.jar struts.xml 来自为知笔记(Wiz) 附件列表 IMG_20150 ...

  4. 【SQL Server】系统学习之三:逻辑查询处理阶段-六段式

    一.From阶段 针对连接说明: 1.笛卡尔积 2.on筛选器 插播:unknown=not unknuwn 缺失的值: 筛选器(on where having)把unknown当做FALSE处理,排 ...

  5. 黄聪:C#超级延时方法,延迟系统时间但系统又能同时能执行其它任务

    private void Delay(int Millisecond) //延迟系统时间,但系统又能同时能执行其它任务: { DateTime current = DateTime.Now; whil ...

  6. C# 多线程网络通信

    博客园 :梦工厂2012 本月由于事情太多,没能有太多的时间去写博客.不过还好在月底抽时间写了这个多线程网络通信的程序 .程序说明:控制端 创建一个写线程threadWrite和一个读线程thread ...

  7. HDU 3652 B-number(数位dp)

    题意:B数的定义是有字符串“13”且能被整数13整除的数,求[1,n]内的B数个数. 题解:这是数位DP,我也就是刚入门,前两天看到了非递归写法,好麻烦.所以我建议写dfs的方法,容易理解,代码还简短 ...

  8. POJ 1466 Girls and Boys 黑白染色 + 二分匹配 (最大独立集) 好题

    有n个人, 其中有男生和女生,接着有n行,分别给出了每一个人暗恋的对象(不止暗恋一个) 现在要从这n个人中找出一个最大集合,满足这个集合中的任意2个人,都没有暗恋这种关系. 输出集合的元素个数. 刚开 ...

  9. NeHe OpenGL教程 第三十课:碰撞检测

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  10. git(4)如何在windows上安装git

    windows版本git(1.9.2)下载:点击下载 下完之后点击双击安装: 我安装的是默认的目录:一路next,最后就安装完成了,中间步骤中也有unix下安装的选项: 我的安装目录是在:C:\Pro ...