Transcript Document
SPS EVENTS PHX SharePoint and Angular Sitting in a Tree… LESTER SCONYERS @lestersconyers #spsevents #spsphx Thank you sponsors Gold Silver Bronze @lestersconyers #spsevents #spsphx SharePint Come socialize with the speakers and attendees Meet us at Thirsty Lion @ Tempe Marketplace immediately after SPSPHX Reservations under SharePoint Saturday @lestersconyers #spsevents #spsphx AZ SharePoint Pros User Group Meets monthly on the 1st 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 http://www.azsharepointpros.com @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 http://www.lestersconyers.com @lestersconyers [email protected] @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 What is AngularJS “ 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 ” @lestersconyers #spsevents #spsphx AngularJS Basics MVC Model: Your data View: What the user sees (HTML UI) Controller: Your business logic @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 Directives “Scope is the glue between application controller and the view” DOM attributes that contain instructions for the Angular compiler $scope is the Model 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 Deploying your code SharePoint App Webpart Application page Content Editor web part** Rich text editor @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! @lestersconyers #spsevents #spsphx