Basics of AngularJS in SharePoint

Hello everyone, in this article we will look into some of the basic functionalities of AngularJS and how they can be used in your SharePoint environment. Let me skip the introduction to AngularJS, you can find lot more introduction in google. Let’s jump into our core concept. First and foremost thing is, we need to have couple of things in our page to make use of AngularJS ->

1. <script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script> here in there official website you can find libraries with all versions, https://angularjs.org/

2. Second thing is ng-app which is application directive for Angular. This one is special directive that Angular looks for in our HTML and it will take control of section of DOM where the ng-app applies. Only one ng-app per page is allowed and if we want multiple then we need to bootstrap the modules to have multiple ng-app in same page.

I’ll explain the basic components in Angular with an example. So I’ve created a new JavaScript file and named it as MyAngular.js and added the below code

 (function () { //IIFE - Immediate Invoke Function Expression, to avoid global variables 
 
     // creating our own module, A module is a collection of controllers, directives, //filters, services, and configuration information
     // first param - module name
     // second param - dependent module, here we have no dependent module so we use [] //which will access all default angular functions
     var app = angular.module("myapp", []);
 
     var MyController = function ($scope) {
 
         $scope.testData = "Hi, My Angular is working!!!";
 
     };
 
     //controller usually live in modules, we can define the controller as show below
     //1st param - controller name
     //2nd param - function
     app.controller("MyController", MyController);
     //or 
     //app.controller("MyController", ["$scope", MyController]);
 } ());
 

In SharePoint aspx page inside Content Place holder,

 <asp:Content ID="Content1" ContentPlaceHolderId="PlaceHolderMain" runat="server">
 <script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
 <script src="../SiteAssets/JS/Form JS/MyAngular.js"></script>
 
 <div id="appDiv" ng-app="myapp">
 	<div id="controllerDiv" ng-controller="MyController">
 		{{testData}}
 	</div>
 </div>	
 </asp:Content>
 

If you get the above output then it means your app directive and controller are rightly coded,

{{ }} – It is one of the binding directive in angular and it is called as Data Binding Directive, this binding expression will call the Model and pull out the data in the page.

$scope – Everyone knows that Angular follows MVC framework, so if we consider like that then an AngularJS application consists of,

· Model, which is the data available for the current view.

· View, which is the HTML part.

· Controller, which is the JavaScript function that makes/changes/controls/removes the data.

$scope is the application object (the owner of application variables and functions), which are available for both the View and the Controller. Actually, $scope is not the model, but the data and things that we embed to that $scope are going to be the Model.

ng-controller – In Angular Controllers are in responsible for building a Model. A Model has the data we need to work with and a controller will help to grab that data. So the data might need to make some sort of manipulations or calculations or call back to a web server that talks to a database. Controller’s primary responsibility is to create the $scope object.

ng-model (two-way binding) – It is extremely useful directive, because we can apply it to Inputs, Selects, Textarea. ng-model will help to keep our data in sync. For example, include the below table inside the div id – controllerDiv

 <table>
     <tr>
         <td>
             Email ID:
         </td>
         <td>
             <br />
             <input type="text" id="txtTitle" ng-model="username" />
             <br />
             <span ng-show="username">{{username}}@myangularworld.com</span>
         </td>
     </tr>
 </table>
 

And the output will be, the <span> below the textbox will be visible only if there’s any value inside the textbox.

ng-show and ng-hide – If the ng-show="username" or ng-hide="!username” both gives the same result. If “username” is truthi, then it will be taken as true

ng-click – Just like ng-model we need to specify the expression here ng-click="expression"

, typically here the expression can a function call or some manipulation on objects. An object needs to be attached to $scope, so that the angular will invoke it.

Append the below <input/> into the controllerDiv

<input type="button" value="Click count – {{count}}" ng-click="clickCount(count)" />

Inside the Controller function, I have defined another function called clickCount and incrementing the value here.

 var MyController = function ($scope) {
 
     $scope.clickCount = function (count) {
         $scope.count += 1;
     };
 
     $scope.count = 0;
     $scope.testData = "Hi, My Angular is working!!!";
 };
 

ng-include – It is useful to bring your HTML from another source, and then we can use that HTML in our current page. Add ng-include directive in the div and use single quotes inside the double quotes, so that expression shouldn’t be resolve by $scope and the value of the expression should be the location of the file.

Created a page, AnotherCustom.html and added simple div and img tag, as shown below

To have this html page in our main page we can use ng-include,

<div ng-include="’../SiteAssets/AnotherCustom.html’" ></div>

Even more useful Directives – Over 50 directives that comes with Angular core library. In addition to this, Angular allows to write custom directives as well. There are lot of custom directives as open-source project and to perform activities like media players, drag & drop, or Google maps wrapper etc.

In the below table you can find some useful directives,

Happy Coding

Ahamed