📅 最后修改于: 2023-12-03 15:13:23.581000 🧑 作者: Mango
AngularJS is a popular JavaScript framework used for building dynamic web applications. SharePoint is a web application platform developed by Microsoft. SharePoint allows users to access and share information across their organization. In this guide, we will discuss how to create a SharePoint CRUD (Create, Read, Update, Delete) application using AngularJS.
Before we begin our project, you will need the following:
You will need to set up your SharePoint environment by creating a list where the CRUD operations will be performed. The list should have the following columns:
Next, you will need to create an AngularJS application. This can be done using any IDE for AngularJS. In our example, we will be using Visual Studio Code.
Create a new folder for your AngularJS application and open it in Visual Studio Code. Create a new file called app.js and add the following code:
var app = angular.module('myApp', []);
This code creates a new AngularJS module called myApp.
In order to access the SharePoint list, we will need to create a service. In app.js, add the following code:
app.service('sharePointService', function($http) {
var url = 'https://your-sharepoint-url.com/sites/your-site/_api/web/lists/getbytitle(\'ListName\')/items';
this.getItems = function() {
return $http.get(url);
}
this.addItem = function(item) {
return $http.post(url, item);
}
this.updateItem = function(item) {
return $http({
method: 'PATCH',
url: url + '(' + item.Id + ')',
data: item
});
}
this.deleteItem = function(item) {
return $http({
method: 'DELETE',
url: url + '(' + item.Id + ')',
});
}
});
In this code, we are creating a sharePointService service that has four methods: getItems(), addItem(item), updateItem(item), and deleteItem(item). These methods use the $http service to make requests to the SharePoint REST API.
Next, we will create a controller that handles the CRUD operations for the SharePoint list. Create a new file called crudController.js and add the following code:
app.controller('crudController', function($scope, sharePointService) {
$scope.items = [];
$scope.getItems = function() {
sharePointService.getItems().then(function(response) {
$scope.items = response.data.d.results;
});
}
$scope.addItem = function() {
var item = {
'First Name': $scope.firstName,
'Last Name': $scope.lastName,
'Email': $scope.email,
'Phone Number': $scope.phoneNumber
};
sharePointService.addItem(item).then(function(response) {
$scope.getItems();
});
}
$scope.updateItem = function(item) {
sharePointService.updateItem(item).then(function(response) {
$scope.getItems();
});
}
$scope.deleteItem = function(item) {
sharePointService.deleteItem(item).then(function(response) {
$scope.getItems();
});
}
});
In this code, we are creating a crudController controller that has four methods: getItems(), addItem(), updateItem(item), and deleteItem(item). These methods call the appropriate methods in the sharePointService service to perform CRUD operations on the SharePoint list.
Finally, we will create a view for our application. Create a new file called index.html and add the following code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS SharePoint CRUD</title>
</head>
<body ng-controller="crudController">
<h1>AngularJS SharePoint CRUD</h1>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone Number</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td><input type="text" ng-model="item['First Name']"></td>
<td><input type="text" ng-model="item['Last Name']"></td>
<td><input type="text" ng-model="item['Email']"></td>
<td><input type="text" ng-model="item['Phone Number']"></td>
<td>
<button ng-click="updateItem(item)">Update</button>
<button ng-click="deleteItem(item)">Delete</button>
</td>
</tr>
<tr>
<td><input type="text" ng-model="firstName"></td>
<td><input type="text" ng-model="lastName"></td>
<td><input type="text" ng-model="email"></td>
<td><input type="text" ng-model="phoneNumber"></td>
<td><button ng-click="addItem()">Add</button></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="app.js"></script>
<script src="crudController.js"></script>
</body>
</html>
In this code, we are creating a view that displays the SharePoint list data in a table. The user can edit, add, or delete items using the buttons provided.
In this guide, we discussed how to create a SharePoint CRUD application using AngularJS. We created a service for connecting to the SharePoint REST API, a controller for handling CRUD operations, and a view for displaying and interacting with the SharePoint list data. This application can be customized to fit your specific SharePoint list requirements.