author avepoint meetings senior product marketing manager – office
TRANSCRIPT
Jeremy ThakeSenior Marketing Manager – Office Division
SharePoint 2013 Apps with AngularJS
2-570
Speaker
Jeremy Thake
Author
AvePoint Meetings
Senior Product Marketing Manager – Office
@jthake www.jeremythake.com
Why AngularJSIntro to AngularJSGetting Started In SharePointCompleteMe AppTips & Tricks
Agenda
Why AngularJS
Jan 2010
~600 contributors~2,500 PRs
Community
14 Core
thinkster
Trend: 2009-2013
3 weeks
with Angular
1,500 LOC
6 monthsx 3 devs
Before
17,000 LOC
feedback
Handles the DOM and AJAX glue
Well defined structure
Everything to build a CRUD app
Testable
Model View …
http://docs.angularjs.org/guide/concepts
Intro to AngularJS
<html ng-app>
<head> <script src="lib/angular/angular.js"></script></head>
Basics
Data Binding
http://docs.angularjs.org/guide/databinding
<li>NO of phones: {{ phones.length }}</li>
Data Binding
var myApp = angular.module('myApp', []);
Modules
function PhoneListCtrl($scope) {
Scope
$scope.phones = [ {"name": "Nexus S", "snippet": "Fast just got faster with Nexus S."}, {"name": "Motorola XOOM™ with Wi-Fi”}
];}
<body ng-controller="PhoneListCtrl">
<ul> <li ng-repeat="phone in phones"> {{phone.name}} <p>{{phone.snippet}}</p> </li></ul>
Controllers
DEMO:Angular 101
http://jsfiddle.net/jthake/2RPr5/
<edit-in-place value="contact.name"></edit-in-place>
Directives
app.directive( 'editInPlace', function() {
DEMO: Inline Editing Directivehttp://jsfiddle.net/jthake/TVF5K/
myApp.service('helloWorldFromService', function () { this.sayHello = function () { return "Hello, World!" };});
Defining Services
function MyCtrl($scope, helloWorldFromService) { $scope.hellos = [helloWorldFromService.sayHello()];}
Calling Services
DEMO:Services, Factories, Providershttp://jsfiddle.net/jthake/Vb4Bb/
DEMO:Todo App
http://jsfiddle.net/jthake/Mvk4B/
DEMO:Broadcasting
http://jsfiddle.net/jthake/35KTY/
DEMO:Animation
http://jsfiddle.net/simpulton/EMA5X/
Getting StartedIn SharePoint
<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>
CompleteMe
DEMO:Intro to CompleteMe App
Controllers
myApp.controller('TodoCtrl', function TodoCtrl($scope, SharePointJSOMService) {
Minification
myApp.controller('TodoCtrl', ['$scope', 'SharePointJSOMService', function ($scope, SharePointJSOMService) {
App.directive('load', function() {return { replace: true, restrict: 'E', templateUrl: "inc/header.html"};
Directive inline template workarounds
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 workarounds
compile: function (tElement, tAttrs) { JSRequest.EnsureSetup(); hostweburl = decodeURIComponent(JSRequest.QueryString["SPHostUrl"]); var siteUrl = hostweburl; var tplURL = siteUrl + '/Complete%20Me/Pages/template.html';
Directive compile workarounds
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 directive
DEMO:CompleteMe Controllers
Services
DEMO:CompleteMe SharePoint Services
DEMO:CompleteMe Dependency Injection
DEMO:CompleteMe Automated Testing
TIPs n TRICKS
1. UI Bootstrap
Grid Layout
Forms
Controls
DEMO:CompleteMe Responsive UI
2. Responsive App Part
DEMO:CompleteMe App Part
3. People Picker
People Picker Control
http://code.msdn.microsoft.com/office/SharePoint-2013-Add-the-900e0742
DEMO:People Picker
4. moment.js
DEMO:moment.js
5. Visual Studio Online
Wrapping up
What did we learn?Why AngularJSIntro to AngularJSGetting Started In SharePointCompleteMe AppTips & Tricks
Next StepsCheck out ng-conf for AngularJS training contentInvestigate CompleteMe source codeTrack my RSS feed
Explore our new Preview APIs
In-depth articles on MSDNSubject to change; not for production use
Connect with the community
Speak 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 2013
Calls to Action
Your Feedback is Important
Fill out an evaluation of this session and help shape future events.
Scan the QR code to evaluate this session on your mobile device.
You’ll also be entered into a daily prize drawing!
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.