Provider Hosted MVC App With AngularJS in Sharepoint - Part 1

1. 1. var factory = new SP.ProxyWebRequestExecutorFactory(appweburl);
   In order to access web object, we first need to get object of type " SP.AppContextSite() ".
   
   1. var appContextSite = new SP.AppContextSite(context, hostweburl);
   Main Code :
   
   1. (function () {
   3. console.log('app-data-service.js loaded...');
   4. 'use strict'
   6. angular
   7. .module(window.AngularApp_constants.architecture.modules.MainApp.moduleKey)
   8. .service('app-data-service', AngularDataService);
   10. AngularDataService.$inject = ['$q', '$http', '$timeout'];
   12. function AngularDataService($q, $http, $timeout) {
   14. function QueryStringParameter(paramToRetrieve) {
   15. var params =
   16. document.URL.split("?")[1].split("&");
   17. var strParams = "";
   18. for (var i = 0; i < params.length; i = i + 1) {
   19. var singleParam = params[i].split("=");
   20. if (singleParam[0] == paramToRetrieve) {
   21. return singleParam[1];
   22. }
   23. }
   24. }
   26. var hostweburl;
   27. var appweburl;
   29. //The SharePoint App where the App is actualy installed
   30. hostweburl = decodeURIComponent(QueryStringParameter('SPHostUrl'));
   32. //The App web where the component to be accessed by the app are deployed
   33. appweburl = decodeURIComponent(QueryStringParameter('SPAppWebUrl'));
   35. // resources are in URLs in the form: web_url/_layouts/15/resource
   36. var scriptbase = hostweburl + "/_layouts/15/";
   38. this.get = function () {
   40. var EmployeeArray = [];
   41. var listTitle = "EmployeeCatalog";
   43. var deferred = $q.defer();
   45. // Load 15hives js files and continue to the successHandler
   46. $.getScript(scriptbase + "SP.Runtime.js",
   47. function () {
   48. $.getScript(scriptbase + "SP.js",
   49. function () {
   50. $.getScript(scriptbase + "SP.RequestExecutor.js",
   51. function () {
   53. //Represents the context for objects and operations.
   54. var context = new SP.ClientContext(appweburl);
   56. //Access host web from app using JavaScript CSOM
   57. var factory = new SP.ProxyWebRequestExecutorFactory(appweburl);
   58. context.set_webRequestExecutorFactory(factory);
   60. var appContextSite = new SP.AppContextSite(context, hostweburl);
   61. var web = appContextSite.get_web();
   62. context.load(web);
   64. //Access HostWeb List
   65. var list = web.get_lists().getByTitle(listTitle);
   67. var camlQuery = SP.CamlQuery.createAllItemsQuery();
   68. this.listItems = list.getItems(camlQuery);
   69. context.load(this.listItems);
   71. context.executeQueryAsync(
   72. Function.createDelegate(this, function () {
   74. var ListEnumerator = this.listItems.getEnumerator();
   76. while (ListEnumerator.moveNext()) {
   78. var currentItem = ListEnumerator.get_current();
   79. EmployeeArray.push({
   80. ID: currentItem.get_item('ID'),
   81. EmpID: currentItem.get_item('EmpID'),
   82. EmpName: currentItem.get_item('EmpName'),
   83. EmpAddress: currentItem.get_item('EmpAddress'),
   84. EmpAge: currentItem.get_item('EmpAge'),
   85. EmpQualification: currentItem.get_item('EmpQualification'),
   86. EmpDesignation: currentItem.get_item('EmpDesignation')
   87. });
   88. }
   90. console.log(EmployeeArray);
   91. deferred.resolve(EmployeeArray);
   92. }),
   93. Function.createDelegate(this, function (sender, args) {
   94. deferred.reject('Request failed. ' + args.get_message());
   95. console.log("Error : " + args.get_stackTrace() );
   96. })
   97. );
   98. });
   99. });
   100. });
   102. return deferred.promise;
   103. }; // Get
   105. } // AngularDataService
   107. })();
2. app-home-controller.js: HomeController call service methods to get SharePoint list data.
   In this code we are injecting service name into controller definition so that HomeController can consume services, call specific function from angular service & consume service response. Do data manipulation as needed.
   
   1. (function () {
   3. console.log('app-home-controller.js loaded ..');
   4. 'use strict'
   6. angular
   7. .module(window.AngularApp_constants.architecture.modules.MainApp.moduleKey)
   8. .controller('HomeController', HomeController)
   10. HomeController.$inject = ['$scope', '$location', 'app-data-service'];
   12. function HomeController($scope, $location, AngularDataService) {
   14. $scope.EmployeeMaster = [];
   16. Load();
   18. function Load() {
   20. console.log("Load called");
   22. var promiseGet = AngularDataService.get();
   23. promiseGet.then(function (resp) {
   24. $scope.EmployeeMaster = resp;
   25. }, function (err) {
   26. $scope.Message = "Error " + err.status;
   27. });
   28. }
   29. }
   31. })();
   Project Specific File Structure:
   
   
   
   EmployeeController Source Code: Same source code as default "HomeController.cs " file is having when MVC app is created.
   
   1. using Microsoft.SharePoint.Client;
   2. using System;
   3. using System.Collections.Generic;
   4. using System.Linq;
   5. using System.Web;
   6. using System.Web.Mvc;
   8. namespace ProviderHostedMvcAppWithAngularJSWeb.Controllers
   9. {
   10. public class EmployeeController : Controller
   11. {
   12. [SharePointContextFilter]
   13. public ActionResult Index()
   14. {
   15. User spUser = null;
   17. var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext);
   19. using (var clientContext = spContext.CreateUserClientContextForSPHost())
   20. {
   21. if (clientContext != null)
   22. {
   23. spUser = clientContext.Web.CurrentUser;
   25. clientContext.Load(spUser, user => user.Title);
   27. clientContext.ExecuteQuery();
   29. ViewBag.UserName = spUser.Title;
   30. }
   31. }
   33. return View();
   34. }
   36. }
   37. }
   Index.cshtml Source Code
   
   AngularJS comes up with new control named trNgGrid, it is same like ASP.NET GridView controller.
   
   items="EmployeeMaster ": it is the data source for this control. if you remember at app-home-controller.js file data has set "EmployeeMaster " variable. It internally does data iteration & create dynamic table. Add dynamic rows as it is present in Data Source.
   
   1. @{
   2. ViewBag.Title = "Home Page";
   3. }
   5. <!-- Javascript from hives Layout folder -->
   6. <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
   7. <script type="text/javascript" src="/_layouts/15/sp.js"></script>
   8. <script type="text/ecmascript" src="/_layouts/SP.Core.js"></script>
   9. <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
   11. <!-- Basic JS Files -->
   12. <script src="~/AngularJSScript/BasicJS/angular.min.js"></script>
   13. <script src="~/AngularJSScript/BasicJS/trNgGrid.js"></script>
   15. <!-- Custom JS Files -->
   16. <script src="~/AngularJSScript/CustomJS/app-constants.js"></script>
   17. <script src="~/AngularJSScript/CustomJS/app-main.js"></script>
   18. <script src="~/AngularJSScript/CustomJS/app-data-service.js"></script>
   19. <script src="~/AngularJSScript/CustomJS/app-home-controller.js"></script>
   21. <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
   22. <link href="~/Content/trNgGrid.min.css" rel="stylesheet" />
   24. <div ng-app="AngularApp">
   25. <div ng-controller="HomeController">
   27. <div>
   28. <h3>Provider Hosted Mvc App with AngularJS</h3>
   29. </div><br /><br />
   30. <div>
   31. trNgGrid control - To show List Data
   32. </div><br />
   33. <table tr-ng-grid="" items="EmployeeMaster" locale="en">
   34. <thead>
   35. <tr>
   36. <th field-name="EmpID" display-name="Employee ID"></th>
   37. <th field-name="EmpName" display-name="Employee Name"></th>
   38. <th field-name="EmpAddress" display-name="Address"></th>
   39. <th field-name="EmpAge" display-name="Age"></th>
   40. <th field-name="EmpQualification" display-name="Qualification"></th>
   41. <th field-name="EmpDesignation" display-name="Designation"></th>
   42. </tr>
   43. </thead>
   44. <tbody></tbody>
   45. </table>
   47. </div>
   48. </div>
   RouteConfig.cs: Controller name pointing to "Employee" , as it is the starting point of our application.
   
   1. using System;
   2. using System.Collections.Generic;
   3. using System.Linq;
   4. using System.Web;
   5. using System.Web.Mvc;
   6. using System.Web.Routing;
   8. namespace ProviderHostedMvcAppWithAngularJSWeb
   9. {
   10. public class RouteConfig
   11. {
   12. public static void RegisterRoutes(RouteCollection routes)
   13. {
   14. routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
   16. routes.MapRoute(
   17. name: "Default",
   18. url: "{controller}/{action}/{id}",
   19. defaults: new { controller = "Employee", action = "Index", id = UrlParameter.Optional }
   20. );
   21. }
   22. }
   23. }
   CSS files: For specific look & feel of table & whole application, I used the following CSS file into the project.
   
   
   Output:
   
   

Thank you! Please mention your queries if you have any.