Office 365 Platform - PowerPoint Presentation

Slide1
Slide2

Office 365 Platform

Contextual Apps

Robust O365 API’s

Flexible Tools

Documents

People | Groups

Mail

Tasks

Calendars

REST

Web ServicesSlide3

SharePoint 2013 Apps with AngularJSJeremy ThakeVP of Global Product InnovationAvePoint Inc.

SPC408Slide4

Speaker

Jeremy Thake

Author

AvePoint

Meetings

VP of Global Product Innovation

@jthake www.jeremythake.com Slide5

AgendaWhy AngularJSIntro to AngularJSGetting Started In SharePointCompleteMe AppTips & TricksSlide6

Why AngularJSSlide7
Slide8

Jan 2010Slide9

~600 contributors~2,500 PRsCommunitySlide10

14 CoreSlide11

thinksterSlide12
Slide13

Trend: 2009-2013Slide14
Slide15

3 weeks

with Angular

1,500 LOC

6 monthsx 3 devs

Before17,000 LOC

feedbackSlide16

Handles the DOM and AJAX glueSlide17

Well defined structureSlide18

Everything to build a CRUD appSlide19

TestableSlide20

Model View …

http://

docs.angularjs.org

/guide/conceptsSlide21

Intro to AngularJSSlide22

<

html

ng-app>

<

head

>

<script src=

"lib/angular/angular.js"></script></head>BasicsSlide23

Data Bindinghttp://docs.angularjs.org/guide/

databindingSlide24

<

li

>

NO of phones: {{ phones.length }}</

li>Data BindingSlide25

var

myApp

= angular.module(

'myApp', []);

ModulesSlide26

function

PhoneListCtrl

($scope) {

Scope

$

scope

.

phones =

[ {"name": "Nexus S", "snippet": "Fast just got faster with Nexus S."}, {"name": "Motorola XOOM™ with Wi-Fi”} ];}Slide27

<

body

ng-controller="PhoneListCtrl">

<

ul

>

<

li ng-repeat="phone in phones"> {{phone.name}} <p>{{phone.snippet}}</p> </li></ul>ControllersSlide28

DEMO:Angular 101http://jsfiddle.net/jthake/2RPr5/Slide29

<

edit-in-place

value="contact.name"></edit-in-place

>Directives

app

.

directive

(

'editInPlace', function() {Slide30

DEMO: Inline Editing Directivehttp://jsfiddle.net/jthake/TVF5K/Slide31

myApp

.

service

('helloWorldFromService', function

() { this

.sayHello = function ()

{ return "Hello, World!"

};});

Defining ServicesSlide32

function

MyCtrl

($scope, helloWorldFromService)

{ $scope.hellos

= [helloWorldFromService.sayHello()];

}Calling ServicesSlide33

DEMO:Services, Factories, Providershttp://jsfiddle.net/jthake/Vb4Bb/Slide34

DEMO:Todo Apphttp://jsfiddle.net/jthake/Mvk4B/Slide35

DEMO:Broadcastinghttp://jsfiddle.net/jthake/35KTY/Slide36

DEMO:Animationhttp://jsfiddle.net/simpulton/EMA5X/Slide37

Getting StartedIn SharePointSlide38

<

asp

:

Content ContentPlaceHolderID="PlaceHolderMain

" runat="server">

<

div

ng

-app="myApp">Different Setup

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>Slide39

CompleteMeSlide40

DEMO:Intro to CompleteMe AppSlide41

ControllersSlide42

myApp

.

controller

('TodoCtrl', function

TodoCtrl($scope, SharePointJSOMService

) {Minification

myApp

.

controller

('TodoCtrl', ['$scope', 'SharePointJSOMService', function ($scope, SharePointJSOMService) {Slide43

App.directive

('load',

function

() {return { replace: true,

restrict: 'E', templateUrl: "inc/

header.html"};Directive inline template workaroundsSlide44

template

:

'<div ng-hide="isDeleted">' +

' <div class="col-md-12 col-xs-12" ng-show="editMode" >' +

' <form class="form-inline" role="form">' + ' <div class="

checkbox">' +Directive inline template workaroundsSlide45

compile

:

function (tElement, tAttrs

) { JSRequest.

EnsureSetup(); hostweburl =

decodeURIComponent(JSRequest.QueryString["

SPHostUrl"]); var

siteUrl = hostweburl;

var tplURL = siteUrl + '/Complete%20Me/Pages/template.html';Directive compile workaroundsSlide46

return

{ pre: function

preLink(scope, iElement,

iAttrs, controller) {

templateLoader.then(function

(templateText) {

iElement.html($compile(

tElement.html())(scope)); }); var previousValue; scope.edit = function () {Can’t use link: function in directiveSlide47

DEMO:CompleteMe ControllersSlide48

ServicesSlide49

DEMO:CompleteMe SharePoint ServicesSlide50

DEMO:CompleteMe Dependency InjectionSlide51

DEMO:CompleteMe Automated TestingSlide52

TIPs n TRICKSSlide53

1. UI BootstrapSlide54

Grid LayoutSlide55

FormsSlide56

ControlsSlide57

DEMO:CompleteMe Responsive UISlide58

2. Responsive App PartSlide59

DEMO:CompleteMe App PartSlide60

3. People PickerSlide61

People Picker Controlhttp://code.msdn.microsoft.com/office/SharePoint-2013-Add-the-900e0742 Slide62

DEMO:People PickerSlide63

4. moment.jsSlide64

DEMO:moment.jsSlide65

5. Visual Studio OnlineSlide66

Wrapping upSlide67

What did we learn?Why AngularJSIntro to AngularJSGetting Started In SharePointCompleteMe AppTips & TricksSlide68

Next StepsCheck out ng-conf for AngularJS training contentInvestigate CompleteMe source codeTrack my RSS feedSlide69

Explore

our new Preview APIs

In-depth

articles

on MSDN

Subject to change; not for production use

Connect

with the communitySpeak your mind at

OfficeSPDev.UserVoice.ComSolve your roadblocks on StackOverflow

[Office] and [SharePoint]Build using our toolsUnleash your development skills with Office Dev Tools for Visual Studio 2013 and Office 365 API Tools for Visual Studio 2013Calls to ActionSlide70

MySPC

Sponsored by

connect.

reimagine.

transform.

Evaluate sessions

on

MySPC

using your

laptop or mobile device:

m

yspc.sharepointconference.comSlide71

©

2014

Microsoft Corporation. All rights reserved. Microsoft, Windows,

and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.