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.