1

Assume: I am new to Angular, still don't know what I am doing.

I am trying to create a SharePoint-hosted app that will pull some data from lists deployed with that app. I don't want to use Default.aspx page, but index.html with some Bootstrap.
Andrew Connel's tutorial on Pluralsight is giving me some errors, all SharePoint code stops executing the moment I use .html. Probably I am doing something wrong.

This tutorial (simplest one I've found) works perfect with Default.aspx :

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>

    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>

    <!-- Add your CSS styles to the following file -->
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />
    <script type="text/javascript" src="../Scripts/angular.min.js"></script>
    <!-- Add your JavaScript to the following file -->
    <script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>


<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
    Page Title
</asp:Content>

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <div>
        <p id="message">
            <!-- The following content will be replaced with the user name when you run the app - see App.js -->
            initializing...
        </p>
    </div>
<div ng-app="employeesApp"> Displaying Employee data  
   <div ng-controller="EmployeesController">  
      <table><tr ng-repeat="emp in employees"> <td> {{ emp.title }} </td></tr></table>  
   </div>  
</div> 

</asp:Content>

App.js file:

'use strict';  
var hostweburl;  
var appweburl;  

var employeesApp = angular.module('employeesApp', []);  
employeesApp.controller('EmployeesController',  
    function($scope, $http) {  
        hostweburl = decodeURIComponent($.getUrlVar("SPHostUrl"));  
        appweburl = decodeURIComponent($.getUrlVar("SPAppWebUrl"));  
        $scope.employees = [];  
        var scriptbase = hostweburl + "/_layouts/15/";  
        $.getScript(scriptbase + "SP.Runtime.js",  
            function() {  
                $.getScript(scriptbase + "SP.js",  
                    function() {  
                        $.getScript(scriptbase + "SP.RequestExecutor.js", function() {  
                            var context = new SP.ClientContext(appweburl);  
                            var factory = new SP.ProxyWebRequestExecutorFactory(appweburl);  
                            context.set_webRequestExecutorFactory(factory);  
                            var appContextSite = new SP.AppContextSite(context, hostweburl);  
                            var web = appContextSite.get_web();  
                            context.load(web);  

                            var list = web.get_lists().getByTitle("Employee");  
                            var camlQuery = SP.CamlQuery.createAllItemsQuery();  
                            this.listItems = list.getItems(camlQuery);  
                            context.load(this.listItems);  

                            context.executeQueryAsync(  
                                Function.createDelegate(this, function() {  
                                    var ListEnumerator = this.listItems.getEnumerator();  
                                    while (ListEnumerator.moveNext()) {  
                                        var currentItem = ListEnumerator.get_current();  
                                        $scope.employees.push({  
                                            title: currentItem.get_item('Title')  
                                        });  


                                        $scope.$apply();  

                                    }  
                                }),  
                                Function.createDelegate(this, function(sender, args) {  
                                    alert('exception occured');  
                                })  
                            );  

                        });  
                    }  
                );  
            }  
        );  
    }  
);  
jQuery.extend({  
    getUrlVars: function() {  
        var vars = [],  
            hash;  
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');  
        for (var i = 0; i < hashes.length; i++) {  
            hash = hashes[i].split('=');  
            vars.push(hash[0]);  
            vars[hash[0]] = hash[1];  
        }  
        return vars;  
    },  
    getUrlVar: function(name) {  
        return jQuery.getUrlVars()[name];  
    }  
});  

Result (correct): enter image description here

So i figured I will take all the references and make an html file based on aspx. It should work, right? It doesn't.

Default1.html file:

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<head>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>

    <!-- Add your CSS styles to the following file -->
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />
    <script type="text/javascript" src="../Scripts/angular.min.js"></script>
    <!-- Add your JavaScript to the following file -->
    <script type="text/javascript" src="../Scripts/App.js"></script>

</head>

    <div>
        <p id="message">
            <!-- The following content will be replaced with the user name when you run the app - see App.js -->
            initializing...
        </p>
    </div>
<div ng-app="employeesApp"> Displaying Employee data  
   <div ng-controller="EmployeesController">  
      <table><tr ng-repeat="emp in employees"> <td> {{ emp.title }} </td></tr></table>  
   </div>  
</div> 

App.js remains the same. The results:

enter image description here

The console log: enter image description here Question: Why the employees did not show when Default1.html page was used? Is it a reference, a SharePoint library? What is missing from .html file and how can I fix it?

  • 1
    probably the references are not loaded in time; try to use SP.SOD.executeFunc as in this post: sharepoint.stackexchange.com/questions/125580/… – Celophysis Aug 30 '16 at 7:46
  • why do they load with .aspx page? – grisha Aug 30 '16 at 8:55
  • 1
    because aspx page is managed by server and the loading sequence can be different – Celophysis Aug 30 '16 at 8:58
  • Eventually I used this and set the context in a separate function: $.getScript(scriptbase + 'SP.Runtime.js', function () { $.getScript(scriptbase + 'SP.js', function () { $.getScript(scriptbase + 'SP.RequestExecutor.js', setSPContext); } ); } ); – grisha Aug 30 '16 at 16:52
2

By renaming it to .html, SharePoint doesn't know how to parse the <% %> tags (which are ASP.NET). They are rendered on the server before being sent to the client.

The errors you see in the browser simply mean they don't understand the server-based tags.

If you remove the first two comment lines <% ... %>, the page should no longer display those errors.

Update:

SharePoint App services makes your life easier by including appropriate references etc, so unless you NEED to make it a plain HTML file, let SharePoint do the hard work of managing references, and focus on building the app. :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.