@lestersconyers #spsevents #spsphx SPS EVENTS PHX SharePoint and Angular Sitting in a Tree… LESTER SCONYERS

@lestersconyers #spsevents #spsphx Thank you sponsors GoldSilverBronze

@lestersconyers #spsevents #spsphx SharePint Come socialize with the speakers and attendees Meet us at Thirsty Tempe Marketplace immediately after SPSPHX Reservations under SharePoint Saturday

@lestersconyers #spsevents #spsphx AZ SharePoint Pros User Group  Meets monthly on the 1 st Wednesday  6:00pm – 8:00 pm  Located at Interface Technical training (Central Ave. just north of Thomas)  Great SharePoint topics and free pizza  Stop by the booth and join our mailing list for up to date info 

@lestersconyers #spsevents #spsphx About Me Lester Sconyers  Senior Consultant with Neudesic  Local to Phoenix  7+ years as a SharePoint Developer  Vice President of AZ SharePoint Pros User Group  

@lestersconyers #spsevents #spsphx What we’ll cover today  Introduction to AngularJS  AngularJS Basics  Getting Started with AngularJS in SharePoint  Building an AngularJS app  Let’s go off-road!

@lestersconyers #spsevents #spsphx “ ” AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology. HTTPS :// DOCS. ANGULARJS. ORG / GUIDE / INTRODUCTION What is AngularJS

@lestersconyers #spsevents #spsphx AngularJS Basics  Model: Your data  View: What the user sees (HTML UI)  Controller: Your business logic MVC

@lestersconyers #spsevents #spsphx AngularJS Basics Templating  Leverages HTML to build a dynamic View for Model Data Binding  Keeps user entered data synchronized with Model (2-way binding)

@lestersconyers #spsevents #spsphx AngularJS Basics Demo

@lestersconyers #spsevents #spsphx AngularJS Basics Scope  “Scope is the glue between application controller and the view”  $scope is the Model Directives  DOM attributes that contain instructions for the Angular compiler  ngBind: “Insert this model property in this element”  ngModel: “Insert and monitor this model property for this input”  ngRepeat: “Render this HTML block for each item in an Array”

@lestersconyers #spsevents #spsphx How to get started in SharePoint 1. Reference JavaScript files 2. Add data-ng-app to a root element (consider adding to the SharePoint:SPHtmlTag for IE9 support!) 3. Create view (if pasting into a rich text editor, use data-ng-* instead of ng-*) 4. Create controller 5. Get model data

@lestersconyers #spsevents #spsphx How to get started in SharePoint  SharePoint App  Webpart  Application page  Content Editor web part**  Rich text editor Deploying your code

@lestersconyers #spsevents #spsphx Building an AngularJS app Demo

@lestersconyers #spsevents #spsphx What we covered today  AngularJS is a JavaScript framework that allows you to rapidly build applications using an MVC design pattern  An AngularJS template is a block of HTML  AngularJS provides 2 way binding which synchronizes data between the model and view  $scope is your Model (kinda)  Directives are instructions for the behavior of AngularJS’s compiler  AngularJS can be leveraged in SharePoint…just like any other web application

@lestersconyers #spsevents #spsphx Questions?

@lestersconyers #spsevents #spsphx Let’s go off-road!