Introduction

This article shows how can you use client side JavaScript library AngularJS to build SharePoint 2013 apps. Microsoft introduced a new app model in SharePoint 2013 release, which is available both for On-Premise deployments and in the hosted Service Office 365.

SharePoint apps can be built as single page Applications for a very fast, fluid and pleasant experience for your users. It will show you how to create a SharePoint-hosted app as a single page Application, using JS framework. In this article, we will walk through with Angular JS implementation in SharePoint.

SharePoint 2013

SharePoint 2013 includes lists, libraries etc. Everything changes as an app model. This new model of SharePoint 2013 can allow an access of lists and libraries in JavaScript, using JavaScript Object Model (JSOM).

We have several JavaScript Libraries and Frameworks for DOM manipulations. In addition to it, it also mplements MVVM and MVC programming on client-side. Nowadays, many people are using jQuery, Knockout, Angular.js etc.. When using JS Frameworks, many features are provided by the framework itself, such as the concept of binding data, looping and hiding/displaying a section.

Now, we will implement a SharePoint Training app, using Angular.js. AngularJS also provides concepts like modeling, routing, custom Directives and Services.

Today, we will take a basic example that demonstrates Angular binding. The concept can be extended to routing, Directives, Services and other features of Angular.

Angular JS

Before getting started, let’s quickly introduce JavaScript library – Angular JS. Angular JS is a JavaScript MVC framework created by Google is required to build properly architectured and maintainable Web Applications.

AngularJS is a JavaScript framework. It is a library written in JavaScript. AngularJS is distributed, as a JavaScript file and can be added to a Web page with a script tag.

1. <script src="ajax.googleapis.com/ajax/libs/angularjs/1.4.8/ang…

AngularJS is an open source, completely free and used by thousands of developers around the world.

AngularJS extends HTML with ng-Directives.

• The ng-app Directive defines an AngularJS Application.
• The ng-model Directive binds the value of HTML controls (input, select, textarea) to an Application data.
• The ng-bind Directive binds the Application data to HTML view.

Implementing Angular JS into SharePoint 2013

Open Office 365 SharePoint Online portal, using portal.microsoftonline.com. Login with your subscription. Create a new developer site/ open your custom list and a custom list named, as shown below.

Angular JS basics

AngularJS Directives are used to extend HTML. These are special attributes starting with ng-prefix. We are going to discuss Directives given below.

• ng-app − This Directive starts an AngularJS Application.
• ng-init − This Directive initializes application data.
• ng-model − This Directive defines the model that is variable to be used in AngularJS.
• ng-repeat − This Directive repeats HTML elements for each item in a collection.