Gold Sponsors Bronze SponsorsSilver Sponsors

Portable single page applications with AngularJS in SharePointRoger NobleCTO – Coritsu Group

CTO @• SharePoint design and development

• Business Intelligence

• Web Development

Who am I?

A brief overview…

History of SharePoint Development

A brief overview…

History of SharePoint Development

2007

A brief overview…

History of SharePoint Development

2010

A brief overview…

History of SharePoint Development

2013

1. Provide users with the easiest discovery, purchase, and installation process.

2. Give administrators the safest SharePoint extensions.

3. Provide you with the simplest marketing and sales system based on a Microsoft online app store.

4. Maximize your flexibility in developing future upgrades.

5. Maximize your ability to take advantage of your existing non-SharePoint programming skills.

6. Integrate cloud-based resources in smoother and more flexible ways.

7. Enable your extension to have permissions that are distinct from the permissions of the user who is running the app.

8. Enable you to use cross-platform standards, including HTML, REST, OData, JavaScript, and OAuth.

9. Enable you to take advantage of the SharePoint cross-domain JavaScript library to access SharePoint data. Alternatively, you can use a Microsoft-provided secure token service that is OAuth-compatible or use digital certificates to get authorization to SharePoint data.

Benefits of App Model

http://msdn.microsoft.com/en-us/library/office/jj163114(v=office.15).aspx#AppWhenYouCan)

1. Maximize your ability to take advantage of your existing non-SharePoint programming skills.

2. Integrate cloud-based resources in smoother and more flexible ways.

3. Enable you to use cross-platform standards, including HTML, REST, OData, JavaScript, and OAuth.

Benefits of App Model

http://msdn.microsoft.com/en-us/library/office/jj163114(v=office.15).aspx#AppWhenYouCan)

Flipping server-side code on its head

Use the server as a source of data, rather than generating angle brackets

Get the client to do the work

Browsers are incredibly good at rendering HTML

SPA (Fat client)

JAVASCRIPT!!!

What is AngularJS?

What is AngularJS?

Keep business logic on the server

Move presentation to the client

Two way data-binding

Dependency injection

Basic appdemonstration

Apps are very quick to develop and deploy

Can use existing skills

Can develop outside of SharePoint!!!

Testable

Example…

Why should you care?

Font Awesome

Other useful open source tools

Bootstrap

Other useful open source tools

Google fonts

Other useful open source tools

All togetherdemonstration

Can easily package files into an App using VS

Even lazier, deploy them to a document library

Deployment

Deploymentdemonstration

Use your favourite tool

Develop locally as much as possible

Use tools as much as possible – don’t reinvent the wheel

Reference CDN for speed

Development strategies

Develop offlinedemonstration

Summary • AngularJS allows me to develop faster and produce applications that can be hosted anywhere

• Allows for modular JavaScript that is testable

• There are lots of cool open source tools out there

Questions?Comments?More info

Contact details:roger@coritsu.com

@Roger_Noble

http://rogernoble.com

Related links:

https://angularjs.org/

http://fontawesome.io/

http://angular-ui.github.io/bootstrap/

https://www.google.com/fonts

http://www.coritsu.com

Gold Sponsors Bronze SponsorsSilver Sponsors

Thanks for listeningRemember to submit your feedback so you go in the draw to win prizes at the end of the day