Angular MVC API 基于应用程序中的 Cassandra（第三部分）
关于基于 ASP.NET Web API 2 和 Cassandra NoSQL 数据库的单页 Angular 网站的一些想法
引言
在发布了第一部分和第二部分之后，我决定阐明 Angular 在我的文章中的作用，并添加第三部分。现在，我们将看到如何在 Angular MVC API 和 Cassandra 基于的项目中将所有部分连接在一起。
背景
这里唯一需要讨论并且您需要熟悉的是 Angular。假设我们对其基本概念有所了解，那么我们就可以继续了。
Using the Code
首先，在项目的根目录下创建一个名为 app 的文件夹，用于存储我们的 JavaScript 文件。
这些文件是 app.js、controllers.js 和 services.js。从文件名来看，很容易理解代码内部的性质。
在上一部分中，我们添加了所有必需的 JavaScript 库，并在 index.html 中确定了我们的应用程序，并设置了 ng-view
<html ng-app="movie">
<div class="container" id="main_cont">
<div class="" ng-view></div>
</div>
在 app.js 中，我们加载所有需要的模块
var <code>movie</code> = angular.module('movie', ['ngRoute', 'ngAnimate', 'ui.bootstrap', 'youtube-embed']);
并声明提供程序
movie.config(function ($routeProvider) {
$routeProvider.
when('/users', {
templateUrl: 'pages/users.html',
controller: 'usersController'
}).
when('/videos', {
templateUrl: 'pages/videos.html',
controller: 'videosController'
}).
otherwise({
templateUrl: 'pages/main.html',
controller: 'mainController'
});
});
在这里，您可以看到对于每个路由，我们都有一个控制器和一个模板。模板存储在 pages 文件夹中。通常，即使该页面是空白的，例如主页面，我也会为每个页面创建一个控制器。
这是空白主控制器的代码
movie.controller('mainController', function ($scope) {
$scope.hello = "Hello";
});
在 userController 中，代码的重要部分是
getUsers = function (page) {
userService.getUsers(page)
.then(
function (data) {
$scope.model = jQuery.parseJSON(data);
$scope.users = $scope.model.users;
$scope.totalItems = $scope.model.totalCount;
console.log("totalItems: " + $scope.totalItems);
}
);
};
在这里，我调用 userService 中的 getUsers 方法，然后获取结果并创建模型和 users 对象。
在 service.js 中，我有一个 getUsers 函数
function getUsers(page) {
var request = $http({
method: "get",
url: "api/users/"+page
});
console.log("api/users/" + page);
return (request.then(handleSuccess, handleError));
}
该方法调用 api 端点 api/users/，并且在一切顺利的情况下，它会向调用者返回一个响应
function handleSuccess(response) {
return (response.data);
}
在 users.html 中，我将模型绑定到视图，如下所示
<table class="table table-striped">
<thead>
<tr>
<td>Username</td>
<td>First name</td>
<td>Last name</td>
<td>Email</td>
<td>Address</td>
<td>Created date</td>
<td>Action</td>
</tr>
</thead>
<tr ng:repeat="u in users">
<td>{{u.username}}</td>
<td>{{u.firstname}}</td>
<td>{{u.lastname}}</td>
<td>
<ul ng:repeat="e in u.email">
<li>{{e}}</li>
</ul>
</td>
<td>
<div ng-if="u.address != null">
<div>street: {{u.address.street}}</div>
<div>city: {{u.address.city}}</div>
<div>zip: {{u.address.zip}}</div>
<div>
phones:
<ul ng:repeat="p in u.address.phones">
<li>{{p.number}}</li>
</ul>
</div>
<div>
location:
<ul ng:repeat="l in u.address.location">
<li>{{l}}</li>
</ul>
</div>
</div>
</td>
<td>{{u.timestamp}}</td>
<td>
<i ng-click="delete(u.username);" class="action fa fa-times"></i>
<i ng-click="openToAdd(u);" class="action fa fa-pencil-square-o"></i>
</td>
</tr>
</table>
实际上，这是最重要的部分。其余的代码只是点缀，例如带有用户数据的模态窗口，以及用于查看 YouTube 内容的 YouTube 模块。
如果一切正常，您应该看到此屏幕
您可以下载整个项目，但请注意 CassandraEngine.cs 中的 cassandra 服务器 IP。
Cluster cluster = Cluster.Builder()
.AddContactPoints("192.111.111.111")
.WithDefaultKeyspace("videodb")
// .WithCredentials(user, pwd)
.WithQueryOptions(queryOptions)
.Build();
我将其设置为虚拟服务器：192.111.111.111。那里应该填写您的 Cassandra 服务器 IP。
好了，就到此为止！
感谢您的阅读。
历史
- 2016年3月8日：初始版本