使用 MVC、Web API 和 AngularJS 为三星 Gear 开发群组消息
3.53/5 (7投票s)
从Web服务器向三星Gear智能手表发送群发消息。
引言
什么是三星 Gear 智能手表群组消息 (GGM) 系统？
在本文中，我们将了解如何将群组消息从 Web 服务器发送到三星 Gear 智能手表。三星 Gear 智能手表群组消息系统的主要目标是从 Web 服务器快速发送重要消息给群组。我们已经有了电子邮件、智能手机消息系统，那么为什么还需要智能手表群组消息呢？这个问题的答案非常简单。现在我们设想一下，一家公司的 CEO 想在 10 分钟内召集所有项目经理开会。CEO 可以发送一封邮件给所有经理，也可以发送短信到智能手机。但并不能保证所有项目经理都会看到邮件，也不能保证所有项目经理都能看到智能手机上的消息，因为他们可能不在办公桌前，或者正在开会，或者在咖啡厅。在这种情况下，就有可能错过 CEO 发送的消息。现在我们设想一下，所有项目经理都佩戴三星 Gear 智能手表。CEO 可以从网站发送一条消息，如“下午 4 点开会”。CEO 发布新消息后，消息将立即显示在所有人的三星 Gear 智能手表上。这个群组消息系统不仅适用于公司，还可以用于家庭、朋友等。
主要优势在于，公司内部任何人都可以发布消息。每次只能发布一条消息。每次新消息发布都会更新旧消息。
从上面的 GIF 图片中，我们可以看到，通过我的 MVC Web 应用程序，使用 AngularJS 和 Web API，我将消息更新到数据库，并通过 Web API 的 GET 方法从数据库获取更新后的结果。在我的三星 Gear 应用中，我使用了 AngularJS 控制器来获取 WEB API 的结果，并将结果消息绑定到三星 Gear 上。我们将详细介绍如何创建一个应用程序。
Shanu Gear 群组消息 (GGM) 架构
在这里，我们可以详细看到我的 GGM 架构。群组消息可以在三星 Gear 和 GGM 网站上同时查看。
注意：如果您刚开始使用 TIZEN IDE 开发三星 Gear 应用，请参阅我之前的文章，其中详细介绍了如何安装 Tizen SDK 并使用 Tizen IDE 创建您的第一个“hello world”程序。
在本文中，我们将详细介绍如何
- 使用 MVC、AngularJS 和 Web API 2 创建群组消息 Web 服务器。此应用程序将用于从网站向群组发布消息。
- 创建简单的三星 Gear 应用，使用 Angular JS 显示日期和当前时间。
- 使用 AngularJS 创建三星 Gear 应用，以显示来自 WEB API 的当前消息。
1) 开发三星 Gear 应用所需的先决条件
要开始为三星 Gear 开发我们的第一个应用，我们需要安装以下软件
- Tizen SDK (http://developer.samsung.com/gear/)
(Tizen 包含一套用于开发 Tizen Web 和原生应用程序的工具。它包含用于开发我们的应用程序的 IDE 和用于查看输出的模拟器。)
- SDK 镜像 (http://developer.samsung.com/gear/)
- Visual Studio 2015 - 您可以从 这里 下载。
您还可以参考我之前关于使用 MVC 和 WCF Rest 服务进行 AngularJS 的文章
- MVC AngularJs 和 WCF REST 服务用于“读心术”问答游戏
- MVC、AngularJs 和 WCF REST 服务用于主从详细信息网格
- 使用 MVC 和 WCF REST 进行 AngularJs 过滤、排序和动画
- 使用 MVC 和 WCF REST 服务进行 AngularJs 购物车
- 使用 MVC 和 WCF REST 进行 AngularJs 动态菜单创建
以前关于 Angular JS、MVC 和 WEB API 的文章
- 使用 MVC、AngularJs 和 Web API 2 进行图像预览
- MVC、Angular JS 使用 WEB API 2 和存储过程进行 CRUD 操作
- 使用 MVC 和 AngularJS 进行动态项目调度
- MVC Web API 和 AngularJS 图像拼图游戏
- 用于“你是天才游戏”的 MVC Web API 和 AngularJS
Using the Code
- 使用 MVC、AngularJS 和 Web API 创建群组消息 Web 服务器
- 此应用程序将用于从网站向群组发布消息。
1. 创建数据库和表
我们将在“MessageDB”数据库下创建一个名为“MessageDetails”的表。
以下是创建数据库、表和示例插入查询的脚本。请在您的 SQL Server 中运行此脚本。我使用的是 SQL Server 2014。
-- =============================================
-- Author : Shanu
-- Create date : 2015-10-01
-- Description : To Create Database,Table and Sample Insert Query
-- Latest
-- Modifier : Shanu
-- Modify date : 2015-10-01
-- =============================================
--Script to create DB,Table and sample Insert data
USE MASTER
GO
-- 1) Check for the Database Exists .If the database is exist then drop and create new DB
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'MessageDB' )
DROP DATABASE MessageDB
GO
CREATE DATABASE MessageDB
GO
USE MessageDB
GO
-- 1) //////////// StudentMasters
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'MessageDetails' )
DROP TABLE MessageDetails
GO
CREATE TABLE [dbo].[MessageDetail](
[msgID] INT IDENTITY PRIMARY KEY,
[grpMessage] [varchar](500) NOT NULL,
[msgDate] datetime
)
Select * from MessageDetail
-- 1) Stored procedure to Select Student Details
-- Author : Shanu
-- Create date : 2015-10-01
-- Description : MessageDetail
-- Tables used : MessageDetail
-- Modifier : Shanu
-- Modify date : 2015-10-01
-- =============================================
-- exec USP_Message_Select
-- =============================================
Create PROCEDURE [dbo].[USP_Message_Select]
AS
BEGIN
Select Top 1 grpMessage,msgDate
FROM
MessageDetail
END
-- 2) Stored procedure to insert/Update MessageDetail
-- Author : Shanu
-- Create date : 2015-10-02
-- Description : MessageDetail
-- Tables used : MessageDetail
-- Modifier : Shanu
-- Modify date : 2015-10-02
-- =============================================
-- exec USP_Message_Insert 'se'
-- =============================================
CREATE PROCEDURE [dbo].[USP_Message_Insert]
(
@grpMessage VARCHAR(100) = ''
)
AS
BEGIN
IF NOT EXISTS (SELECT * FROM MessageDetail )
BEGIN
INSERT INTO MessageDetail
([grpMessage],msgDate)
VALUES (@grpMessage,GETDATE())
Select 'Inserted' as results
END
ELSE
BEGIN
UPDATE MessageDetail
SET grpMessage = @grpMessage ,
msgDate = GETDATE()
Select 'Updated' as results
END
END
在此脚本中，我创建了两个存储过程，一个用于选择当前消息，另一个用于首次插入新消息，并在找到记录时更新新消息。
2. 在 Visual Studio 2015 中创建我们的 MVC Web 应用程序
安装 Visual Studio 2015 后，单击 **开始** -> **程序** -> 选择 **Visual Studio 2015** - 单击 **Visual Studio 2015**。
单击 **新建** -> **项目** -> 选择 **Web** -> **ASP.NET Web 应用程序**。选择项目位置并输入 Web 应用程序名称。
选择 **MVC**，然后在“添加文件夹和核心引用”中。选择 Web API，然后单击 **确定**。
使用 ADO.NET 实体数据模型添加数据库
右键单击我们的项目，然后单击 **添加** -> **新项**。
选择 **数据** -> 选择 **ADO.NET 实体数据模型** > 为我们的 EF 命名，然后单击 **添加**。
选择“来自数据库的 EF 设计器”并单击 **下一步**。
在此，单击 **新建连接**，然后提供您的 SQL Server 服务器名称并连接到您的数据库。
选择数据库为 `MessageDB`，因为我们已经使用我的 SQL 脚本创建了数据库。
单击 **下一步**，选择需要使用的表，然后单击 **完成**。
单击 **下一步**，选择所需的表和存储过程，然后单击 **完成**。
现在，我们可以看到我们已经创建了 `MessageModel`。
实体创建完成后，下一步，我们将 WEB API 添加到控制器中，并编写 `select`/`Insert`/`Update` 和 `Delete` 函数。
添加 WEB API 控制器的步骤
右键单击 _Controllers_ 文件夹 -> 单击 **添加** -> 单击 **控制器**。
由于我们将创建 WEB API Controller，请选择 **Controller**，然后选择“添加空 WEB API 2 Controller”。为 Web API 控制器命名，然后单击 **确定**。在此，我为我的 Web API Controller 命名为“MessagesController”。
我们已经创建了 Web API 控制器，可以看到我们的控制器已继承 `ApiController`。
众所周知，Web API 是构建浏览器和移动设备 HTTP 服务的简单易用的方式。
Web API 有四种方法：`Get`/`Post`/`Put` 和 `Delete`，其中
- `Get` 用于请求数据（`Select`）
- `Post` 用于创建数据（`Insert`）
- `Put` 用于更新数据。
- `Delete` 用于删除数据。
在我们的示例中，我们将使用 `Get` **方法，因为**我们需要从数据库获取所有谜题问题详情。
Get 方法
在我们的示例中，我只使用了 `Get` 方法，因为我使用它从数据库选择数据来显示单词谜题游戏。我们需要为我们的实体创建一个对象，并编写 `Get` 方法来执行 `Select` 操作。
查询操作
我们使用 `get` 方法通过实体对象从存储过程 `USP_Message_Select_Result` 获取 `MessageDetail` 的所有详情，并将结果作为 `IEnumerable` 返回。
在这里，我们可以看到在 `get` 方法中，我使用了 `USP_Message_Select` 来获取结果。
我们在 AngularJS 中使用此方法，并在 MVC HTML 页面中显示结果。
public class MessagesController : ApiController
{
MessageDBEntities objAPI = new MessageDBEntities();
// to get message from database
[HttpGet]
public IEnumerable<USP_Message_Select_Result> Get()
{
return objAPI.USP_Message_Select().AsEnumerable();
}
}
插入/更新操作
要进行 `Insert` 和 `Update`，我将把用户发布的邮件作为参数传递给存储过程，并从 AngularJS 控制器将结果显示回 MVC 页面。
//to Update Student Details
[HttpGet]
public IEnumerable<string> messageinsert(string grpMessage)
{
if (grpMessage == null)
grpMessage = "";
return objAPI.USP_Message_Insert(grpMessage).AsEnumerable();
}
创建 AngularJs Controller
首先，在 _Script_ 文件夹下创建一个文件夹，我将其命名为“MyAngular”。
现在将您的 Angular Controller 添加到该文件夹中。
右键单击 _MyAngular_ 文件夹，然后单击 **添加** -> **新项** -> 选择 **Web** -> 选择 **AngularJs Controller**，并为 Controller 命名。我将我的 AngularJs Controller 命名为“Controller.js”。
AngularJs Controller 创建完成后，我们可以看到默认情况下，Controller 会包含带有默认模块定义等代码。
如果 AngularJS 包缺失，请将该包添加到您的项目中。
右键单击您的 MVC 项目，然后单击 -> **管理 NuGet 程序包**。搜索 AngularJs，然后单击 **安装**。
创建 AngularJs 脚本文件的步骤
Modules.js：在这里，我们添加 Angular.js JavaScript 的引用，并创建一个名为“RESTClientModule”的 Angular Module。
/// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
/// <reference path="../angular-animate.js" />
/// <reference path="../angular-animate.min.js" />
var app;
(function () {
app = angular.module("RESTClientModule", ['ngAnimate']);
})();
Controllers：在 Angular JS Controller 中，我执行了所有业务逻辑，并将数据从 WEB API 返回到我们的 MVC HTML 页面。
1) 变量声明
首先，我声明了所有需要使用的局部变量。对于每个变量，我都添加了注释。
app.controller("AngularJs_ImageController",
function ($scope, $timeout, $rootScope, $window, $http) {
//Global Variables
$scope.date = new Date();
$scope.MyName = "shanu";
$scope.grpMessage = "";
$scope.grpMessageAdd = "";
2) 选择群组消息函数
要使用 `_http.get` 从数据库显示最新消息，我将获取结果并使用 `_scope.grpMessage` 变量将其绑定到 MVC 页面。
selectMessageDetails();
function selectMessageDetails() {
$http.get('/api/Messages/').success(function (data) {
$scope.Message = data;
if ($scope.Message.length > 0) {
$scope.grpMessage = $scope.Message[0].grpMessage
}
})
.error(function () {
$scope.error = "An Error has occurred while loading posts!";
});
}
在这里，我们可以看到在新群组消息中，“4 PM Meeting”是已更新到数据库的最终消息。
3) 插入/更新群组消息函数
在此方法中，我将把用户输入的邮件发布到 API，并通过存储过程 `insert`/`update` 到数据库。
//Save Message
$scope.saveDetails = function () {
$scope.messageDetails = $scope.grpMessageAdd;
if ($scope.grpMessageAdd = "")
{
alert("Enter Message");
return;
}
$http.get('/api/Messages/messageinsert/',
{ params: { grpMessage: $scope.messageDetails } }).success(function (data) {
$scope.StudentsInserted = data;
alert($scope.StudentsInserted);
selectMessageDetails();
})
.error(function () {
$scope.error = "An Error has occurred while loading posts!";
});
}
我们可以看到 GIF 图片。在这里，我们更新文本，数据更新到数据库后，结果将在新群组消息中更新。
2. 创建简单的三星 Gear 应用，使用 Angular JS 显示日期和当前时间。
注意：如果您刚开始使用 TIZEN IDE 开发三星 Gear 应用，请参阅我之前的文章，其中详细介绍了如何安装 Tizen SDK 并使用 Tizen IDE 创建您的第一个“hello world”程序。
单击 -> **开始程序** -> 单击 **Tizen IDE**。
首次运行时，它会要求您选择工作区。您可以浏览并选择一个文件夹，将所有项目都创建在该文件夹下。单击 **确定** 以开始您的新项目。
完成后，单击 **文件** -> **新建** -> **Tizen Web 项目**。
创建我们的第一个可穿戴 UI 模板：您会看到类似以下的窗口。首先，我们从可穿戴 UI 模板开始。选择模板和可穿戴 UI，然后单击 **基本**。为您的项目命名，然后单击 **完成**。
创建完成后，您将在项目资源管理器左侧看到您的项目。在新建项目中创建一个新文件夹，用于添加所有 AngularJS 引用文件。我创建的文件夹名为“MyAngular”。我已将所有 AngularJS 和 JQuery 相关的引用文件复制到此文件夹，并创建了一个名为“controller.js”的新 JavaScript 文件用于创建 AngularJS 控制器。
在 _Controller.JS_ JavaScript 文件中，我们将创建 AngularJS 模型和控制器，如下所示。
在此 JS 文件中，我首先创建 AngularJS Module，然后创建 Controller。
在 controller 中，我声明了所有需要使用的变量，如用于显示当前日期和时间的 `date`，用于从 controller 显示到 HTML 页面的 `Myname`。
我使用定时器每秒运行一次，并调用“CounterFunction”函数。在此函数中，我更新当前时间并将其显示在 HTML 页面上。
/// <reference path="angular.js" />
/// <reference path="angular.min.js" />
/// <reference path="angular-animate.js" />
/// <reference path="angular-animate.min.js" />
var app;
(function () {
app = angular.module("RESTClientModule", ['ngAnimate']);
})();
app.controller("AngularJs_Controller",
function ($scope, $timeout, $rootScope, $window, $http) {
//Global Variables
$scope.date = new Date();
$scope.MyName = "Shanu";
$scope.counterval = 0;
$scope.CounterFunction = function(){
$timeout(function() {
$scope.getTime();
$scope.CounterFunction();
}, 1000)
};
$scope.getTime = function(){
$scope.counterval= $scope.counterval+1;
$scope.date = new Date();
}
// Kick off the interval
$scope.CounterFunction();
});
现在我们已经创建了 AngularJS controller。下一步，正如我们所知，在 Tizen Samsung Gear 项目中，我们创建了一个 Web 项目，您可以在项目资源管理器中找到 _index.html_。现在，在此 HTML 页面中，我们将 controller 变量的结果绑定到页面以显示结果。
我们在 HTML 页面底部添加了所有 AngularJS 引用。在 HTML 标签中，我们添加了 `data-ng-app`，在 `body` 标签中，我们添加了 `data-ng-controller`。接下来，我们使用 `{{ MyName }}` 将 AngularJS 的名称绑定到我们的页面。同样，我们也绑定了当前日期和时间。
<!DOCTYPE html>
<html data-ng-app="RESTClientModule">
<head>
<meta name="viewport"
content="width=device-width,user-scalable=no">
<title>Gear & AngulrJS</title>
<link rel="stylesheet"
href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet"
media="all and (-tizen-geometric-shape: circle)"
href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body data-ng-controller="AngularJs_Controller">
<div class="ui-page ui-page-active" id="main">
<header class="ui-header">
<h2 class="ui-title">Gear & AngulrJS</h2>
</header>
<div class="ui-content content-padding">
<ul class="ui-listview">
<p>{{ MyName }} </p>
<p> {{date | date:'yyyy-MM-dd'}}</p>
<p> {{date | date:'hh:mm:ss a'}}</p>
</ul>
</div>
</div>
<script type="text/javascript"
src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript"
src="js/circle-helper.js"></script>
<script src="app.js"></script>
<script src="lowBatteryCheck.js"></script>
<script src="MyAngular/angular.js"></script>
<script src="MyAngular/angular-animate.js"></script>
<script src="MyAngular/controller.js"></script>
</body>
</html>
当我们在模拟器中运行此项目时，我们可以看到结果如下
模拟器输出
3. 创建三星 Gear 应用，使用 AngularJS 显示来自 WEB API 的当前消息
这是我们的主要三星 Gear 应用，用于在三星 Gear 上显示新更新的消息。我将使用定时器，每 1 秒钟调用一次方法，通过 AngularJS controller 从 WEB API 显示更新后的群组消息。
单击 -> **开始程序** -> 单击 **Tizen IDE**。
首次运行时，它会要求您选择工作区。您可以浏览并选择一个文件夹，将所有项目都创建在该文件夹下。单击 **确定** 以开始您的新项目。
完成后，单击文件 -> 新建 -> Tizen Web 项目。
创建我们的第一个可穿戴 UI 模板：您会看到类似以下的窗口。首先，我们从可穿戴 UI 模板开始。选择模板和可穿戴 UI，然后单击 **基本**。为您的项目命名，然后单击 **完成**。
创建完成后，您将在项目资源管理器左侧看到您的项目。在新建项目中创建一个新文件夹，用于添加所有 AngularJS 引用文件。我创建的文件夹名为“MyAngular”。我已将所有 AngularJS 和 JQuery 相关的引用文件复制到此文件夹，并创建了一个名为“controller.js”的新 JavaScript 文件用于创建 AngularJS 控制器。
在 _Controller.JS_ JavaScript 文件中，我们将创建 AngularJS 模型和控制器，如下所示。
在此 JS 文件中，我首先创建 AngularJS Module，然后创建 Controller。
在 controller 中，我声明了所有需要使用的变量，如用于显示当前日期和时间的 `date`，用于从 HTML 页面显示控制器名称的 `Myname`，以及用于显示 API 结果消息的 `Messages`。
我使用定时器每秒运行一次，并调用“getMessages”函数。在此函数中，我将更新从 MVC Web API 收到的 `MESSAGE`。
/// <reference path="angular.js" />
/// <reference path="angular.min.js" />
/// <reference path="angular-animate.js" />
/// <reference path="angular-animate.min.js" />
var app;
(function () {
app = angular.module("RESTClientModule", ['ngAnimate']);
})();
app.controller("AngularJs_Controller",
function ($scope, $timeout, $rootScope, $window, $http) {
//Global Variables
$scope.date = new Date();
$scope.MyName = "Shanu";
$scope.Messages = "";
$scope.CounterFunction = function(){
$timeout(function() {
$scope.getMessages();
$scope.CounterFunction();
}, 1000)
};
$scope.getMessages = function(){
$http.get('https:///shanuMVCTEST/api/Messages/').success(function (data) {
$scope.AllMessages = data;
if ($scope.AllMessages.length > 0) {
$scope.Messages=$scope.AllMessages[0].grpMessage;
}
})
.error(function () {
$scope.error = "An Error has occurred while loading posts!";
});
}
$scope.CounterFunction();
});
现在我们已经创建了 AngularJS controller。下一步，正如我们所知，在 Tizen Samsung Gear 项目中，我们创建了一个 Web 项目，您可以在项目资源管理器中找到 _index.html_。现在，在此 HTML 页面中，我们将 controller 变量的结果绑定到页面以显示结果。
我们在 HTML 页面底部添加了所有 AngularJS 引用。
在 HTML 标签中，我们添加了 `data-ng-app`，在 `body` 标签中，我们添加了 `data-ng-controller`。
接下来，我们使用 `{{ Messages }}` 将 AngularJS 的消息绑定到我们的页面。
同样，我们也绑定了当前日期和时间。
<!DOCTYPE html>
<html data-ng-app="RESTClientModule">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>Circular UI</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)"
href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body data-ng-controller="AngularJs_Controller">
<div class="ui-page ui-page-active" id="main">
<header class="ui-header">
<h2 class="ui-title">
<span style="color:#fffff;font-size:x-large">
Shanu Message Service</span></h2>
</header>
<div class="ui-content content-padding">
<ul class="ui-listview">
<img src="shanu.jpg" />
<span style="color:#af2609;font-size:large">Message:</span>
<br> <span style="color:#FFFFFF;font-size:x-large">
{{ Messages }}
</span>
</ul>
</div>
</div>
<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script src="app.js"></script>
<script src="lowBatteryCheck.js"></script>
<script src="MyAngular/angular.js"></script>
<script src="MyAngular/angular-animate.js"></script>
<script src="MyAngular/controller.js"></script>
</body>
</html>
当我们在模拟器中运行此项目时，我们可以看到显示当前消息“4 PM Meeting”的结果。
注意：要在模拟器上运行此项目，我们需要在 _config.xml_ 文件中执行以下设置，以允许您的 Tizen 项目的模拟器访问互联网。
Config.XML - 双击 _Config.xml_ 文件并打开进行以下更改
在以下内容中添加此设置
应用的功能和权限
功能选项卡
在 **功能** 选项卡中，单击 **添加**，然后选择 http://tizen.org/feature/network.internet。
权限选项卡
在 **权限** 选项卡中，单击 **添加**，然后选择 http://tizen.org/privilege/internet。
策略选项卡
在 **策略** 选项卡中，单击 **添加**，然后为任何网站添加 **\***，并将“允许子域”设置为 `true`。同样，您也可以为 localhost 添加。
我尝试运行应用程序，但在模拟器中无法显示 localhost Web API 的结果。所有设置看起来都正常，但它仍然无法在模拟器中显示结果，而在模拟器和预览中都可以正常工作。
为了测试实时互联网 Web API 的结果，我检查了这个 API http://api.geonames.org/cities?north=44.1&south=-9.9&east=-22.4&west=55.2&username=demo/。
这个互联网 API 在我的模拟器上运行正常，这是我用来获取此示例实时 API 结果并将长度绑定到消息框的示例 controller。
function GetOrderMasters() {
alert("1");
$http.get('http://api.geonames.org/cities?north=44.1&
south=-9.9&east=-22.4&west=55.2&username=demo/').success(function (data) {
alert("2");
$scope.jsonResult = data;
alert("API result Count " + $scope.jsonResult.length);
if ($scope.jsonResult.length > 0) {
}
})
.error(function () {
$scope.error = "An Error has occurred while loading posts!";
});
}
在这里，我们可以在三星 Gear 模拟器中看到 API 结果的总计数。
关注点
希望您喜欢这篇文章，现在您可能对开始使用三星 Gear 智能手表应用开发有了更清晰的认识，并可以尽情享受。本文是为了竞赛而写的。您可以根据自己的需求扩展此项目，因为目前我只使用了一条消息进行更新和显示。您可以扩展到更多消息，也可以添加群组类型来向不同群组发送消息。
在 zip 文件中，您可以找到
- shanuAngularJSwebAPIMessageWebServer.sln 用于 MVC Web 应用程序。（在 Web.config 中，根据您的数据库服务器设置进行更改。）
- shanuGearAngularJs 文件夹，其中包含三星 Gear 应用的源代码，以及用于显示日期和时间的 AngularJS 示例。
- samsungGearAngularMessageSystem 文件夹，其中包含三星 Gear 应用的源代码，用于使用 AngularJS 显示来自 WEB API 的消息。
历史
- 2015 年 10 月 1 日：初始版本