SharePoint 2013 Apps with AngularJS recording published #SPC14

I’m really happy to announce that my session from the SharePoint Conference 2014 on SharePoint 2013 Apps and AngularJS is now published on Channel 9…along with all the other sessions from the conference.

A big thank you to all those that filled in evaluations (there is still time – ends Friday). Right now I’m sitting on a 131 evaluations with an overall average of 4.7/5 which I’m extremely happy with so thank you!

UPDATE 20 Mar 2014 – I have uploaded my Visual Studio Project (UbertTaskListAngularApp) for the project I demoed during my talk now. Apologies for the delay, the week after SPC was my last week at AvePoint and this week I’m traveling to get visa for my new job at Microsoft!

There are some great sessions that I recommended prior to the conference that I absolutely recommend that you watch if you missed it last week!

Reny Modery has written a PowerShell Script to pull all these sessions down locally. Max also has a neat trick to pull down all the slide decks too.

17 thoughts on “SharePoint 2013 Apps with AngularJS recording published #SPC14”

  1. Hi Jeremy,

    Thanks for your session, it was great help for me to understand AngularJS framework.

    I am developing my first app in SharePoint. I am using AngularJS framework and REST API to fetch the data from SPList. I am trying to display data from Custom List in an app but the data is not getting displayed.

    Below is my code.

    var employeesApp = angular.module(‘spApp’, []);

    employeesApp.factory(‘siteUrlBuilder’, function ($location) {
    return {
    buildSiteUrl: function () {
    var urlParts = $location.absUrl().split(“/”);
    return urlParts[0] + “//” + urlParts[2] + “/” + urlParts[3];
    }
    }
    }
    );

    employeesApp.factory(‘employeeListService’, function ($http, siteUrlBuilder) {
    return {
    getEmployees: function (successcb, errorcb) {
    var getSiteUrl = siteUrlBuilder.buildSiteUrl();
    $http(
    {
    method: ‘GET’,
    url: getSiteUrl + “/_api/web/lists/getByTitle(‘Employee’)/items”,
    headers: { “Accept”: “application/json;odata=verbose” }
    }
    ).success(function (data, status, headers, config) {
    alert(‘Success’);
    successcb(data.d.results);
    }).error(function (data, status, headers, config) {
    errorcb(status);
    });
    }
    }
    }
    );

    employeesApp.controller(‘spListCtrl’,
    function ($scope, $http, employeeListService) {
    employeeListService.getEmployees(
    function (data) {
    $scope.Employees = data
    },
    function () {
    alert(‘error’);
    }
    );
    }
    );

    Am doing it in a right way? Also can you please share your source code of CompleteMe App?

    Thank you in advance.

    1. I’m sorry, I just checked this page and thought I’d replied from my WordPress app on my phone.
      Have you tried debugging that code to see whether the rest call you make actually returns a JSON object or not? I have just uploaded my sample code so you should be able to grab that to check you are doing it correctly. It’s hard to see in the comments due to formatting.
      What is the sitebuilder function, maybe check how I’m using JSRequest to get the URL instead.

  2. Jeremy,

    Great session @ SPC14. You mentioned you would share the source code from that… Any updates? Would really appreciate it as I’m looking to spin up a quick demo myself.

    Thanks!

    -Keith

    1. Thank you, I really appreciate the compliments, there was a lot of work that went into that. I’ve been traveling to get new business visa for Microsoft since conference and wrapping up my last week at avePoint. Let me sit down today and get a zip file up at very least. Sorry for delay guys.

  3. Hi Jeremy, Thanks for your replay. I am glad to inform you that the issue is resolved. It was a cross domain issue. I updated my code a bit & it worked for me. Below is my code.

    var employeesApp = angular.module(‘myApp’, []);

    employeesApp.controller(‘employeeCtrl’, function ($scope, $http) {
    $http(
    {
    method: “GET”,
    url: “/_api/web/lists/getByTitle(‘Employees’)/items”,
    headers: { “Accept”: “application/json;odata=verbose” }
    }
    ).success(function (data, status, headers, config) {
    $scope.employees = data.d.results;
    }).error(function (data, status, headers, config) {
    alert(‘Error’);
    });
    });

    Thanks for your help.

  4. Hi Jeremy,

    I’ am working on a Provider hosted app with Angular, Single Page App.
    I’ am using Angular routing to inject the views dynamically.

    However, as I navigate away from the app landing page the SP Standard Tokens are getting lost.

    With angular do you know how can we pass on that to other pages if you came across this scenario ?

    1. Hi Parvinder, I’ve added this as a todo to get back to you, I’m on vacation (well getting my new Visa for new Microsoft job). I’ll get back to you when I’m back on US soil!

    2. I have an AngularJS service that I created. This service grabs stuff off the querystring and stuffs it into a cookie. I can then inject this service into any module and just access the public properties on it that I expose. Because it’s a service, it’s treated as a singleton by AngularJS and thus, it only runs once when the page is loaded. So if you do navigate off the page, my service will pull the values from the cookie if they aren’t on the querystring.

  5. Hi Jeremy,
    Loved your session at SPConf! Great to see the interest in AngularJS and SharePoint apps, something that I’ve been thinking a lot about lately. I’ve just published a Visual Studio seed project template implementing AngularJS and MVC patterns on top of the default SP App template and would love any feedback from yourself or anyone else interested in this topic:
    http://nearbaseline.com/blog/2014/03/angularjs-and-sharepoint-app-template/

  6. If I am using the Default.aspx page as you do in a SP-Hosted App and using a div to encapsulate the entire app (as you do), do I have to do anything “special” to get routing to work?

    I am using the following ( learned it in Dan Wahlin’s AngularJS Kickstart ) and I have included angular-routes.js on the Default.aspx:

    appITI.config(function($routeProvider){
    $routeProvider
    .when(‘/’, {
    controller: ‘UsersController’,
    templateUrl: ‘/App/Views/landing.html’
    }).when(‘/newrequest’, {
    controller: ‘NewRequestController’,
    templateUrl: ‘/App/Views/newRequest.html’
    }).when(‘/systemdown’,{
    controller: ‘SystemDownController’,
    templateUrl: ‘/App/Views/systemDown.html’
    }).otherwise( { redirectTo: ‘/’ } );
    });

    When I test this, the app just stays on the Default page and doesn’t insert anything into the ng-view directive.

    Thanks!

Leave a Reply