如何学习用Typescript写Reactjs_百度知道
如何学习用Typescript写Reactjs
提问者采纳
h1&gt, 仅此而已，一般复用性比较差, 下面用tsc命令创建一个ts项目配置文件tsc --init命令创建了tsconfig, 可以用命令行装ts编译器 npm i -g typescript@next4;html&gt, 打开该文件增加&hello {this.tsx后，因为减少了80%查文档的时间;bower_components&#47,这样编译的文件就会在当前目录输出 &any,age, 其实跟JS完全没两样;target&quot. 如果保存了demo；React解决了把dom标签暴露出去的问题.name}&&#47，因为工具会列出来;/outDir&&#47: '－－－－－－时间分割－－－－－－13.render(&lt,
};react, any&gt, 就会有2个命令可用.&gt, 有空再写, 跟react官网的es6写法一模一样多了&lt， 因为我们接下来使用比较原始的写法，熟练使用tsd, 那么可能是vs没配置好，工厂方法在创建子类的同时; &#47、继续写;&;;script src=&组件.Component {
render() {
return &&lt.h1&body&gt.body);bower_components&#47，vs第一;&#39，直接把React当作全局对象使用;&lt, 或者如果不依赖vs（比如mac环境）;
render() {
return &.Component {
constructor(props，做了一些初始化的动作: true
是否监听文件修改
如果你用的是body&gt,any&gt: &quot. demo.json配置文件, context);
&，如果没有安装bower命令. 下班, 仅此而已;9，上手任何新的开发环境都很快，这是nodejs世界里的包管理器（也可以看作node的app商店）.下载reactjs文件;/. 至于题主说怎么学习:(){
return {script&gt.props: &quot,any&gt, 跟react官网的es6写法一模一样多了&h1&gt: &不起作用的
getInitialState，不需要Babel编译也不需要webpack打包，这样的写法是无效的.addEventListener(&#39.js, 添加文件的引用&.tsx文件(注意这里是tsx,没关系;11;watch&
&lt!doctype html&gt:20}1;DOMContentLoaded&#39. 打开;
&&lt:创建一个;})；class MyView extends RMyClass name=&quot, 这是编译后的js文件10,react&es5&quot.html可以看到效果了;/8;;;hello {this，你根本不需要记住组件的API.tsx的代码;react/hello {this，下面是官网给出的方案（这里TypeScript和ES6情况是一样的）class MyView extends R 这两个prop和states类型约束;script src=&&built&head&;
}}需要改成如下方式, &quot, tsd用来下载第三方js类库的ts定义文件(或者叫头文件)，原因如下;.安装node.js&.js&quot:'&gt, context) {
super(props、当组件化遇到强类型；5,
就是自动把tsx变成最终的js；以上的代码;h1&gt.tsx的代码, 而不是jsx把& {
render() {
return &lt.7）,在当前文件夹下命令行运行tsctsc命令会自动根据tsconfig，基本写完就仍；3;
&&lt，并提供了强大的重构能力；3）JS天生缺乏私有和公共成员的约束; 这两个prop和states类型约束，所以在使用class方式进行子类继承，TS则解决了语言层面的问题;
}}document，当然这不是必须的，可以手动去官网下载react类库bower install --save react7;demo.以上环境配置好了;/&#47, 开始写代码; &#47，缺乏可记忆性;react-script src=&quot, 自动帮你把代码编译成js,因为state是null
&#47. 命令行下载react的ts头文件;&#39，这与单纯的原型继承不同，对1-12进行润色,如果你没有装vs或者vsc.会抛异常,这行不重要6;html&gt.state = {jsx&quot, 其实跟JS完全没两样；2.安装vs 2015或者vs code, function () {
ReactDOM.name}&lt.js&quot. 至于题主说怎么学习.name}&lt：tsc和h1&gt.min，vs2015update1自带了ts1;script&gt,tsd install react-global --save注意上面之所以写 react-global 而不是/
}}16，不加注释根本不知道怎么使用该类库/&gt，本身编程中变量和方法的命名对于码农来说就是天坑.vs自带了TypeScript（vs2012+：从前写JS组件;head&gt.tsx 写代码class MyClass extends R, 没有在目录下发现自动编译了11;react/h1&&#47.json里面配置的情况, 不是ts也不是jsx)创建一个demo，但是这里强烈推荐写ts的工具, 上面demo, 这行去掉， 而不作为es6模块（必须用import引入）;：1）暴露了太多的Dom结构以及别的实现细节;&gt；2）命名挫;&#47, 上面demo，vsc第二；上面执行的tsd命令下载了ReactJS类库的头文件;&lt，工作效率提升, 这里es3改成es5,最新版本的typescript for vs去官网下载即可;ponent&lt. 安装了ts后，转入传教模式, tsc用来编译TypeScript代码，因为ts的编译器是js&#47；
安装node后同时获得npm命令，所以写ts可以说是jser打通了任督二脉;&&#47.ts写的;script&12
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁React 入门实例教程 - 阮一峰的网络日志
React 入门实例教程
现在最热门的前端框架，毫无疑问是
上周，基于 React 的
发布，结果一天之内，就获得了 5000 颗星，受瞩目程度可见一斑。
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 ，都不满意，就决定自己写一套，用来架设
的网站。做出来以后，发现这套东西很好用，就在2013年5月了。
由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。
这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机（参见）。
既然 React 这么热门，看上去充满希望，当然应该好好学一下。从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目。但是，好的 React 教程却不容易找到，这一方面因为这项技术太新，刚刚开始走红，大家都没有经验，还在摸索之中；另一方面因为 React 本身还在不断变动，API 一直在调整，至今没发布1.0版。
我学习 React 时，就很苦恼。有的教程讨论一些细节问题，对入门没帮助；有的教程写得不错，但比较短，无助于看清全貌。我断断续续学了几个月，看过二十几篇教程，在这个过程中，将对自己有帮助的 Demo 都收集下来，做成了一个库
下面，我就根据，写一篇全面又易懂的 React 入门教程。你只需要跟着每一个 Demo 做一遍，就能初步掌握 React 。当然，前提是你必须拥有基本 JavaScript 和 DOM 知识，但是你读完就会发现，React 所要求的预备知识真的很少。
React 的安装包，可以到下载。不过， 已经自带 React 源码，不用另外安装，只需把这个库拷贝到你的硬盘就行了。
$ git clone :ruanyf/react-demos.git
如果你没安装 git， 那就直接下载 。
下面要讲解的12个例子在各个 Demo 子目录，每个目录都有一个 index.html 文件，在浏览器打开这个文件（大多数情况下双击即可），就能立刻看到效果。
需要说明的是，React 可以在浏览器运行，也可以在服务器运行，但是本教程只涉及浏览器。一方面是为了尽量保持简单，另一方面 React 的语法是一致的，服务器的用法与浏览器差别不大。
是服务器首屏渲染的例子，有兴趣的朋友可以自己去看源码。
一、HTML 模板
使用 React 的网页源码，结构大致如下。
&!DOCTYPE html&
&script src="../build/react.js"&&/script&
&script src="../build/react-dom.js"&&/script&
&script src="../build/browser.min.js"&&/script&
&div id="example"&&/div&
&script type="text/babel"&
// ** Our code goes here! **
上面代码有两个地方需要注意。首先，最后一个 &script& 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
$ babel src --out-dir build
上面命令可以将 src 子目录的 js 文件进行语法转换，转码后的文件全部放在 build 子目录。
二、ReactDOM.render()
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
ReactDOM.render(
&h1>Hello, world!&/h1>,
document.getElementById('example')
上面代码将一个 h1 标题，插入 example 节点（查看 ），运行结果如下。
三、JSX 语法
上一节的代码， HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 ，它允许 HTML 与 JavaScript 的混写（查看
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
names.map(function (name) {
return &div>Hello, {name}!&/div>
document.getElementById('example')
上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 & 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。上面代码的运行结果如下。
JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员（查看
var arr = [
&h1>Hello world!&/h1>,
&h2>React is awesome&/h2>,
ReactDOM.render(
&div>{arr}&/div>,
document.getElementById('example')
上面代码的arr变量是一个数组，结果 JSX 会把它的所有成员，添加到模板，运行结果如下。
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类（查看 ）。
var HelloMessage = React.createClass({
render: function() {
return &h1>Hello {this.props.name}&/h1>;
ReactDOM.render(
&HelloMessage name="John" />,
document.getElementById('example')
上面代码中，变量 HelloMessage 就是一个组件类。模板插入 &HelloMessage /& 时，会自动生成 HelloMessage 的一个实例（下文的"组件"都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。
注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错。
var HelloMessage = React.createClass({
render: function() {
return &h1>
Hello {this.props.name}
上面代码会报错，因为HelloMessage组件包含了两个顶层标签：h1和p。
组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 &HelloMessage
name="John"& ，就是 HelloMessage 组件加入一个 name 属性，值为 John。组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。上面代码的运行结果如下。
添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
五、this.props.children
this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点（查看 ）。
var NotesList = React.createClass({
render: function() {
React.Children.map(this.props.children, function (child) {
return &li>{child}&/li>;
ReactDOM.render(
&NotesList>
&span>hello&/span>
&span>world&/span>
&/NotesList>,
document.body
上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取，运行结果如下。
这里需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。
React 提供一个工具方法
来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法，请参考。
六、PropTypes
组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。
组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求（查看 ）。
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
render: function() {
return &h1> {this.props.title} &/h1&;
上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。
var data = 123;
ReactDOM.render(
&MyTitle title={data} /&,
document.body
这样一来，title属性就通不过验证了。控制台会显示一行错误信息。
Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.
更多的PropTypes设置，可以查看。
此外，getDefaultProps 方法可以用来设置组件属性的默认值。
var MyTitle = React.createClass({
getDefaultProps : function () {
title : 'Hello World'
render: function() {
return &h1& {this.props.title} &/h1&;
ReactDOM.render(
&MyTitle /&,
document.body
上面代码会输出"Hello World"。
七、获取真实的DOM节点
组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做
，它可以极大提高网页的性能表现。
但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性（查看
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
render: function() {
&input type="text" ref="myTextInput" />
&input type="button" value="Focus the text input" onClick={this.handleClick} />
ReactDOM.render(
&MyComponent />,
document.getElementById('example')
上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。
React 组件支持很多事件，除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等，完整的事件清单请查看。
八、this.state
组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI （查看
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
handleClick: function(event) {
this.setState({liked: !this.state.liked});
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
&p onClick={this.handleClick}>
You {text} this. Click to toggle.
ReactDOM.render(
&LikeButton />,
document.getElementById('example')
上面代码是一个 LikeButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取（查看
var Input = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
handleChange: function(event) {
this.setState({value: event.target.value});
render: function () {
var value = this.state.
&input type="text" value={value} onChange={this.handleChange} />
&p>{value}&/p>
ReactDOM.render(&Input/>, document.body);
上面代码中，文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况，更多介绍请参考。
十、组件的生命周期
组件的分成三个状态：
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
这些方法的详细说明，可以参考。下面是一个例子（查看
var Hello = React.createClass({
getInitialState: function () {
opacity: 1.0
componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.
opacity -= .05;
if (opacity & 0.1) {
opacity = 1.0;
this.setState({
opacity: opacity
}.bind(this), 100);
render: function () {
&div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
ReactDOM.render(
&Hello name="world"/>,
document.body
上面代码在hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。
另外，组件的style属性的设置方式也值得注意，不能写成
style="opacity:{this.state.opacity};"
style={{opacity: this.state.opacity}}
这是因为 是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。
十一、Ajax
组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI （查看
var UserGist = React.createClass({
getInitialState: function() {
username: '',
lastGistUrl: ''
componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
if (this.isMounted()) {
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
}.bind(this));
render: function() {
{this.state.username}'s last gist is
&a href={this.state.lastGistUrl}>here&/a>.
ReactDOM.render(
&UserGist source="/users/octocat/gists" />,
document.body
上面代码使用 jQuery 完成 Ajax 请求，这是为了便于说明。React 本身没有任何依赖，完全可以不用jQuery，而使用其他库。
我们甚至可以把一个Promise对象传入组件，请看。
ReactDOM.render(
promise={$.getJSON('/search/repositories?q=javascript&sort=stars')}
document.body
上面代码从Github的API抓取数据，然后将Promise对象作为属性，传给RepoList组件。
如果Promise对象正在抓取数据（pending状态），组件显示"正在加载"；如果Promise对象报错（rejected状态），组件显示报错信息；如果Promise对象抓取数据成功（fulfilled状态），组件显示获取的数据。
var RepoList = React.createClass({
getInitialState: function() {
return { loading: true, error: null, data: null};
componentDidMount() {
this.props.promise.then(
value => this.setState({loading: false, data: value}),
error => this.setState({loading: false, error: error}));
render: function() {
if (this.state.loading) {
return &span>Loading...&/span>;
else if (this.state.error !== null) {
return &span>Error: {this.state.error.message}&/span>;
var repos = this.state.data.
var repoList = repos.map(function (repo) {
&a href={repo.html_url}>{repo.name}&/a> ({repo.stargazers_count} stars) &br/> {repo.description}
&h1>Most Popular JavaScript Projects in Github&/h1>
&ol>{repoList}&/ol>
十二、参考链接
, by Sebastian Markb?ge
, by Jack Callister
, by Ken Wheeler
, by Ryan Clark
, by Justin Deal
, by Binary Muse
, by zigomir
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
浏览器安全的基石是"同源政策"（same-origin policy）。很多开发者都知道这一点，但了解得不全面。
前面的文章介绍了 Systemd 的操作命令和基本用法，今天给出一个实例，如何使用 Systemd 启动一个 Node 应用。
越来越多的人，使用React开发Web应用。它的测试就成了一个大问题。使用TypeScript,AngularJs和Web API构建基本的CRUD Web 应用 - Woody Wu - 推酷
使用TypeScript,AngularJs和Web API构建基本的CRUD Web 应用 - Woody Wu
&版权归其作者所有.
在这篇文章中我将向大家展示如何使用TypeScript,Angular Js 和Asp.net Web API 来构建一个基本的实现CRUD功能的Web应用程序. Typescript提供了一系列的功能来方便程序员构造和组织更具有可维护性的Js应用程序.同时也可以集成现有的第三方库文件,你可以在接下来的Demo中看到这项特性.这个基本的HTML应用将借助Asp.net Web API实现增,删,查,改功能.
主要特点如下:
使用TypeScript构建AngularJs的Controller,
使用TypeScript并利用AngularJs 的Ajax功能与Web API进行通信,
使用TypeScript的强类型来定义AngularJs对象.
在这个例子中,我使用VS 2012和Sublime Text来编写代码.你也可以选择自己喜欢的文本编辑器,如果你需要语法高亮或者代码自动补全功能,你需要单独下载程序包.
对于VS插件和windows下的可执行文件(tsc.exe,安装包的一部分),请访问:&
. 如果你想选择一个不同的编辑器,(例如:Sublime Text或者Vim),请从这里寻找帮助 :&
. TypeScript编译程序是必不可少的工具.
服务端通过Asp.net Web API实现(.Net平台下构建Http服务的实现,我个人很喜欢),当然你也可以选择自己喜欢的技术.
使用Asp.net Web API 提供Http服务.
对于这个例子,我处理的模型由一个单一实体构成----Product.
//Modelpublic abstract class Entity
public Guid Id { get; set; }
public class Product : Entity
public string Name { get; set; }
public decimal Price { get; set; }
我们需要一个持久化机制来存储这些实体.我选择使用仓储模式把这些内容存在内存里.请根据需要,随意替换成适合你的东西(例如:Entity Framework或者Nhibernate.)
// IRepositorypublic interface IRepository&TEntity&
where TEntity : Entity
TEntity Add(TEntity entity);
TEntity Delete(Guid id);
TEntity Get(Guid id);
TEntity Update(TEntity entity);
IQueryable&TEntity& Items { get; }
//InMemoryRepository
public class InMemoryRepository&TEntity& : IRepository&TEntity& where TEntity : Entity
private readonly ConcurrentDictionary&Guid, TEntity& _concurrentDictionary
= new ConcurrentDictionary&Guid, TEntity&();
public TEntity Add(TEntity entity)
if (entity == null)
//we dont want to store nulls in our collection
throw new ArgumentNullException(&entity&);
if (entity.Id == Guid.Empty)
//we assume no Guid collisions will occur
entity.Id = Guid.NewGuid();
if (_concurrentDictionary.ContainsKey(entity.Id))
return null;
bool result = _concurrentDictionary.TryAdd(entity.Id, entity);
if (result == false)
return null;
public TEntity Delete(Guid id)
if (!_concurrentDictionary.ContainsKey(id))
return null;
bool result = _concurrentDictionary.TryRemove(id, out removed);
if (!result)
return null;
public TEntity Get(Guid id)
if (!_concurrentDictionary.ContainsKey(id))
return null;
bool result = _concurrentDictionary.TryGetValue(id, out entity);
if (!result)
return null;
public TEntity Update(TEntity entity)
if (entity == null)
throw new ArgumentNullException(&entity&);
if (!_concurrentDictionary.ContainsKey(entity.Id))
return null;
_concurrentDictionary[entity.Id] =
public IQueryable&TEntity& Items
get { return _concurrentDictionary.Values.AsQueryable(); }
一旦我们在这里完成了对象持久化,我们就可以创造一个Http服务,来提供一些基本的操作.我使用的是Asp.net Web API,所以我还要再创建一个 Controller.
//Product HTTP Service
public class ProductsController : ApiController
public static IRepository&Product& ProductRepository
= new InMemoryRepository&Product&();
public IEnumerable&Product& Get()
return ProductRepository.Items.ToArray();
public Product Get(Guid id)
Product entity = ProductRepository.Get(id);
if (entity == null)
throw new HttpResponseException(HttpStatusCode.NotFound);
public HttpResponseMessage Post(Product value)
var result = ProductRepository.Add(value);
if (result == null)
// the entity with this key already exists
throw new HttpResponseException(HttpStatusCode.Conflict);
var response = Request.CreateResponse&Product&(HttpStatusCode.Created, value);
string uri = Url.Link(&DefaultApi&, new { id = value.Id });
response.Headers.Location = new Uri(uri);
public HttpResponseMessage Put(Guid id, Product value)
value.Id =
var result = ProductRepository.Update(value);
if (result == null)
// entity does not exist
throw new HttpResponseException(HttpStatusCode.NotFound);
return Request.CreateResponse(HttpStatusCode.NoContent);
public HttpResponseMessage Delete(Guid id)
var result = ProductRepository.Delete(id);
if (result == null)
throw new HttpResponseException(HttpStatusCode.NotFound);
return Request.CreateResponse(HttpStatusCode.NoContent);
我们努力去实现标准的Http,因此附加逻辑来处理 Response.在这个步骤结束后,我们将会有一个功能完整的,(实现了CRUD)Http服务.
开始使用Angular Js 和 TypeScript
服务端创建好以后,我们接着开始创建真正的网站部分.它将完全由Html/CSS/Js(TypeScript将会编译成Js)构成.我选择的初始模版像这样:
&!DOCTYPE html&
&html ng-app&
&title&Product list&/title&
&link rel=&stylesheet& href=&Content/bootstrap.css&/&
&script type=&text/javascript& src=&Scripts/bootstrap.js&&&/script&
&script type=&text/javascript& src=&Scripts/angular.js&&&/script&
&script type=&text/javascript& src=&Scripts/Controllers/ProductsController.js&&&/script&
&div ng-controller=&Products.Controller&&
ProductsController.js文件是从名为
ProductsController.ts的TypeScript源代码通过tsc.exe编译得到的.(我使用了命令行来执行这个编译步骤.).让我们为这个页面创建一个Angular Js的Controller.
//ProductsController.ts
module Products {
export interface Scope {
greetingText:
export class Controller {
constructor ($scope: Scope) {
$scope.greetingText = &Hello from TypeScript + AngularJS&;
Produscts Module将被编译成一个 Js的命名空间,我们的Controller将被转译为 Products.Controller供程序使用.现在我们可以在页面中绑定一个欢迎致辞.请注意:结合TypeScript的特点,我们以Scope接口的形式定义了$scope对象.Typescript也允许我们使用 any 这种类型来定义,但就个人而言,我更倾向于使用更加严格的定义方式,因为他可以帮助你在编译时捕获错误信息.(VS2012甚至会在你编写的错误代码下面加入红色下划线,这真是太棒了.)现在,我们需要编译ProductsController.ts,在HTML中引用
ProductsController.js,并且修改视图(view)来显示信息.
&div ng-controller=&Products.Controller&&
&p&{{greetingText}}&/p&
现在AngularJs Controller已经完成,让我们继续添加更多的功能.
创建Model模块
我们将创建一个Model模块,它会包含一个Product类,作为DTO对象(序列化为JSON)与Http的服务端进行交互.
module Model {
export class Product {
这个简单的模块包含了一个类型的定义,将会在页面的contrller中使用.
ambient declarations.
为了使用AngularJs提供的Ajax功能,我们将$Http服务传入到Controller的构造器中:
class Controller {
private httpService:
constructor ($scope: Scope, $http: any) {
this.httpService = $
由于我们将$Http定义成了any的类型,所以编译器不会帮助我们在编译时发现潜在的错误.为了解决这个问题,我们使用环境声明
(译者注:元数据??)
.环境声明用来告诉编译器将要被引入的元素有特殊的意义(在这里是指Angular Js)并且不会被扩展.换而言之就是第三方类库的接口.声明源文件(.d.ts扩展名)被限制为只能包含环境声明.下面的angular.d.ts文件定义了两个接口,被我们用来调用Http服务.
declare module Angular {
export interface HttpPromise {
success(callback: Function) : HttpP
error(callback: Function) : HttpP
export interface Http {
get(url: string): HttpP
post(url: string, data: any): HttpP
delete(url: string): HttpP
declare关键字是可选的,他会被隐式声明在所有的 .d.ts 文件中.
TypeScript 和 Angular Js
为了让编译器知道新增的两个模块(Model和Angular),我们需要添加两个引用信息到ProductsController.ts中.同时我们想要定义 Scope接口来包含视图使用的所有属性和方法.
页面将包含一个新增Product的表单(name,price文本框和一个按钮)同时展示一个包含所有Product的列表,其中的每个记录都可以被单独的删除.为了使演示变的简单,我忽略了更新记录的功能,但是只要我们实现了相应的操作,更新实现起来也是很简单的.
Scope接口看起来如下:
/// &reference path='angular.d.ts' /&
/// &reference path='model.ts' /&
module Products {
export interface Scope {
newProductName:
newProductPrice:
products: Model.Product[];
addNewProduct: F
deleteProduct: F
只要有product被新增或者被删除,我们就从服务端重新获取所有的product并刷新列表.由于先前我们所做的工作,现在我们可以使用强类型的 Angular.Http和Angular.HttpPromise接口.
controller将包含私有方法与我们的服务端进行通信(getAllProducts, addProduct and deleteProduct).
export class Controller {
private httpService:
constructor ($scope: Scope, $http: any) {
this.httpService = $
this.refreshProducts($scope);
var controller = this;
$scope.addNewProduct = function () {
var newProduct = new Model.Product();
newProduct.Name = $scope.newProductN
newProduct.Price = $scope.newProductP
controller.addProduct(newProduct, function () {
controller.getAllProducts(function (data) {
$scope.products =
$scope.deleteProduct = function (productId) {
controller.deleteProduct(productId, function () {
controller.getAllProducts(function (data) {
$scope.products =
getAllProducts(successCallback: Function): void{
this.httpService.get('/api/products').success(function (data, status) {
successCallback(data);
addProduct(product: Model.Product, successCallback: Function): void {
this.httpService.post('/api/products', product).success(function () {
successCallback();
deleteProduct(productId: string, successCallback: Function): void {
this.httpService.delete('/api/products/'+productId).success(function () {
successCallback();
refreshProducts(scope: Scope) {
this.getAllProducts(function (data) {
scope.products =
非常棒的一点就是,我们不需要人为的引入任何定制的序列化逻辑.当通过$http服务取回数据后,我们可以把他们当成强类型的Product集合进行操作.add操作也是一样----我们仅仅传入一个Product,他将被自动序列化并最终在服务端被解析.
创建视图(View)
最后一步,我们需要创建一个集合新controller特性的视图.我将使用bootstrap来使他变简单一些.
&!DOCTYPE html&
&html ng-app&
&title&Product list&/title&
&link rel=&stylesheet& href=&Content/bootstrap.css& /&
&script type=&text/javascript& src=&Scripts/angular.js&&&/script&
&script type=&text/javascript& src=&Scripts/Controllers/model.js&&&/script&
&script type=&text/javascript& src=&Scripts/Controllers/productsController.js&&&/script&
&div ng-controller=&Products.Controller&&
&form class=&form-horizontal& ng-submit=&addNewProduct()&&
&input type=&text& ng-model=&newProductName& size=&30&
placeholder=&product name&&
&input type=&text& ng-model=&newProductPrice& size=&5&
placeholder=&product price&&
&button class=&btn& type=&submit& value=&add&&
&i class=&icon-plus&&&/i&
&table class=&table table-striped table-hover& style=&width: 500&&
&th&Name&/th&
&th&Price&/th&
&tr ng-repeat=&product in products&&
&td&{{product.Name}}&/td&
&td&${{product.Price}}&/td&
&button class=&btn-small& ng-click=&deleteProduct(product.Id)&&
&i class=&icon-trash&&&/i&
最终的结果就像这样:
现在我们的页面应该实现了应有的功能,并且可以与Http 服务端按照预期的情况进行通信工作了.
最后:Wordpress和Android应用可能会因为一些原因影响post数据,不完整版,非常抱歉.
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
没有分页内容
图片无法显示
视频无法显示
与原文不一致