Angular 4入门教程系列 1 运行在Docker中的HelloWorld

Angular作为目前前端的一个重要选择，加之背后站着google，得到了越来越多的开发者的青睐。但是发现没有按照由浅入深地实例化的教程，虽然官网的教程已经不错，但是初始入门的细节没有提到，再加之网络等问题，决定把官网的教程替大家做一遍给大家留个笔记。同时可能会结合docker进行使用，当然没有安装docker也完全没有关系，同样执行就可以了。

事前准备

OS

[root@angular docker]# uname -a
Linux angular 3.10.0-514.el7.x86_64 #1 SMP Tue Nov 22 16:42:41 UTC 2016 x86_64 x86_64 x86_64 GNU/Linux
[root@angular docker]#
  • 1
  • 2
  • 3

Docker

安装了目前最新的稳定的docker-ce版本，安装方法可以参看

http://blog.csdn.net/liumiaocn/article/details/78349005

[root@angular ~]# docker version
Client:
 Version:      17.09.0-ce
 API version:  1.32
 Go version:   go1.8.3
 Git commit:   afdb6d4
 Built:        Tue Sep 26 22:39:28 2017
 OS/Arch:      linux/amd64

Server:
 Version:      17.09.0-ce
 API version:  1.32 (minimum version 1.12)
 Go version:   go1.8.3
 Git commit:   afdb6d4
 Built:        Tue Sep 26 22:45:38 2017
 OS/Arch:      linux/amd64
 Experimental: false
[root@angular ~]#
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

下载Node镜像

node的官方镜像，使用其alpine的会有跟小的尺寸，对那些关心镜像大小的项目很有帮助。

[[email protected] docker]# docker pull node:8.7-alpine
8.7-alpine: Pulling from library/node
Digest: sha256:9c6fab2e870c3dac999ae2bae0eeb4e4831aa25561da03cadcf736f4ba9f9cca
Status: Image is up to date for node:8.7-alpine
[[email protected] docker]# docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
node                8.7-alpine          a47a5669ac57        2 weeks ago         65.3MB
[[email protected] docker]#
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

可以看到，最新的8.7版本的node，只有65M

准备Angular的开发环境

我们在这系列教程中将会使用angular-cli来进行开发，所以其实只需要安装angluar/cli即可，同时将typescript和typings也进行安装，而这些我们固化到一个简单的Dockerfile中。

[root@angular docker]# cat Dockerfile
FROM node:8.7-alpine

RUN npm install -g @angular/cli     npm install -g typescript       npm install -g typings

WORKDIR /workspace

CMD ng serve -H 0.0.0.0 --port=4200
[root@angular docker]#
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

Docker build

非docker的环境，只需要安装npm，然后使用npm去执行安装@angular/cli等即可。

构建命令：docker build -t angular:latest .

[root@angular docker]# docker build -t angular:latest .
Sending build context to Docker daemon  125.6MB
Step 1/4 : FROM node:8.7-alpine
 ---> a47a5669ac57
Step 2/4 : RUN npm install -g @angular/cli     npm install -g typescript       npm install -g typings
 ---> Running in 275cc362f8ea
npm info it worked if it ends with ok
npm info using npm@5.4.2
npm info using node@v8.7.0
...
+ [email protected]2.5.3
+ @angular/[email protected]1.4.9
+ npm@5.5.1
+ npm@5.5.1
+ [email protected]2.1.1
added 1142 packages, updated 29 packages and moved 2 packages in 226.09s
npm info ok
 ---> 1b950a9ce633
Removing intermediate container 275cc362f8ea
Step 3/4 : WORKDIR /workspace
 ---> 628dace1dd72
Removing intermediate container 1c9bb2c59b4b
Step 4/4 : CMD ng serve -H 0.0.0.0 --port=4200
 ---> Running in 36a45f999a65
 ---> a6962d3cb379
Removing intermediate container 36a45f999a65
Successfully built a6962d3cb379
Successfully tagged angular:latest
[root@angular docker]#
  • 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

确认构建结果：docker images

[root@angular docker]# docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
angular             latest              a6962d3cb379        12 minutes ago      227MB
node                8.7-alpine          a47a5669ac57        2 weeks ago         65.3MB
[root@angular docker]#
  • 1
  • 2
  • 3
  • 4
  • 5

可以看到安装这些之后镜像已经达到227M

第一个Angular的HelloWorld程序

docker run

不使用docker的话，可以忽略

[root@angular docker]# docker run -p 4200:4200 -it angular sh
/workspace # ls
/workspace # hostname
60d12e58d5db
/workspace #
  • 1
  • 2
  • 3
  • 4
  • 5

可以看到已经在一个新启动的容器之中了

确认版本

/workspace # ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | ‘_ \ / _` | | | | |/ _` | ‘__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.4.9
node: 8.7.0
os: linux x64
/workspace #
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

ng new

使用Angular cli的ng系列命令可以快速创建一个项目，后面会专门来介绍如何使用ng系列命令。

命令：ng new HelloAngular

创建一个HelloAngular的项目

/workspace # ng new HelloAngular
  create HelloAngular/README.md (1028 bytes)
  create HelloAngular/.angular-cli.json (1290 bytes)
  create HelloAngular/.editorconfig (245 bytes)
  create HelloAngular/.gitignore (516 bytes)
  create HelloAngular/src/assets/.gitkeep (0 bytes)
  create HelloAngular/src/environments/environment.prod.ts (51 bytes)
  create HelloAngular/src/environments/environment.ts (387 bytes)
  create HelloAngular/src/favicon.ico (5430 bytes)
  create HelloAngular/src/index.html (299 bytes)
  create HelloAngular/src/main.ts (370 bytes)
  create HelloAngular/src/polyfills.ts (2667 bytes)
  create HelloAngular/src/styles.css (80 bytes)
  create HelloAngular/src/test.ts (1085 bytes)
  create HelloAngular/src/tsconfig.app.json (211 bytes)
  create HelloAngular/src/tsconfig.spec.json (304 bytes)
  create HelloAngular/src/typings.d.ts (104 bytes)
  create HelloAngular/e2e/app.e2e-spec.ts (295 bytes)
  create HelloAngular/e2e/app.po.ts (208 bytes)
  create HelloAngular/e2e/tsconfig.e2e.json (235 bytes)
  create HelloAngular/karma.conf.js (923 bytes)
  create HelloAngular/package.json (1318 bytes)
  create HelloAngular/protractor.conf.js (722 bytes)
  create HelloAngular/tsconfig.json (363 bytes)
  create HelloAngular/tslint.json (2985 bytes)
  create HelloAngular/src/app/app.module.ts (314 bytes)
  create HelloAngular/src/app/app.component.css (0 bytes)
  create HelloAngular/src/app/app.component.html (1120 bytes)
  create HelloAngular/src/app/app.component.spec.ts (986 bytes)
  create HelloAngular/src/app/app.component.ts (207 bytes)
You can `ng set --global packageManager=yarn`.
Installing packages for tooling via npm.
module.js:529
    throw err;
    ^

Error: Cannot find module ‘semver‘
    at Function.Module._resolveFilename (module.js:527:15)
    at Function.Module._load (module.js:476:23)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/unsupported.js:2:14)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)

Package install failed, see above.
Package install failed, see above.
/workspace # ng set --global packageManager=yarn
/workspace # ls
HelloAngular
/workspace # rm -rf HelloAngular
  • 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
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54

发现提示出错了，这个是需要设定packageManager为yarn，入门的时候让做什么就做什么，安装依赖使用yarn也很好，只要能很好的装上就行。

/workspace # ng set --global packageManager=yarn
/workspace # ls
HelloAngular
/workspace # rm -rf HelloAngula
  • 1
  • 2
  • 3
  • 4

发现项目目录实际已经创建了，所以设定之后删除重新再来。

/workspace # ng new HelloAngular
  create HelloAngular/README.md (1028 bytes)
  create HelloAngular/.angular-cli.json (1290 bytes)
  create HelloAngular/.editorconfig (245 bytes)
  create HelloAngular/.gitignore (516 bytes)
  create HelloAngular/src/assets/.gitkeep (0 bytes)
  create HelloAngular/src/environments/environment.prod.ts (51 bytes)
  create HelloAngular/src/environments/environment.ts (387 bytes)
  create HelloAngular/src/favicon.ico (5430 bytes)
  create HelloAngular/src/index.html (299 bytes)
  create HelloAngular/src/main.ts (370 bytes)
  create HelloAngular/src/polyfills.ts (2667 bytes)
  create HelloAngular/src/styles.css (80 bytes)
  create HelloAngular/src/test.ts (1085 bytes)
  create HelloAngular/src/tsconfig.app.json (211 bytes)
  create HelloAngular/src/tsconfig.spec.json (304 bytes)
  create HelloAngular/src/typings.d.ts (104 bytes)
  create HelloAngular/e2e/app.e2e-spec.ts (295 bytes)
  create HelloAngular/e2e/app.po.ts (208 bytes)
  create HelloAngular/e2e/tsconfig.e2e.json (235 bytes)
  create HelloAngular/karma.conf.js (923 bytes)
  create HelloAngular/package.json (1318 bytes)
  create HelloAngular/protractor.conf.js (722 bytes)
  create HelloAngular/tsconfig.json (363 bytes)
  create HelloAngular/tslint.json (2985 bytes)
  create HelloAngular/src/app/app.module.ts (314 bytes)
  create HelloAngular/src/app/app.component.css (0 bytes)
  create HelloAngular/src/app/app.component.html (1120 bytes)
  create HelloAngular/src/app/app.component.spec.ts (986 bytes)
  create HelloAngular/src/app/app.component.ts (207 bytes)
Installing packages for tooling via yarn.
Installed packages for tooling via yarn.
Project ‘HelloAngular‘ successfully created.
  • 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

这里可能会等一会时间，因为要安装依赖，可以发现安装的时候已经通过我们设定的yarn了（Installing packages for tooling via yarn.）

启动

启动命令：ng serve -H 0.0.0.0 –port=4200 –open

注意点：在容器内需要指定-H，缺省端口为4200，如果希望改变使用port选项进行修正即可。

/workspace # cd HelloAngular
/workspace/HelloAngular # ng serve -H 0.0.0.0 --port=4200 --open
** NG Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **
 10% building modules 3/3 modules 0 active(node:146) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 3
(node:146) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.                                                                      Date: 2017-10-26T22:02:09.332Z            Hash: c5e9842219db972ca0d2
Time: 28679ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 8.65 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 199 kB {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.3 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.32 MB [initial] [rendered]

webpack: Compiled successfully.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

可以看到webpack已经编译成功，DeprecationWarning的Warning可以忽略。

确认结果

可以看到我们第一个应用程序就看到结果了。

修改内容

[[email protected] ~]# docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                    NAMES
60d12e58d5db        angular             "sh"                16 minutes ago      Up 16 minutes       0.0.0.0:4200->4200/tcp   festive_johnson
[[email protected] ~]# docker exec -it festive_johnson sh
/workspace # ls
HelloAngular
/workspace # cd HelloAngular
/workspace/HelloAngular # cd src/app
/workspace/HelloAngular/src/app # ls
app.component.css      app.component.html     app.component.spec.ts  app.component.ts       app.module.ts
/workspace/HelloAngular/src/app #
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

可以清楚的看到，页面显示的信息在html页面里面

/workspace/HelloAngular/src/app # cat app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

/workspace/HelloAngular/src/app #
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

而这个HelloWorld的核心则是在这一句：Welcome to {{title}}!

通过{{}}差指表达式的语法绑定数据进来，而数据则保存在app.component.ts之中。

/workspace/HelloAngular/src/app # cat app.component.ts
import { Component } from ‘@angular/core‘;

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
  title = ‘app‘;
}
/workspace/HelloAngular/src/app #
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

修改title内容为Angular Examples

/workspace/HelloAngular/src/app # cat app.component.ts
import { Component } from ‘@angular/core‘;

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
  title = ‘Angular Examples‘;
}
/workspace/HelloAngular/src/app #
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

确认结果

此时你会发现在刚刚ng serve启动的窗口，webpack开始重新编译了一遍，因为我们刚刚修改了代码

webpack: Compiling...
Date: 2017-10-26T22:13:15.311Z
Hash: 2991e5ee5a558b91ce4b
Time: 716ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry]
chunk {main} main.bundle.js, main.bundle.js.map (main) 8.66 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 199 kB {inline} [initial]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.3 kB {inline} [initial]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.32 MB [initial]

webpack: Compiled successfully.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

确认页面显示

如果你的浏览器还在打开着，再次刷新一下，就可以看到修改的结果了

总结

这篇文章我们学习到了如何使用Angluarcli进行开发第一个HelloWorld，并且如何将其放到node的官方容器之中，下篇开始我们开始拆官方教程。

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

原文地址：https://www.cnblogs.com/firsttry/p/10294001.html

时间： 2024-07-30 16:47:42

Angular 4入门教程系列 1 运行在Docker中的HelloWorld的相关文章

WPF入门教程系列(一) 创建你的第一个WPF项目

WPF入门教程系列(一) 创建你的第一个WPF项目 WPF基础知识 快速学习绝不是从零学起的,良好的基础是快速入手的关键,下面先为大家摞列以下自己总结的学习WPF的几点基础知识: 1) C#基础语法知识(或者其他.NET支持的语言):这个是当然的了,虽然WPF是XAML配置的,但是总还是要写代码的,相信各位读者应该也都有这个基础了. 2) HTML语言:虽然WPF是窗体程序但是由于使用的XAML语言,如果以前接触过HTML.XHTML.ASP.NET之路的东西的话会,接受这些标签会很有帮助的,如

WPF入门教程系列(二) 深入剖析WPF Binding的使用方法

WPF入门教程系列(二) 深入剖析WPF Binding的使用方法 同一个对象(特指System.Windows.DependencyObject的子类)的同一种属性(特指DependencyProperty)只能拥有一个binding. 这一点可以通过设置binding对象的方法名得知: public static BindingExpressionBase SetBinding( DependencyObject target, DependencyProperty dp, BindingB

[转载]WPF入门教程系列一——基础

一. 前言   最近在学习WPF,学习WPF首先上的是微软的MSDN,然后再搜索了一下网络有关WPF的学习资料.为了温故而知新把学习过程记录下来,以备后查.这篇主要讲WPF的开发基础,介绍了如何使用Visual Studio 2013创建一个WPF应用程序. 首先说一下学习WPF的基础知识: 1) 要会一门.NET所支持的编程语言.例如C#. 2) 会一点“标准通用标记语言”:WPF窗体程序使用的XAML语言,也属于“标准通用标记语言”的一个分支.如果以前接触过XML.HTML.XHTML.AS

SeaJS入门教程系列之使用SeaJS（二）

SeaJS入门教程系列之使用SeaJS(二) 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-03我要评论 这篇文章主要介绍了SeaJS入门教程系列之使用SeaJS,着重介绍了SeaJS的使用方法.关键方法的使用等,需要的朋友可以参考下 下载及安装 要在项目中使用SeaJS,你所有需要做的准备工作就是下载sea.js然后放到你项目的某个位置.SeaJS项目目前托管在GitHub上,主页为 https://github.com/seajs/seajs/ .可以到其git库的buil

WPF入门教程系列二——Application介绍

原文:WPF入门教程系列二--Application介绍 一.Application介绍 WPF和WinForm 很相似, WPF与WinForm一样有一个 Application对象来进行一些全局的行为和操作,并且每个 Domain (应用程序域)中仅且只有一个 Application 实例存在.和 WinForm 不同的是WPF Application默认由两部分组成 : App.xaml 和 App.xaml.cs,这有点类似于 Asp.Net WebForm,将定义和行为代码相分离. 微

Python入门教程系列：一、异常处理

前面几章,我们已经把Python的基础内容简单说了一些,从这章开始,我们算是入门级别的学习了,主要把剩下的一些内容说一下,主要包括异常处理.模块的使用.函数的使用.面向对象.正则匹配.数据库.网络(爬虫),最后我们会有一个关于机器学习的高级系列教程. 异常处理,用最通俗的话说,就是你的程序出错了,这错误也分好几种,有的可能是语法错误,比如你多写少写错写个字符等,也有逻辑错误,比如1>2,语法上没错误但是逻辑错误,对于初级选手来说,犯得最多的错误就是马虎,也就是语法错误,对于菜鸟级的犯得最多的错误

本地搭建Spring Initializr服务器(运行在docker中)

环境 win10 + VMware15.0.2 + CentOS7 + docker18.09.7 说明: 本次要将Spring Initializr运行在docker容器中,我电脑是将docker安装在了虚拟机CentOS系统中,如果自己电脑中已有docker环境直接运行步骤2即可. 步骤 安装docker[可安装在本机,也可安装在虚拟机中] 启动start_spring_io 容器(映射本机端口,我映射到了本机8888端口.8080常用,防止冲突) docker run -tid --nam

WCF入门教程系列三

一.WCF服务应用程序与WCF服务库 我们在平时开发的过程中常用的项目类型有“WCF 服务应用程序”和“WCF服务库”. WCF服务应用程序,是一个可以执行的程序,它有独立的进程,WCF服务类契约的定义,可以直接看到运行的效果.此项目模板基于IIS托管的程序,如本系列的第一节所示.在开发基于IIS托管的WCF服务程序时,比较多见,自学的时候也可以使用这种类型,简单易懂. WCF服务库,可以认为是一个包含WCF服务以及契约定义的类库.不能直接运行,你可以在其他项目里引用,在宿主里启用托管这个库,有

WCF入门教程系列五

一.概述 WCF在通信过程中有三种模式:请求与答复.单向.双工通信.以下我们一一介绍. 二.请求与答复模式 描述: 客户端发送请求,然后一直等待服务端的响应(异步调用除外),期间处于假死状态,直到服务端有了答复后才能继续执行其他程序,如下图所示(图中的粗红线在此时代表顺序并不代表调用): 请求与答复模式为WCF的默认模式,如下代码所示: 1 [OperationContract] 2 string ShowName(string name); 即使返回值是void 也属于请求与答复模式. 缺点: