AngularJs结合Yar构建一款email小应用

2015-07-21

注意:本文默认读者有一定的Angularjs和Yar的基础知识,Yar的基础案例之前的文章有分享过，AngularJs我以后也会写一篇文章简单介绍和应用一下。

一、AngularJs项目目录结构如下图

angularjs项目目录结构

二、angularjs部分

1.index.html

<!DOCTYPE html>
<html lang="en" ng-app='AMail'>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="//lib.sinaapp.com/js/bootstrap/3.0.0/css/bootstrap.min.css">
	<script type="text/javascript" src="//lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
	<script type="text/javascript" src="//lib.sinaapp.com/js/angular.js/angular-1.2.19/angular-route.min.js"></script>
	<script type="text/javascript" src="scripts/controllers/controllers.js"></script>
	<title>AMail</title>
</head>
<body>
	<h1>A-Mail</h1>
	<div ng-view></div>
</body>
</html>

2.list.html

<table class="table table-hover">
	<tr>
		<td><strong>Sender</strong></td>
		<td><strong>Subject</strong></td>
		<td><strong>Date</strong></td>
	</tr>
	<tr ng-repeat="message in messages">
		<td>{{message.sender}}</td>
		<td><a href="#/view/{{message.id}}">{{message.subject}}</a></td>
		<td>{{message.date}}</td>
	</tr>
</table>

3.detail.html

<div><strong>Subject</strong>{{message.subject}}</div>
<div><strong>Sender</strong>{{message.sender}}</div>
<div><strong>Date</strong>{{message.date}}</div>
<div>
	<strong>To:</strong>
	<span ng-repeat="recipient in message.recipients">{{recipient}}</span>
	<div>{{message.message}}</div>
	<a href="#/">Back to message list</a>
</div>

4.controllers.js

//为核心的AMail服务创建模块
var aMailServices = angular.module('AMail',['ngRoute']);
//在URL、模板和控制器之间建立映射关系
function emailRouteConfig($routeProvider){
	$routeProvider.when('/', {
		controller: ListController, 
		templateUrl: 'views/list.html'
	}).
	//注意,为了创建详情视图，我们在id前面加了一个冒号,从而指定了一个参数化的URL组件
	when('/view/:id',{
		controller: DetailController,
		templateUrl: 'views/detail.html'
	}).
	otherwise({
		redirectTo: '/'
	});
}
//配置我们的路由，以便AMail服务能够找到它
aMailServices.config(emailRouteConfig);
//把我们的邮件发布给邮件列表模板
function ListController($scope,$http){
	$http.post(
		'http://angularjs.jsyzchen.com/api/client.php', 
		{method: 'lst'} 
		).success(function(data, status, headers, config){
			$scope.messages = data;
		});
}
//从路由信息（从URL中解析出来的）中获取邮件id，然后用它找到正确的邮件对象
function DetailController($scope, $routeParams,$http){
	$http.post(
		'http://angularjs.jsyzchen.com/api/client.php', 
		{method: 'lst'} 
		).success(function(data, status, headers, config){
			$scope.message = data[$routeParams.id];
		});	
}

三、Yar的API部分

1.server.php

<?php
class API {
    public function lst($parameter, $option = "foo") {
        //假设$arr是从数据库里取出来的数据
        $arr = array(
            array('id'=>0,'sender'=>'chenchenjsyz@163.com','subject'=>'你好，我的老朋友！',
                'date'=>'2015-6-30','recipients'=>array('chen.920925@hotmail.com'),
                'message'=>'中国江苏网7月20日讯 苏通大桥通车至今已有8年'
                ),
            array('id'=>1,'sender'=>'dslxs@163.com','subject'=>'hello,my old friends!',
                'date'=>'2015-6-30','recipients'=>array('chen.920925@hotmail.com'),
                'message'=>'江苏省教育考试院今天公布了文理类本二批次各院校的投档线'
                ),
            array('id'=> 2, 'sender'=>'test@163.com', 'subject'=> '你好，my old friends！',
                'date'=> '2014-3-10', 'recipients'=>array('chen.920925@hotmail.com'),
                'message'=>'环卫工、送报工、送奶工，遍布城市各处，'
                )
            );
        return json_encode($arr);
    } 
    protected function client_can_not_see() {
    }
}
$service = new Yar_Server(new API());//创建一个HTTP RPC Server
$service->handle();//启动HTTP RPC Server

2.client.php

<?php
header ( "content-type:text/html; charset=utf-8" );
error_reporting(E_ALL);
$json_data = file_get_contents('php://input');
$data = json_decode($json_data,true);
$method = $data['method'];
$parameters = $data['parameters'];
if(empty($parameters)){
	$parameters = array();
}
//并行化调用
function callback($retval, $callinfo) {
	if ($callinfo == NULL) {
       //做本地的逻辑
    } else{
    	echo($retval);
    }      
}
function error_callback($type, $error, $callinfo) {
    error_log($error);
}
//Yar_Concurrent_Client::call — 注册一个并行的服务调用
Yar_Concurrent_Client::call("http://angularjs.jsyzchen.com/api/server.php", $method, $parameters, "callback");
/* 发送所有注册的调用, 等待返回, 返回后Yar会调用callback回掉函数 */
Yar_Concurrent_Client::loop("callback",'error_callback'); //send,发送所有注册的并行调用

四、运行效果

1.列表页
angularemailindex
2.详细页
angularemaildetail