Kentico + AngularJS

By Sterling Heibeck on September 04, 2014

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.
 

Share This Post:

Twitter Pinterest Facebook Google+
Click here to read more Tutorials posts
Start a Project with Us

About the author

Sterling Heibeck has been slinging code since 1995. His role at BizStream isn't only about raising the median age of the group, but he brings a multitude of talent to the table when it comes to architecture, design, development, and all around awesomeness. To Sterling, development is 95% problem solving and 5% Google. His answer is always "yes" when asked the question "Can we do [insert anything here]?" He's also proud dad of Kaiyah, Bennet and Morgan.

View other posts by Sterling

Subscribe to Email

Enter your email address to subscribe to the BizStream Newsletter and receive updates by email.



‚Äč