2015-09-17

О том, как я добавил Angular JS в SharePoint приложение.


SharePoint 2013 модель разработки основывается на том, что вызываются приложения SharePoint. Обычно, это приложения, которые исполняются на стороне клиента, также включающие Angular, все больше и больше популярны среди разработчиков. Для меня это стало небольшой проблемой – работа с новой моделью разработки, потому что раньше я использовал при разработке клиентского приложения классические веб-технологии. И так, я пытался совместить то, что знаю я с новыми принципами работы.

           Так как я не хотел смешивать с существующим макетом, я создал новый простой макет, который соответствует функционалу, который мне необходим. И так, я добавил модуль вызова “MasterPages”, изменил имя и добавил простой текстовый файл, включенный по умолчанию модуль «Layout master». Внутри макета я разместил нижеприведенный код
<!DOCTYPE html >
<html runat="server" dir="ltr" ng-app="holidayapp">
    <head runat="server">
         <meta http-equiv="X-UA-Compatible" content="IE=10" />
        <meta name="GENERATOR" content="Microsoft SharePoint" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Expires" content="0" />
        <title><asp:ContentPlaceHolder runat="server" ID="PlaceHolderPageTitleInTitleArea" /></title> 
        <SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false"  />
        <SharePoint:ScriptLink language="javascript" name="sp.js" LoadAfterUI ="true" OnDemand="false" runat="server" Localizable="false" />
        <asp:ContentPlaceHolder runat="server" ID="laceHolderAdditionalPageHead" />     
    </head>
    <body>
        <form runat="server" id="aspnetForm">
         <asp:ScriptManager runat="server" AjaxFrameworkMode="Enabled" EnablePartialRendering="true" LoadScriptsBeforeUI="false" ScriptMode="Debug">
             <Scripts>
            </Scripts>
         </asp:ScriptManager>
          <asp:ContentPlaceHolder runat="server" ID="PlaceHolderMain">
              

        </asp:ContentPlaceHolder>
        </form>
    </body>
</html>

         В некоторых частях файла я изменил URL, где страницы должны быть развернуты:
<?xml version="1.0" encoding="utf-8"?>
  <Module Name="MasterPages">
    <File Path="MasterPages\Layout.master" Url="_catalogs/masterpage/Layout.master" ReplaceContent="TRUE"  Type="GhostableInLibrary"/>
  </Module>
</Elements>
   Рядом с классическим кодом макета, как вы можете заметить, я добавил Angular приложение. Он инициализирует загрузку JavaScript файлов, для этого я использую Script Manager Control. Не вижу причин не использовать его. Загружается скрипт после загрузки пользовательского интерфейса, это лучший способ загрузки скриптов на страницы, потому что так не сильно влияет на производительность.
<asp:ScriptManager runat="server" AjaxFrameworkMode="Enabled" EnablePartialRendering="true" LoadScriptsBeforeUI="false" ScriptMode="Debug">
 <Scripts>
<asp:ScriptReference Path="../../Scripts/angular.min.js" />
 </Scripts>
</asp:ScriptManager>
         Нам не хватает еще одного контроллера, но у меня есть намерения, чтобы добавить его в контент страниц. И так, давайте приступим и изменим контент страницы, соответственно коду, приведенному ниже
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~site/_catalogs/masterpage/Layout.master" Language="C#" %>
<asp:Content runat="server" ContentPlaceHolderID="PlaceHolderMain">
    <asp:ScriptManagerProxy runat="server">
        <Scripts>
            <asp:ScriptReference Path="../Scripts/Default.js"/>
        </Scripts>
    </asp:ScriptManagerProxy>
     
    <div ng-controller="maincontent">
        {{mymessage}}
    </div>
   
</asp:Content>
       Пожалуйста, обратите внимание на следующие пункты:
  •         Контент страницы содержит макет, который я создал ранее;
  •   Контроллер помещен в файл Defaulr.js, загружается через Script Manager прокси-контроллера. И снова мы используем стандартные веб-формы для загрузки файлов;
  •      Контроллер был помещен внутри контента.

   И так, подходя к концу статьи, могу сказать, что  использование Angular в SharePoint приложении достаточно простое и удобное.
Ниже приведен код обработчика, который отлавливает модуль, в котором запускается Angular приложение и контроллер.
var holidayApp = angular.module("holidayapp", []);

var content = holidayApp.controller("maincontent", function ($scope) {
    $scope.mymessage = "Message";
});
В завершении скажу, что использовать Angular приложения на wiki-страницах не получится, поэтому следует использовать простые макеты и шаблоны для построения своего приложения.


Если данная статья оказалась полезной вам, поставьте (+1). Комментарии приветствуются.

1 комментарий: