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 just 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;
}
}
});
EDIT:
After check this, I am able to run my app now. Help this link could help other people.
It is not obvious, to me at least, what you are doing with index.html.
_spPageContextInfo will only be available on a SharePoint hosted page (i.e. script editor webpage, page layout, sharepoint designer edited page).
It will only be available once SP.js has excuted (See SharePoint scripts on demand).
If you are trying to do proper best practise sharepoint web development then look into SharePoint SPFX
I hope this is helpful
Related
I'm trying AngularJS for the first time. I'm getting as imple user JSON data from a http-get request, but the object is returned null. I tested my service using chrome and I get this result:
[{"id":1,"email":"walid#gmail.com","name":"walid"}]
Below my js file:
var app = angular.module("userApp", []);
app.controller("userController", function($scope, $http) {
$scope.user = null;
$scope.name = null;
$scope.getUser = function() {
$http({
method : 'GET',
url : '/all',
}).success(function(data) {
$scope.user = json.stringify(data);
}).error(function(data) {
alert('Fail: user is '+data);
});
}
});
My HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SIM Card</title>
<link rel="Stylesheet" type="text/css"
href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="Stylesheet" type="text/css" href="css/simcard.css">
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="js/simcard2.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
</head>
<body ng-app="userApp" ng-controller="userController">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="panel panel-info spacer">
<div class="panel-heading">User Management</div>
<div class="panel-body">
<form action="">
<div class="form-group">
<label>ID</label> <input type="text" ng-model="email">
<button ng-click="getUser()" type="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="panel panel-info spacer">
<div class="panel-heading">Result</div>
<div class="panel-body">
<div class="form-group">
<label>Name: </label>
<label>{{user.name}}</label>
</div>
</div>
</div>
</div>
</body>
</html>
I can send the whole maven project in case needed. Thank you for your help.
Regards,
Walid
you can do it like this:
var app = angular.module("userApp", []);
app.controller("userController", function($scope, $http) {
$scope.getUser = function() {
return $http.get('/all').then(
function successCallback(response) {
// you can log response here to see what it is
// or you can simply check network in your browser DevTools
$scope.users = response;
},
function errorCallback(response) {
alert('There was error retrieving users List');
}
);
};
});
once that is done based on your response which is an array you can repeat it in your view. ngRepeat is also watching your model update so every time you update $scope.users it will update itself.
So you can simply use this in your view:
<div ng-app="userApp" ng-controller="userController">
<ul>
<li ng-repeat="user in users">
<span> {{user.id}} {{user.name}} {{user.email}} </span>
</li>
</ul>
</div>
The benefit of using $http.get(...).then() is that you can you can use promise chain with ease to build other services on top of this. In your case you have to make sure that you check your response.
// Update :
Here's a Bin that you can see the code above in action: https://jsbin.com/luguzu/1/edit
Just in output hit Run with js and click Get Users.
The problem is in your config of the request:
http://plnkr.co/edit/qEkpUAXQQZmO9iUAZ2aX?p=preview
It doesn't know what type of data you expect in response.
Your http request should look like this:
$http.get("test.json").success(function(data) {
$scope.user = data[0];
}).error(function(data) {
alert('Fail: user is 2 '+data);
});
Update:
Just noticed something in yout HTML - you have there a form with action empty. This is the cause of the request being canceled.
in angularjs to have a form, it is enought to add to a div ng-form="myForm" and the input can be just simple button, not submit and it is going to work fine.
Here it is the image of my network console...
I have been having this issue with Controllers in Angular. I looked it up as much as possible, but I could not resolve the issue.
I am trying to implement a simple controller, but for the life of me, I cannot get the binding to work. It's not displaying my data. For example when I say, {{ test }}, I get just that, not the "Hello World!" string.
var app = angular.module('App', []);
app.controller('Hi', function($scope){
$scope.hello = "hello!";
});
app.controller('todoCtrl', ['$scope', '$http', function($scope, $http) {
$scope.test = "Hello World!";
$scope.formData = "";
$http.get('/api/todos')
.success(function(data) {
$scope.todos = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
$scope.createTodo = function() {
$http.post('/api/todos', $scope.formData)
.success(function(data) {
$scope.formData.text = "";
$scope.todos = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
};
$scope.deleteTodo = function(id) {
$http.delete('/api/todos/' + id)
.success(function(data) {
$scope.todos = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
};
}]);
<!DOCTYPE html>
<html ng-app="App">
<head>
<title>TodoX</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- TodoX CSS -->
<link rel="stylesheet" type="text/css" href="stylesheets/style.css"/>
</head>
<body ng-controller="todoCtrl">
<div class="container">
<div class="row">
<div class="jumbotron text-center">
<h1>TodoX<span>{{todos.length}}</span>{{test}}</h1>
</div>
<div class="col-md-8">
<div class="list-group">
<div class="checkbox" ng-repeat="todo in todos | orderBy:date">
<label class="list-group-item">
<input type="checkbox"/> {{todo.text}}
</label>
</div>
</div>
</div>
<div class="col-md-4">
<form class="form-group">
<input type="text" class="form-control" ng-model="formData"/>
<input type="submit" ng-click="createTodo()" placeholder="Submit" class="form-control"/>
</form>
</div>
</div>
</div>
<!-- Angular JS -->
<script type="text/javascript" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<!-- TodoX Core JS -->
<script type="text/javascript" href="core.js"></script>
</body>
</html>
I just executed your code while placing angular file link above the script tag, so that AngularJs is loaded before your script can call angular modules.
I think you're putting angular after your script which is why you are running into this issue. Your code works just fine. I tested it.
Put it like this
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="script.js"></script>
Here script.js will be your controller script.
Working fiddle
I am making an AngularJS app,in which I am using Express as backend. The problem is,whenever I run my app
angular.js:36Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.14/$injector/modulerr?p0=starter&p1=….com%2Fajax%2Flibs%2Fangularjs%2F1.3.0-beta.14%2Fangular.min.js%3A18%3A139)
Above error occurs in browser's console. I have tried many solutions but none of them worked.
My index.html is
<!DOCTYPE html>
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>AngularJS Routing example</title>
<script src="hhtp://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
<script src="http://localhost/try/www/js/ng-cordova.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
<script src="http://localhost/try/www/js/app.js"></script>
<script src="http://localhost/try/www/js/master_serverquery.js"></script>
<script src="http://localhost/try/www/js/employeeCtrl.js"></script>
</body>
</html>
My login.html is
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>Daily UI - Day 1 Sign In</title>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700|Lato:400,100,300,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://localhost/try/www/css/animate.css">
<link rel="stylesheet" href="http://localhost/try/www/css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
<script src="http://localhost/try/www/js/ng-cordova.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
</head>
<body ng-app="starter" >
<div ng-controller="loginCtrl">
<div class="top">
<h1 id="title" class="hidden"><span id="logo"></span></h1>
</div>
<div class="login-box animated fadeInUp">
<div class="box-header">
<h2>Log In</h2>
</div>
<form method="POST">
<label for="username">Username</label>
<br/>
<input type="text" name = "login" ng-model="loginId">
<br/>
<label for="password">Password</label>
<br/>
<input type="password" name = "password" ng-model = "loginPassword" >
<br/>
<button type="submit" ng-click = "loginFunc()">Sign In</button>
<br/>
Add New Order
</form>
<p class="small">Forgot your password?</p>
</div>
</div>
<script src="http://localhost/try/www/js/app.js"></script>
<script src="http://localhost/try/www/js/master_serverquery.js"></script>
</body>
</html>
My app.js is
var app = angular.module('starter', ['ngRoute','ngCordova']);
console.log("error")
app.run(function( $cordovaSQLite) {
db = window.openDatabase("marketplace.db", '1', 'my', 1024 * 1024 * 100);
$cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS user_master_vendor (server_db_column_id integer, name text)");
console.log("browser");
});
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'template/login.html',
controller: 'loginCtrl'
}).
otherwise({
redirectTo: '/login'
});
}]);
app.run(function($rootScope){
$rootScope.project_url = 'http://127.0.0.1:8081';
})
app.controller('loginCtrl',function($scope, $http, $rootScope ,$location, $cordovaSQLite){
$scope.loginFunc = function($scope){
var loginPassword = $scope.loginPassword;
var loginId = $scope.loginId;
console.log(" loginCtrl");
$scope.user = {
loginId : loginId,
loginPassword : loginPassword
}
alert($scope.user.loginId);
var loginUrl = $rootScope.project_url + '/login_post';
$http({
method : 'POST',
url : loginUrl,
headers: {
'Content-Type': undefined
},
params: {
loginId : loginId,
loginPassword : loginPassword
},
dataType: 'json',
processData : false
}).then(function successCallback(response) {
console.log(response.data.result[0].Emp_Id);
console.log(response.data.result[0].Emp_Password);
console.log("successCallback called");
var server_db_column_id = response.data.result[0].Id;
var user_name = response.data.result[0].Name;
$cordovaSQLite.execute(db, 'INSERT INTO user_master_vendor (server_db_column_id, name) VALUES (?, ?)',
[server_db_column_id, user_name])
.then(function(result) {
console.log("Data Saved Successfully in user_master at INSERT ID -> " + result.insertId);
console.log("Data user_empId-> " + user_empId + ", user_empPassword->" +user_empPassword);
},
function(error) {
$scope.showp = "Data could not be saved in user_master_vendor Error -> " + error.message;
console.log(error);
});
}, function errorCallback(response) {
alert("failure: "+response);
});
}
});
Thanks a lot for helping me.I have found the soultion for the problem,it required downloading angular-route module using npm.The below link helped me.
https://docs.angularjs.org/api/ngRoute
I followed all the steps and was able to solve the problem.
AngularJS controller not a function in IBM MobileFirst is what I am getting an error. I went through many similar questions being ask on Stack Overflow but nothing helped me.
Error Print Screen
// **************** app.js ***************
var app = angular.module('myApp',['ui.router']);
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login',{
url:'/login',
templateUrl:'view/login.html',
controller:'loginController'
});
});
// **************** login.js ***************
app.controller('loginController',function($scope){
$scope.login = function(){
$scope.userName = angular.element('#usrName').val();
$scope.password = angular.element('#pass').val();
console.log($scope.userName, $scope.password);
$scope.loginProcedure ={
procedure:'login',
adaptor:'SQL',
parameters:[$scope.userName, $scope.password]
};
WL.Client.invokeProcedure($scope.loginProcedure, function(){
onSuccess: loginSuccess,
onFailure: loginFailure
});
$scope.loginSuccess = function()
{
alert('success');
};
$scope.loginFailure = function()
{
alert('failed');
};
}
});
<!-- INDEX.html -->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>AB</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!--
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-->
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body ng-app="myApp">
<!--application UI goes here-->
<div id="view" ui-view></div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
<script src="library/jquery.min.js"></script>
<script src="library/angular.1.4.9.js"></script>
<script src="library/angular-ui-router.min.js"></script>
<script src="library/bootstrap.min.js"></script>
<script src="controller/app.js"></script>
<script src="controller/login.js"></script>
</body>
</html>
<!-- Login.html -->
<div ng-controller="loginController" class="col-xs-12 col-sm-6 col-md-4 center-block" id="lgBlock">
<!-- Login Box Start -->
<div class="panel panel-primary">
<div class="panel-heading">Login</div>
<div class="panel-body">
<form class="form-group" name="lgForm">
<input type="text" class="form-control" id="usrName" ng-modal="usrName" required />
<input type="password" class="form-control" id="pass" ng-modal="pass" required />
<input type="submit" class="btn btn-primary btn-block" id="submit" value="Login" ng-click="login()" />
</form>
</div>
</div>
<!-- Login Box End -->
<!-- error Modal start -->
<div class="modal" role="modal" id="errorPopup">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Error</div>
<div class="modal-body"></div>
</div>
</div>
</div>
<!-- error Modal End -->
</div>
You are specifying loginController in your html as well as in your route configuration. I'm not certain that this is the cause of the problem, but doing both is unnecessary. Remove one of them.
In other words, eliminate controller: 'loginController' from below
$stateProvider
.state('login',{
url:'/login',
templateUrl:'view/login.html',
controller:'loginController'
});
or eliminate: ng-controller="loginController" from:
<div ng-controller="loginController" class="col-xs-12 col-sm-6 col-md-4 center-block" id="lgBlock">
Also, unrelated, but I doubt that these two lines:
$scope.userName = angular.element('#usrName').val();
$scope.password = angular.element('#pass').val();
do what you think. The purpose of angular.element is to wrap elements as jquery elements. I suspect you want to use document.getElementById here to get references to the items. However, you're using ngModel here, so none of this should be necessary if you use consistent spelling. (In one place you have userName and in another usrName.)
issue was wrong spelling of adapter
/* wrong one */
$scope.loginProcedure ={
procedure:'login',
adaptor:'SQL',
parameters:[$scope.userName, $scope.password]
};
/*write one */
$scope.loginProcedure ={
procedure:'login',
adapter:'SQL',
parameters:[$scope.userName, $scope.password]
};
I am learning AngularJS and I finally got something to work (I implemented a search feature )
Now, I am trying to build a menu based on my search code in AngularJS.
everything works BUT I have to repeat the same code over and over:
ng-model="searchText" ng-click="search('link-6')"
Here's my code:
<!DOCTYPE html>
<html ng-app="casz">
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<section ng-controller="SearchCtrl">
<nav>
<a href="/link-1/" ng-model="searchText" ng-click="search('link-1')" >link-1</a>
<a href="/test/" ng-model="searchText" ng-click="search('test')" >test</a>
<a href="/link/" ng-model="searchText" ng-click="search('link')" >link</a>
<a href="/link-4/" ng-model="searchText" ng-click="search('link-4')" >link-4</a>
<a href="/stackoverflow/" ng-model="searchText" ng-click="search('stackoverflow')" >stackoverflow</a>
<a href="/link-6/" ng-model="searchText" ng-click="search('link-6')" >link-6</a>
<a href="/link-abc/" ng-model="searchText" ng-click="search('link-abc')" >link-abc</a>
<a href="/link-8/" ng-model="searchText" ng-click="search('link-8')" >link-8</a>
<a href="/zzz/" ng-model="searchText" ng-click="search('zzz-9')" >zzz</a>
</nav>
<article ng-repeat="d in data">
<h3>{{d.title}}</h3>
<p>{{d.description}}</p>
</article>
</section>
<!-- JS -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('casz',[]);
app.controller("SearchCtrl", function($scope, $http) {
$scope.search = function(p) {
$http({
cache: false,
dataType: 'json',
url: '/getdata.php?',
method: "POST",
data: 'title=' + p,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data, status, headers, config) {
$scope.status = status;
$scope.data = data;
}).error(function (data, status, headers, config) {
$scope.data = data || "Request failed";
$scope.status = status;
});
};
});
</script>
</body>
</html>
Is there a way to NOT repeat this code "ng-model="searchText" ng-click="search('link-6')" and use data- or something like that?
=== i edited my question ===
You can create an array of links and show them separately via ng-repeat
<a ng-repeat="link in links"
ng-href="/link-{{link}}/"
ng-model="searchText"
ng-click="search('link-' + link)" >
link-{{link}}</a>
Example Plnkr