[翻译] Synth 官方教程3 - 一个专注于RESTful和SPA的Node Web框架

*此教程翻译现已PR同步到了此框架官网,请戳 ->Synth 教程

为每条推文创建单独的链接

看到一条条推文被列出来真是太棒了,但如果你发现了一条很好的推文,想要把它的链接分享出去怎么办呢?

通过以下三个步骤来实现这个功能:

  1. 在后端创建一个接收 get 请求的方法;
  2. 在前端创建一个新的 tweetController 控制器(注意这个 "tweet" 是单数而不是复数);
  3. 为新的视图创建一个 html 模板。

创建接收 GET 请求的方法

back/resources/tweets/getTweets.js 中已经有一个用于获取推文列表的 API 了。

继续创建一个获取单条推文的 API 接口,声明 get 方法并将它 exports 出去。

exports.get = function(){
	// 返回一个获取请求推文的 promise
	return db.collection('tweets').findOne({
		_id: db.ObjectId(params.id)
	});
}

说明

当这个处理 get 请求的函数被创建完成的时候,API 接口也就创建完成了,请求这个接口时需要传入一个推文 ID 作为参数。

上述代码将会监听客户端对 /api/tweets/:id 的请求。

Params 服务会将请求的 URL 转换并将传入的推文 id 提供给我们使用。

请注意 db.ObjectId 只是一个用来将字符串转换为数据库特殊类型的方法。这个方法适用于 mongoDB.

创建一个新的 tweetController 控制器

首页我们需要向你的 Angular 路由中添加一个新的路由配置。

front/js/front-app.js 中使用 $routeProvider 服务添加另外一个 .when 配置:

…
$routeProvider
.when('/tweets', {
  	templateUrl: '/html/tweets/getIndex.html',
  	controller: 'tweetsController',
 	resolve: {
		data: dataLoaderRunner
	}
})
.when('/tweets/:id', {
  	templateUrl: '/html/tweets/get.html',
  	controller: 'tweetController',
  	resolve: {
    	data: dataLoaderRunner
  	}
})
…

这样一来,当匹配到这个 URL 的时候,你的 AngularJS 应用就会去调用 tweetController 这个控制器。

现在你应该在 Angular 应用中添加这个控制器。

front/js/controllers/tweets.js

.controller('tweetsController', function($scope, data){
  	$scope.tweets = data.tweets;
})
.controller('tweetController', function($scope, data){
  	angular.extend($scope, data);
});

上述代码会将从 API 获得的数据拷贝到作用域中,这样一来,我们就能够在下一步的视图中去渲染它们了。

创建 tweet 视图并且添加超链接

创建一个新 html 文件作为视图:

front/html/tweets/get.html

	<div class="tweet">
	  	<div class="content">
    		{{ content }}
  		</div>
	  	<div class="date">
    		{{ created_at | date:'medium' }}
  		</div>
	</div>

然后在 index 视图模板中给推文添加超链接:

front/html/tweets/getIndex.jade

ul.tweet-timeline
 	li.tweet(ng-repeat="tweet in tweets")
    	.content {{ tweet.content}}
    	a(href="/tweets/{{ tweet._id }}")
      	.date {{ tweet.created_at | date:'medium' }}

就这样,现在你已经有了一个专属推文页了!

原文地址:

  1. https://www.synthjs.com/tutorial/#enable-links-to-tweets