An introduction to AngularJS and how it can be useful when building SharePoint apps.

1. Level: 300
SharePoint 2013
No server code? No worries!
Daniel Šmon

2. A bit about you…
Join the Conversation #SP2013Angular @DanielSmon

3. Daniel Šmon
@DanielSmon
 11+ years in IT
 Ex-Microsoft Consultant (SharePoint)
 Moved from Australia to Slovenia
 Plays the button accordion,
euphonium
Join the Conversation #SP2013Angular @DanielSmon

4. Enterprise Software Development
Join the Conversation #SP2013Angular @DanielSmon

5. Ways to customise SharePoint
Typical SharePoint App
AngularJS
AngularJS in a SharePoint app
Agenda
Summary

6. Customising SharePoint
• FEATURE folders
• Farm solutions (WSP)
• Sandboxed solutions (WSP)
• Apps
• Provider Hosted
• SharePoint Hosted
• Auto-Hosted
Join the Conversation #SP2013Angular @DanielSmon

7. SharePoint or Provider Hosted?
SharePoint Hosted
• No external services required
• Declarative / JavaScript only
• User permissions
• Traditionally ‘lower complexity’
only
Provider Hosted
• Separate infrastructure required
• BYO server (.NET, Java, PHP…)
• App permissions (Low/High
Trust)
• Enterprise practices
Relatively easy to create and deploy, so they
are good for small team productivity apps
and business process automation, with
lower complexity business rules.
Choose patterns for developing and hosting
your app for SharePoint
http://msdn.microsoft.com/en-us/
library/office/fp179887(v=office.15).aspx
Join the Conversation #SP2013Angular @DanielSmon

8. Customising SharePoint
Typical SharePoint App
AngularJS
AngularJS in a SharePoint app
Summary

9. Enterprise
practices
Onion Architecture
Model View Controller
Dependency Injection
Join the Conversation #SP2013Angular @DanielSmon
Model
View Controller

10. Join the Conversation #SP2013Angular @DanielSmon

11. Join the Conversation #SP2013Angular @DanielSmon

12. <%-- Section 2 --%>
<div class="accordionTitle" onclick="accordionSections('#divPermissionsWizard');">Share Wizard:</div>
<div id="divPermissionsWizard" class="editSection" style="display:none;">
<%-- Step 1: From my Office? --%>
<div runat="server" id="WizStep1">
<label class="heading">From my Office?</label>
<asp:RadioButtonList runat="server" ID="rdoWizStep1FromMyOffice">
<asp:ListItem Text="Yes" Selected="True" />
<asp:ListItem Text="No" />
</asp:RadioButtonList>
</div> <%-- Step 2: What Office? --%>
<div runat="server" id="WizStep2" visible="false">
<label class="heading">What Office?</label>
<asp:DropDownList runat="server" ID="ddlOffice" DataValueField="ID" DataTextField="DisplayName" />
</div> <%-- Step 3: Audience? --%>
<div runat="server" id="WizStep3" visible="false">
<label class="heading">What Audience?</label>
<asp:RadioButtonList runat="server" ID="rdoWizStep2WhatAudience">
<asp:ListItem Text=“Department" Value=“Department" Selected="True" />
<asp:ListItem Text=“Manager" Value=“Manager" />
</asp:RadioButtonList>
</div>
<%-- Step 4: People/Group selector? --%>
<div runat="server" id="WizStep4" visible="false">
<label class="heading">Select People/Group:</label>
<asp:ListBox runat="server" ID="chkPermissionSelector" class="multiselect“
SelectionMode="Multiple" DataValueField="ADName" DataTextField="DisplayName" />
</div>
<div runat="server" id="WizNavigation" visible="true">
<asp:Button runat="server" ID="cmdNext" OnClick="cmdNext_Click" Text="Next“
OnClientClick="addDropdownListValueToShare('#chkPermissionSelector');" />
<asp:Button runat="server" ID="cmdBack" OnClick="cmdBack_Click" Text="Back" Enabled="false" />
</div>
</div>
Join the Conversation #SP2013Angular @DanielSmon

13. Join the Conversation #SP2013Angular @DanielSmon
function GetModelBasesFromHiddenField() {
var modelBases = null;
var modelBasesValue = $("#hdnModelBases").val();
// Try to parse hidden value if it is present
try {
var modelBases = JSON.parse(modelBasesValue);
} catch (e) {
// Do nothing
}
// If the parsed value is an array, it is probably valid, so return it
if ($.isArray(modelBases)) {
return modelBases
} else {
// If not an array it means that the data is corrupt or missing, so we'll return an empty array
return [];
}
} function UpdateDisplayPrincipals(modelBases, updateHiddenFieldValue) {
// Persist to hidden field if required
if (updateHiddenFieldValue) {
$("#hdnModelBases").val(JSON.stringify(modelBases));
} // Reset existing display
$("#divDisplayPrincipals").html("");
// Populate preview with display names
$.each(modelBases, function (index, modelBase) {
// The text value in the span needs to be html encoded, whereas the ADName must have any backslashes escaped so that they don't get los
t when the javascript is executed
var taggeditem = "<span class='tagged'><span>" + htmlEncode(modelBase.DisplayName) + "</span>" + "<a href='#' class='removeTag' onclick
="removePrincipalsFromShareWith('" + escapeForJsBlock(modelBase.ADName) + "');">x</a></span>";
$(taggeditem).appendTo("#divDisplayPrincipals");
});
}

14. Customising SharePoint
Typical SharePoint App
AngularJS
AngularJS in a SharePoint app
Summary

15. I need a provider hosted app…
• My requirements are too complex for JavaScript
• I have lots of different pages and views
Join the Conversation #SP2013Angular @DanielSmon

16. I really need server side code…
• I do things that need special permissions
• My data source doesn’t have a HTTP endpoint
Join the Conversation #SP2013Angular @DanielSmon

17. Data binding
Dependency Injection
Testing
Routing (deep linking)
Form validation
Localisation
Join the Conversation #SP2013Angular @DanielSmon

18. <!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js" />
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Join the Conversation #SP2013Angular @DanielSmon

19. Join the Conversation #SP2013Angular @DanielSmon

20. Join the Conversation #SP2013Angular @DanielSmon

21. Join the Conversation #SP2013Angular @DanielSmon

22. AngularJS
Project
Structure
http://www.johnpapa.net/angular-growth-structure/
Join the Conversation #SP2013Angular @DanielSmon

23. AngularJS & Browser Support
https://docs.angularjs.org/misc/faq
Join the Conversation #SP2013Angular @DanielSmon

24. Customising SharePoint
Typical SharePoint App
AngularJS
AngularJS in a SharePoint app
Summary

25. Getting Started
Package
Management
Templating
Front-End
Join the Conversation #SP2013Angular @DanielSmon
Build
JavaScript
Testing
The ‘Visual Studio’
way
The ‘Open Source’
way
The ‘long beard’
way
www… File > New
Manually write
minified
well…
Manually write
tests

26. Join the Conversation #SP2013Angular @DanielSmon

27. Installation is in progress (00:00:43)
App failed to install, cleaning up...
Successfully uninstalled the app for SharePoint.
App installation encountered the following errors:
16/10/2014 9:09:47 AM
Join the Conversation #SP2013Angular @DanielSmon
@"Error 1
CorrelationId: f4b334ea-ba13-4c10-9ea0-ee355e1d6ba0
ErrorDetail: There was a problem with activating the app web definition.
ErrorType: App
ErrorTypeName: App Related
ExceptionMessage: Exception from HRESULT: 0x81070964
Source: AppWeb
SourceName: App Web Deployment
Error occurred in deployment step 'Install app for SharePoint': Failed to install app for
SharePoint. Please see the output window for details.
========== Build: 1 succeeded or up-to-date, 0 failed, 0 skipped ==========
========== Deploy: 0 succeeded, 1 failed, 0 skipped ==========

28. Join the Conversation #SP2013Angular @DanielSmon

29. Join the Conversation #SP2013Angular @DanielSmon

30. Join the Conversation #SP2013Angular @DanielSmon

31. Join the Conversation #SP2013Angular @DanielSmon
<PropertyGroup>
<TypeScriptSourceMap>true</TypeScriptSourceMap>
</PropertyGroup>
<Import Project="$(MSBuildExtensionsPath32)Microsoft
VisualStudiov$(VisualStudioVersion)TypeScriptMicr
osoft.TypeScript.targets" />

32. Customising SharePoint
Typical SharePoint App
AngularJS
AngularJS in a SharePoint app
Summary

33. Do you really need server code?
AngularJS – Slick responsive UI
Hot Towel
Bower, Grunt, Gulp, Yeoman

34. Q & A