European SharePoint Hosting Tutorial – How to Use AngularJS to Build SharePoint 2013 Application

The App Model introduced in SharePoint 2013 allows JavaScript Developers to develop Apps for SharePoint. In SharePoint 2013, everything (which includes Lists, Libraries etc.) is an application. The JavaScript programming feature of App for SharePoint executes the custom code on a separate server e.g. Cloud, IIS, or even the client browser. There are several JavaScript Libraries and Frameworks for DOM manipulations, and implementing MVVM and MVC programming on client-side. Some of them includes jQuery, Knockout, Angular.js etc. In this article, we will build a SharePoint Application using AngularJS. The Services and Controller features of Angular.js can be used to manage the SharePoint model declaration (controller scope objects) and external service calls (services) segregation will help to develop Apps for SharePoint effectively. We will be using SharePoint 2013 Online and the Developer site created on it.

SharePoint-2013-Hosting1Step 1

Open the SharePoint online portal using http://portal.microsoftonline.com. Login with your subscription. (Alternatively, on-premises SharePoint 2013 installation can be used). Create a new developer site and a Custom List named CategoryList as shown in the following figure:

1The list will have CategoryId and CategoryName columns. Note that the default Title Column is renamed to CategoryId. The programming always uses the Title as column name.

Step 2

Open Visual Studio 2013 and create a new App for SharePoint and name it SPNG as shown in the following figure.

2Set the SharePoint site for SharePoint hosted App as shown in the following figure:

3Once the app is created add the AngularJS Framework, jQuery and Bootstrap JavaScript libraries using Manage NuGet Package in the project.

Step 3

In the Scripts folder, add a new folder and name it MyScripts. In this folder, add the following JavaScript files:

Module.js

The above code is for creating an Angular.js module. This is the entry point for our application.

Service.js

Controller.js

Step 4

Open Default.aspx and add the following script references:

The above references are used to load Angular Framework and the bootstrap library for the RICH UI.

Step 5

Add the following markup in the PlaceHolderMain of Default.aspx:

Step 6

Since we need to perform a Read/Write operations on the List using App, we need to apply access rights. In the project we have an AppManifest.xml. This is used to set the App permissions. Double-Click on this file and set the permissions as shown in the following figure:

4

Step 7

Here we need to set permissions on the Web Sire and the List, so that we can perform Read/Write operations.

5

Run the application, after deployment we can set the trust for the app as shown here. Click on Trust It and the following result will be displayed:

6

Enter Category Details in the textboxes and click on the Save button, the new category record added in the table will be displayed as shown in the following figure:

7Happy coding!

Looking for SharePoint Hosting on European Server? We can help you a lot!

hostforlifeasp.net is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

hostforlifeasp.net