Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Cassandra on Windows in Angular MVC API Based Application. Part III

0.00/5 (No votes)
8 Mar 2016 1  
Some thoughts about one page Angular site based on ASP.NET Web API 2 and Cassandra NOSQL database
In this third part of a series of articles, I will show you how to connect all parts together in one Angular MVC API and Cassandra based project.

Introduction

After publishing the first and second parts of my article, I've decided to justify Angular presence in my article and add the third part. Now, we'll see how to connect all parts together in one Angular MVC API and Cassandra based project.

Background

The only thing that we will talk about here and you have to be familiar with is Angular. Presuming we have basic concepts about it, let's go further.

Using the Code

First of all, create folder app in root of our project where we'll store our JavaScript files.

The files are app.js, controllers.js and services.js. By its names, it is not very difficult to grasp the nature of code inside them.

In the previous part, we added all the prerequisite JavaScript libraries, determined our application in index.html and set ng-view:

<html ng-app="movie">
<div class="container" id="main_cont">
    <div class="" ng-view></div>
</div>

In the app.js, we load all needed modules:

var <code>movie</code> = angular.module('movie', ['ngRoute', 'ngAnimate', 'ui.bootstrap', 'youtube-embed']);

and declare providers:

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'
        });
});

Here, you can see that for every route, we have a controller and a template. Templates are stored in pages folder. Generally, I have a controller for every page even if this page is blank like main page.

This is the code for blank main controller:

movie.controller('mainController', function ($scope) {
    $scope.hello = "Hello";
});

In the userController, important parts of code are:

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);
           }
       );
    };

Here, I call getUsers method from userService and after that, I am getting the result and creating model and users objects.

In the service.js, I have getUsers function:

function getUsers(page) {
       var request = $http({
           method: "get",
           url: "api/users/"+page
       });
       console.log("api/users/" + page);
       return (request.then(handleSuccess, handleError));
   }

The method calls api endpoint api/users/ and in the lucky case when everything is OK, it returns to the caller a response:

function handleSuccess(response) {
        return (response.data);
    }

In the users.html, I bind the model to the view like this:

<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>&nbsp;
            <i ng-click="openToAdd(u);" class="action fa fa-pencil-square-o"></i>
        </td>
    </tr>
</table>

Actually, that is the most important point. The rest of the code is just embellishments like modal windows with user data for youtube module for viewing youtube content.

If everything were OK, you should see this screen:

You can download the whole project but notice your cassandra server IP in CassandraEngine.cs:

Cluster cluster = Cluster.Builder()
                  .AddContactPoints("192.111.111.111")
                  .WithDefaultKeyspace("videodb")
                  // .WithCredentials(user, pwd)
                  .WithQueryOptions(queryOptions)
                  .Build();

I set it to dummy servers: 192.111.111.111. There should be your Cassandra server IP.

Well, that's it!

Thank you for reading.

History

  • 8th March, 2016: Initial version

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here