David Peterson bio photo

David Peterson

David is a Sitecore Architect with ATP World Tour, founder of the Philadelphia Sitecore Users Group and Technical Sitecore MVP. Often reminiscing of his days as a Sysop and being Elite.

Email Twitter LinkedIn Github

During the November meetup of the Philadelphia Area Sitecore User Group, we explored the possibilities of using Angular with Sitecore. Two options were explored. The first, building a SPA with Angular and Sitecore Item Web API and finally, Integrating Angular into a Sitecore instance. This post, the first in a series of two related posts, discusses the Sitecore Item Web API implementation.

SPA with Sitecore Item Web API

Building a Single Page Application where we need content from Sitecore, the Sitecore Item Web API is a perfect option. We’re able to access our Sitecore instance via GET requests, obtaining Sitecore items serialized as JSON. While adding a dependency on our SPA, we can contain the dependency as single point of entry and distribute the content across view models.

angular web api

In our SPA demo site, we use an Angular factory as the entry point into our Sitecore instance by way of the Sitecore item Web API. Angular factories allow us to obtain data and reuse it across multiple controllers and routes. The data is saved in an array through get() and made available via getProfiles():

    app.factory('profileservice', function ($http) {
        var items = {};
        var myProfileService = {};

        myProfileService.addItem = function (item) {
        myProfileService.removeItem = function (item) {
            var index = items.indexOf(item);
            items.splice(index, 1);
        myProfileService.getProfiles = function () {
            return items;

        myProfileService.update = function (itemid, params) {
            var url = '-/item/v1/?sc_itemid=' + itemid;
            $http.put(url, params);

        myProfileService.get = function (callback) {
            var url = '-/item/v1/?scope=s&query=/sitecore/content/Home/Repository/*';
                .then(function (res) {
                    items = res.data.result.items;
        return myProfileService;

Note: For this demo, the get request is calling the current site, as the current site is running as the Sitecore instance. This can easily be changed to a non-relative URL path.

The factory profileService then serves content to our controller allprofiles. There are two methods to take note of here:

  • vm.load() - Makes the GET request to our Sitecore instance, populating the profiles array within our profileService.
  • populateRepository() - Our callback method which profileService calls upon successfully loading profiles from the Sitecore Item Web API. A repository property of our model is populated here.
(function () {
    'use strict';

    // Controller name is handy for logging
    var controllerId = 'allprofiles';

    // Define the controller on the module.
    // Inject the dependencies. 
    // Point to the controller definition function.
        ['$scope', '$http', 'profileservice', allprofiles]);

    function allprofiles($scope, $http, profileservice) {
        var vm = this;

        vm.newprofile = {};
        vm.profileService = profileservice;
        vm.load = function () {

        function populateRepository() {
            vm.repository = profileservice.getProfiles();

Finally, within our view, we access the data and use Angular’s awesome databinding to populate our view from our view model:

<div data-ng-controller="allprofiles as vm">
    <p><a class="btn btn-primary btn-lg" ng-click="vm.load();">Load Data</a></p>

    <div class="row" ng-repeat="profile in vm.repository">
        <div class=" col-md-1">
            <a class="btn btn-danger btn-small" href="#profiles/">Edit</a>
        <div class="col-md-1"></div>
        <div class="col-md-6"></div>

The “Load Data” link invokes our vm.load() method, while div class “row” is repeated for each item returned in our view model’s repository property.

Technical Considerations


When making Sitecore Item Web API calls, if you’re planning on making cross-domain requests, you may run into some issues. While I have seen some recommended solutions, I have not tried implementing any.

Accessing Sitecore content adds additional configuration to ensure content can be accessed by your application. In our example, we’re saving our credentials within $httpprovider’s default header. Any GET request to our Sitecore instance are accessed as our demo site’s Admin user:

    '$httpProvider', function($httpProvider) {
        $httpProvider.defaults.headers.put = { 'X-Scitemwebapi-Username': 'admin' };
        $httpProvider.defaults.headers.put = { 'X-Scitemwebapi-Password': 'b' };        

Note: for obvious reasons, do not use your admin account. This is for demo purposes only.


While it might seem difficult to overload your Sitecore instance from requests coming from a SPA, be aware of how your SPA accesses your Sitecore instance. You would never want to have your method which invokes GET requests within any repeated elements, such as our ng-repeat element.


Accessing Sitecore content using the Sitecore Item Web API is very easy and works exceptionally well within a SPA or application using the AngularJS framework.

For the complete solution, including routing, Sitecore field mappings and all views and controllers, go here: