Architecture

Predominantly, ng-SharePoint consists of a set of services that facilitate our access to the SharePoint REST api, and a set of directives that allow us to create advanced forms to display and edit SharePoint list items.

###Services and Factories A set of services that provides high-level functionality for access to SharePoint. There is a service for each of the main objects of SharePoint’s architecture (SPWeb, SPList, SPListItem, SPUser, …).

When specific instances of any of these proxy objects are created, they are configured automatically to point to the specific REST API url for the object that represents. For example, if you instantiate an SPWeb object with a specific url:

var web = new SPWeb(‘/foo-website’);

Internally the service is configured with a pointer to the corresponding REST API. In this case: http://foo-website/_api/web.

Next, when you call methods for this object, internally the object uses this API to make calls to the server and perform actions over the server element.

Continuing with previous example:

var web = new SPWeb('/foo-website');
web.getRootFolder().then(function(folder) {
	// ...
});

The method getRootFolder causes a call to the server API to the url:

http://foo-website/_api/web/rootfolder

and returns a object of type SPFolder initialized with the API url:

http://foo-website/_api/web/GetFolderByServerRelativeUrl('/')

Each of these objects has a property called apiUrl that contains the url where the object will make the calls.

###Directives One of the main features that AngularJS provides, is data-binding. Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.

Following this principle, ng-SharePoint includes a set of directives focused on creating list item forms (new, edit and display). The framework includes high level directives to render each field of a list based on its definition. That allows the creation of new free form layouts in an easy way.

There are a lot of free and powerful community components that you can use in combination with any fresh responsive theme to make new amazing user interfaces.

It is possible to create single page applications (using angular routing) to improve navigation and user experiences that really adapt to new device capabilities (mobile, tablet and desktop).