SPS EVENTS PHX

SharePoint and
Angular Sitting in
a Tree
LESTER SCONYERS

@lestersconyers #spsevents

Thank you sponsors

Gold

Silver

Bronze

@lestersconyers #spsevents

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

@lestersconyers #spsevents

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

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

lester.sconyers@neudesic.com

@lestersconyers #spsevents

What well cover today

Introduction to AngularJS

AngularJS Basics

Getting Started with AngularJS in SharePoint

Building an AngularJS app

Lets go off-road!

@lestersconyers #spsevents

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

AngularJS Basics
MVC

Model: Your data

View: What the user sees (HTML UI)

Controller: Your business logic

@lestersconyers #spsevents

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

AngularJS Basics
Demo

@lestersconyers #spsevents

AngularJS Basics
Scope

Scope is the glue between

application controller and the
view

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

$scope is the Model

@lestersconyers #spsevents

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

How to get started in SharePoint

Deploying your code

SharePoint App

Webpart

Application page

Content Editor web part**

Rich text editor

@lestersconyers #spsevents

Building an AngularJS app

Demo

@lestersconyers #spsevents

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 AngularJSs

compiler

AngularJS can be leveraged in SharePointjust like any other

web application

@lestersconyers #spsevents

Questions?

@lestersconyers #spsevents

Lets go off-road!

@lestersconyers #spsevents