spPageContextInfo is not defined

Question

I am trying to add userName use AngularJs into Sharepoint. Also, i should have a feature that I should view all the userName from SharePoint list. But i keeping getting error says '_spPageContextInfo is not defined'. I am start learning SharePoint and AngularJs. Can someone help me with it? Thank you.

Here is the code:

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<!-- modules -->
<script src="app.js"></script> 
<!-- controllers -->
<script src="view.js"></script>
<script src="add.js"></script>
</head>

<body ng-app="myApp">
<h3>view</h3>
<div class="view" ng-controller="viewItemsController" ng-repeat="user in users">
    <!-- {{user.ID}}:  -->
    {{user.Title}}, {{user.FirstName}},{{user.LastName}} 
    <br />
</div>

<hr>

<h3>add</h3>
<div class="add" ng-controller="addItemsController">
    <div class="Table">
        <div class="Row">
            <div class="Cell">Title :</div>
                <div class="Cell">
                    <input type="text" id="title" ng-model="title" />
                </div>
        </div>
        <div class="Row">
            <div class="Cell">First Name :</div>
            <div class="Cell">
                <input type="text" id="firstName" ng-model="firstName" />
            </div>
        </div>
        <div class="Row">
            <div class="Cell">Last Name :</div>
            <div class="Cell">
                <input type="text" id="lastName" ng-model="lastName" />
            </div>
        </div>
        <div class="Row">
            <div class="Cell"></div>
            <div class="Cell">
                <input type="button" id="btnAddContact" value="Add Name" ng-click="addContact()" />
            </div>
        </div>
    </div>
</div>
</body>
</html>

app.js //this is module

var spApp = angular.module('myApp',[]);

view.js // first controller

spApp.controller("viewItemsController", function ($scope, $http) {
    var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Users')/items?$select=Title,First_Name,Last_Name";
$http(
{
    method: "GET",
    url: url,
    headers: { "accept": "application/json;odata=verbose" }
}
).success(function (data, status, headers, config) {
            console.log(data);
    $scope.users = data.d.results;
}).error(function (data, status, headers, config) {
});

});

add.js // second controller

spApp.controller("addItemsController",function($scope,$http){
    var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Users')/items";
var vm = $scope;
vm.addContact = function () {
    return $http({
        headers: { "Accept": "application/json; odata=verbose", "X-RequestDigest": jQuery("#__REQUESTDIGEST").val() },
        method: "POST",
        url: url,
        data: {
            'Title': vm.title,
            'First_Name': vm.firstName,
            'Last_Name':vm.lastName
        }
    })
    .then(saveContact)
    .catch(function (message) {
        console.log("addContact() error: " + message);
    });
    function saveContact(data, status, headers, config) {
        alert("User Added Successfully");
        return data.data.d;
    }
}

});

move the script tag for including your angular app just before closing the body element — rick, Sep 14 '18 at 13:13
try registering your controllers with a direct reference to your app: `angular.module('myApp').controller(...)` — Aleksey Solovey, Sep 14 '18 at 13:13
Possible duplicate of [How to create separate AngularJS controller files?](https://stackoverflow.com/questions/20087627/how-to-create-separate-angularjs-controller-files) — IftekharDani, Sep 14 '18 at 13:21

score 0 · Accepted Answer · answered Sep 14 '18 at 14:01

I go through your code, you have made spelling mistake with the script tag If you see your Html code which you have added into your question

<!-- controllers -->
<sript src="view.js"></script>
<sript src="add.js"></script>

I have test your code on my system by correcting the spelling mistake as bellow and its working.

 <!-- controllers -->
    <script src="view.js"></script>
    <script src="add.js"></script>

Hope so this will help you.

spPageContextInfo is not defined

1 Answers1