Angularjs SharePoint 2013/2016/Online tutorial

This AngularJS SharePoint tutorial, we will discuss how to use AngularJS in SharePoint 2013/2016 or SharePoint Online. In this series of articles, we will discuss various demos building in AngularJS for SharePoint 2016/2013.

AngularJS build on JavaScript framework and is very much powerful compared to JavaScript for building interactive, rich Single Page Applications (SPA). AngularJS extends HTML DOM with additional attributes and makes it more responsive. AngularJS is fully open-source and it is free to use.

AngularJS is based on the MVC framework. The three main components of the MVC framework are:

  • Model: This is responsible for managing application data. This response to instructions from the controller as well as requests from view.
  • View: This is responsible for the presentation of data.
  • Controller: This is responsible for interaction between the model and view. The control usually receives input from the user, validate it, process business operations and respond to view.

Below are few parts we will discuss which are really important before starting a simple demo application.

AngularJS has various directives that provide various functionality in the application.

ng-app: This directive initializes an AngularJS application. This defines the HTML as an AngularJS application.

Ex: <div ng-app = ""></div>

ng-model: This directive is used to bind the values from the AngularJS application to HTML input controls (input, select, etc).

Ex: <input type = "text" ng-model = "name">

ng-bind: This directive bind AngularJS application data into HTML tags.

Ex: <span ng-bind = "name"></span>

ng-repeat: This directive is used to repeat the HTML element.

<div ng-app="" ng-init="count=[1,2,3,4,5]">
<ul>
<li ng-repeat="n in count">
{{ n }}
</li>
</ul>
</div>

This will display in from 1 to 5.

AngularJS for SharePoint 2013/2016/Online Example

We can use AngularJS in the script editor web part, content editor web part or in SharePoint apps easily.

In this particular example, I am using the Office 365 SharePoint Online site and on that site, I have added a web part page. In that web part page, I edit the page and added a script editor web part from the web part gallery.

First, we need to give reference to the AngularJS js file like below:

<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

Then we need to use ng-app with div element which will tell that this is the start of an AngularJS application.

<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<h1>Our first AngularJS Demo Application</h1>
<div ng-app = "">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span></p>
</div>

Here ng-model creates a variable as name and we can use that anywhere in the ng-app.

And we used ng-bind to bind the ng-model value to an HTML span tag.

Once you Save the page, you will be able to see the AngularJS application functioning.

angularjs sharepoint 2013 tutorial

If you are new to angularjs, then you should know about AngularJS Expressions, Directives, Data Binding etc.

AngularJS is quite new which was released in the year 2012 by a Google employee Miško Hevery who was working on AngularJS from the year 2009. I hope this AngularJS tutorial will help beginners to learn something.

I hope this AngularJS tutorial helps you to learn angularjs from the beginning, learn about AngularJS directives, expressions, and few angularjs examples.

  • AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, front-end applications.
  • AngularJS is a structural framework for dynamic web apps.
  • AngularJS extends HTML with new attributes and is perfect for SPAs (Single Page Applications).
  • AngularJS extends HTML by providing directives that add functionality to your markup and allow you to create powerful dynamic templates. It also implements two-way data binding, connecting your HTML (views) to your JavaScript objects (models) seamlessly. In simple terms, this means that any update on your model will be immediately reflected in your view.
  • Flexibility regarding server communication. Like most JavaScript MVC frameworks, it lets you work with any server-side technology as long as it can serve your app through a RESTful web API.

AngularJS provides the following facilities:

  • Data binding, as in {{}}.
  • DOM control structures for repeating/hiding DOM fragments.
  • Support for forms and form validation.
  • Attaching code-behind to DOM elements.
  • Grouping of HTML into reusable components.

AngularJS Expressions

  • AngularJS expressions are written inside double braces: {{ expression }}.
  • AngularJS expressions bind data to HTML the same way as the ng-bind directive.

In AngularJS, expressions allow you to execute some computation in order to return the desired value.

Example:
{{ user.name }}

you shouldn’t use expressions to implement any higher-level logic. For that, we use directives.

AngularJS Directives

  • AngularJS directives are extended HTML attributes with the prefix ng-.
  • At a high level, directives are markers (such as attributes, tags, and class names) that tell AngularJS to attach a given behavior to a DOM element.
  • The ng-app directive initializes an AngularJS application.
  • The ng-init directive initialize application data.
  • The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
  • The ng-controller directive defines which controller will be in charge of your view.
  • The ng-repeat directive is one of the most commonly used and serves to define your template scope when looping through collections.
  • The ng-repeat directive repeats an HTML element:

Example:

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
<div>

AngularJS Example

Below is an AngularJS example to show data using ng-repeat.

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
<div>

AngularJS Example

Here is an AngulatJS example which binds textbox data through expression.

<div ng-app="" ng-init="firstName='Raj'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>

AngularJS Data Binding

The {{ firstName }} expression, in the example above, is an AngularJS data binding expression.

Data binding in AngularJS, synchronizes AngularJS expressions with AngularJS data.

{{ firstName }} is synchronized with ng-model=”firstName”.

<div ng-app="" ng-init="quantity=1;price=5″>

Quantity: <input type="number" ng-model="quantity">
Costs:    <input type="number" ng-model="price">

Total in dollar: {{ quantity * price }}

</div>

AngularJS $scope Hierarchy

Now, let us discuss about AngularJS $scope Hierarchy. One of these important concepts is scopes.

In an AngularJS application, the controller and view share an object called a scope; this object is at the core of its amazing two-way data binding. The controller sets properties on the scope, and the view binds to those properties.

AngularJS takes responsibility for keeping the two in sync. A controller is responsible for setting model properties and functions. This can be done only through $scope.

Whatever function or model you apply in View (HTML file), that is accessed in controller using scope.

Only methods defined on this $scope object are accessible from the HTML/view.

Example – from ng-click, filters, etc. AngularJS extended the raw JavaScript objects with custom methods and properties. These objects, also known as scope in AngularJS terms, work as a glue between the view and other parts ( directives, controllers and services ) inside the AngularJS application.

For Example:

Below is the controller.js code app.controller(‘MySimpleController’, function($scope) { $scope.message = ‘Hello Raj!’; });

Below is the HTML part
 {{message}}

In this example, the controller sets a property, message, on the scope.

When AngularJS processes the ng-model directive in the view, it starts listening for change events on that input element and on the scope’s message property. If the value of message changes, the input will update, and if the input changes, message updates.

You may like following angularjs & SharePoint 2013 tutorials:

This AngularJS SharePoint we learned how to use the angularjs sharepoint 2013 tutorial. In the same way, we can use Angular js in SharePoint Online or SharePoint 2019/2016.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

  • Do you have I solution or a suggestion for creating this AngulerJS demo on a modern Team site in SharePoint online? I’m sure you are aware that the “Script Editor” web part is not available with out of the box SharePoint Online and modern Team site template.

    • hi Matt, hope you are doing good.
      Thats correct Script editor is not available in Modern site, But we could use SPFX.

  • >