Angular JS is a Javascript that extends HTML with new attributes and allows you to create declarative templates and do data-binding. If you want to learn more about Angular go here. I have heard a lot about Angular and wanted to try it out so here is how I got it working on a SharePoint 2010 site.
Fist I included all my dependencies on the page
<script src="/SiteAssets/jquery-1.12.0.min.js"></script> <script src="/SiteAssets/angular.min.js"></script>
First I created a new app and defined some variables
<script type="text/javascript">
// make a new app and give it a new
angular.module('spApp',[])
.controller("contactController", function($scope){
GetListItems($scope, "ContactList"); // calling this function to get items from my list and add them to my scope
$scope.sortType = ''; // set the default sort type
$scope.sortReverse = true; // set the default sort order
$scope.searchFish = ''; // set the default search/filter term
});
function GetListItems($scope, listName){ //this function gets all the items from the list
$.ajax({
url: "/_vti_bin/listdata.svc/"+listName+"?select=FullName", // this is specific to SP2010 the URL is different for 2013
method: "GET",
async: false,
headers: { "Accept": "application/json;odata=verbose" },
success: function(data){
$scope.items = data.d.results; // assigning the data from the list to the scope so I can use it
// console.log(data.d.results);
},
error: function(sender,args){
console.log(args.get_message());
}
});
}
</script>
Next we need to get some data to work with. In this example I am using a contacts list. I used some of the code from this article to get it working but I had to tweak it to work with SharePoint 2010.
Ok so now that we have the items from the list we need to display them on the page, for this I built a simple table and added some code to allow for sorts and filters. I have included comments in the code to help it make sense. This article explains in more detail how the sort and filter works.
<div ng-app="spApp" ng-controller="contactsController" >
//the app name and controller name here should match what you defined in the js code
<input type="text" class="form-control" placeholder="Search" ng-model="searchContact" id="rosterSrchBx"> //search box angular uses the value entered in this box to filter the table
<table class="rosterTbl">
<thead>
<tr>
<td>
<a href="#" ng-click="sortType = 'FullName'; sortReverse = !sortReverse"> //sort order code
Name
<span ng-show="sortType == 'FullName' && !sortReverse" class="fa fa-caret-down"><img src="/_layouts/images/ARWDOWN.GIF"/></span>
<span ng-show="sortType == 'FullName' && sortReverse" class="fa fa-caret-up"><img src="/_layouts/images/ARWUp.GIF"/></span>
</a>
</td>
<td>
Phone Number
</td>
<td>
Cubicle
</td>
<td>
Email
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items | orderBy:sortType:sortReverse | filter:searchContact" > //this is basically a repeater that spits out all the items in the list
<td class="ms-vb">
{{ item.FullName }} // this is how you display a column from the list, you have to use the internal name of the column
</td>
<td class="ms-vb">
<img src="/_layouts/images/gbwcawpt.gif" align="absmiddle"/>
{{ item.Phone }}
</td>
<td class="ms-vb">
{{ item.Cubicle }}
</td>
<td class="ms-vb">
<a href="mailto:{{ item.Email }}">
{{ item.UFOUOEmail }}
</a>
</td>
</tr>
</tbody>
</table>
</div>
To make it look a bit better I also added some CSS
.rosterTbl {
padding:7px;
}
.rosterTbl td {
padding:9px;
}
.rosterTbl thead td{
background-color:#bfe8ff;
border:1px solid #90c6e5;
}
.rosterTbl tbody tr:hover {
background-color:#edf8ff;
}
.rosterTbl tbody td {
border-bottom:1px solid #eee;
}
#rosterSrchBx{
padding:7px;
padding-left:25px;
font-size:1.7em;
margin:5px 0px;
background:url('/_layouts/images/magnify.gif') no-repeat 3px;
border:1px solid #ccc;
}
