Kentico + AngularJS

I’ve been wanting to write an AngularJS app for a long time. I also love how easy and fast it is to spin up a Kentico CMS website. Putting the both of them together is a dream project for me. Lucky for me, we had a client who came in with just the right requirements for me to decide this was the project to do a Kentico + AngularJS mashup.

First things first — spin up a new Kentcio 8.0 website. Because AngularJS works great with REST, I can use the built-in REST API in Kentico. I have instant access to any objects that I want to work with in my AngularJS environment without having to write a lick of server side code.

Update your page template with “ng-view”

If I want to leverage AngularJS templates then I can drop an “ng-view” directive on a div in one of my page templates and use that to render content. I can still leverage the power of Kentico and use things such as the built-in logon webpart and the navigation web parts to quickly and easily modify the main menu navigation. With that in mind, I chose to put my ng-view on a shared layout that all my pages that need to render templates can use.

<section id="dashboard" class=" dashboard">
   <cms:CMSWebPartZone ZoneID="Header" runat="server" />
   <cms:CMSWebPartZone ZoneID="Content" runat="server" />
</section>
<div class="data-tables">
    <div ng-view></div>
</div>

 

Bootstrap AngularJS

Now, I can boostrap angular by injecting the main module into the document, and AngularJS does its magic.

$(function () {
    window.setTimeout(function() { angular.bootstrap(document, ['myApp']) }, 250);
    if (!window.console) console = { log: function () { } }; //IE fix for console
    console.log("loaded angular and dependencies.");
});

 

Setup angular to call Kentico REST API

Now, I have a Kentico website with AngularJS and templates. Let’s take a quick peek at how to leverage the Kentico API with AngularJS to get data into the ng-view element. The easiest, and Angular-way, to do this is to write a service factory for the Kentico Rest API.  Here’s a list wrapper that will return an object from Kentico:

list: function (
      objecttype // Type of object you want to retrieve, i.e. CustomTableitem
    , classname // classname of the object you want, ie. Custom.MyTable
    , where //where statement to pass to the rest api
    , orderby
    , topn )
{
    var deferred = $q.defer();
    RestApi.resource.query({ objecttype: objecttype, classname: classname, where: where, topn: topn, orderby: orderby }
        , function (data) {
            deferred.resolve(data)
        }
        , function (e) {
	    Console.(e);
            deferred.reject(e);
	}
    );
    return deferred.promise;
}

 

This one simple function can retrieve data from a custom table or document type in Kentico. You’ll inevitably want to parse the results a bit so you can return just the data you need. 

Final Steps

The rest of what you need is straight angular, because the previous steps lay the ground work. Make a controller and call your list method in it:

$scope.MyScopeVar.List = function () {
    var fViewDate = $filter('date')(_page.viewDate, _page.dateFormat);
    var where = where || "MyItemDateTime >= '" + fViewDate + " 12:00:00 AM' and MyItemDateTime <= '" + fViewDate + " 11:59:59 PM'";

    RestApi.list(null, classname, where).then(function (result) {
        scope.MyScopeVar.data = result;
    });
}

 

Finally, hook up your template and iterate over the data items:

$scope.MyScopeVar.List = function () {
    var fViewDate = $filter('date')(_page.viewDate, _page.dateFormat);
    var where = where || "MyItemDateTime >= '" + fViewDate + " 12:00:00 AM' and MyItemDateTime <= '" + fViewDate + " 11:59:59 PM'";

    RestApi.list(null, classname, where).then(function (result) {
        $scope.MyScopeVar.data = result;   
    });
}
	

<div ng-repeat="item in MyScopeVar.data" ng-class-even="'even'" ng-class-odd="'odd'" class="row row-{{$index}}">
    {{item.ItemGUID }},{{item.Name}}
</div>

 

What now?

There are a lot of things to understand about AngularJS configuration and Kentico configuration, but this should give you a good starting point to see how you can marry these two technologies together.