Understanding AngularJS and SharePoint Integration

undefined
 
AngularJS and SharePoint I
Chris Douglas
Senior SharePoint Developer
ECS
Email:    chris@douglasweb.com
Web:     www.douglasweb.com
Twitter:  @CigarDoug
 
SharePoint 80/20
 
SharePoint Elevator Speech
80% of requirements out of the box
20% require custom development
Server side: Visual Studio, WSP solution
Client side: SharePoint Designer, HTML/CSS/JavaScript
 
OOTB SharePoint List
 
Create a custom list
Add fields
Add views
View/Add/Edit/Delete already built in
All Users see all fields
All Users see all records
 
SharePoint Custom Development
 
How do we deliver that 20%?
Server side: Visual Studio, WSP solution
Client side: SharePoint Designer, HTML/CSS/JavaScript
Third party hosting and Office 365
 
What is AngularJS
 
 JavaScript Library
 Similar to JQuery
 AngularJS vs. Angular 2, 3, 4
 Model-View-Controller
 
Single Page Application
 
What will our app do
 
Read a SharePoint List
Show different views
Search and Filter
Read a SharePoint Item
Add/Edit/Delete an Item
 
What do we need to do
 
Download JavaScript Libraries
Create a SharePoint List
Create a Site Page
Create HTML, CSS, and JS files
 
SharePoint REST API
 
REST: Representational State Transfer
Queries a data source with a URL
Returns XML or JSON
Facebook, Twitter, LinkedIn, SharePoint
Displays in a browser
JSON: JavasScript Object Notation
XML based
User friendly
Strongly typed
 
Web site: www.douglasweb.com
 
SharePoint List
Site Assets
Site Page
Content Editor Web Part
Single Page Application
Fragment Identifier
SPSDemo.aspx
Requests.html
List.html/Display.html/Edit.html
 
AngularJS Components
 
Requests.html
Requests.js
List.html
Requests.List.js
Display.html
Edit.html
Requests.Item.js
undefined
 
Questions
 
 
Email:             chris@douglasweb.com
Web:              www.douglasweb.com
Download:    SPSApplication.zip
Twitter:           @
CigarDoug
YouTube:
http://www.tinyurl.com/CigarDougVideos
undefined
Slide Note
Embed
Share

In this detailed overview of AngularJS and SharePoint integration by Chris Douglas, a Senior SharePoint Developer, topics include leveraging SharePoint's out-of-the-box features, custom development needs, AngularJS functionalities, and utilizing SharePoint's REST API. The content covers creating custom SharePoint lists, single-page applications, utilizing SharePoint's REST API, and providing insights into delivering custom development solutions for SharePoint.


Uploaded on Aug 08, 2024 | 0 Views


Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

E N D

Presentation Transcript


  1. AngularJS and SharePoint I Chris Douglas Senior SharePoint Developer ECS Email: Web: Twitter: @CigarDoug chris@douglasweb.com www.douglasweb.com

  2. SharePoint 80/20 SharePoint Elevator Speech 80% of requirements out of the box 20% require custom development Server side: Visual Studio, WSP solution Client side: SharePoint Designer, HTML/CSS/JavaScript

  3. OOTB SharePoint List Create a custom list Add fields Add views View/Add/Edit/Delete already built in All Users see all fields All Users see all records

  4. SharePoint Custom Development How do we deliver that 20%? Server side: Visual Studio, WSP solution Client side: SharePoint Designer, HTML/CSS/JavaScript Third party hosting and Office 365

  5. What is AngularJS JavaScript Library Similar to JQuery AngularJS vs. Angular 2, 3, 4 Model-View-Controller

  6. Single Page Application What will our app do What do we need to do Read a SharePoint List Download JavaScript Libraries Show different views Create a SharePoint List Search and Filter Create a Site Page Read a SharePoint Item Create HTML, CSS, and JS files Add/Edit/Delete an Item

  7. SharePoint REST API REST: Representational State Transfer Queries a data source with a URL Returns XML or JSON Facebook, Twitter, LinkedIn, SharePoint Displays in a browser JSON: JavasScript Object Notation XML based User friendly Strongly typed

  8. Web site: www.douglasweb.com SPSDemo.aspx SharePoint List Site Assets Site Page Content Editor Web Part Single Page Application Fragment Identifier Requests.html List.html/Display.html/Edit.html

  9. AngularJS Components Requests.html Requests.js List.html Requests.List.js Display.html Edit.html Requests.Item.js

  10. Email: Web: Download: Twitter: YouTube: http://www.tinyurl.com/CigarDougVideos chris@douglasweb.com www.douglasweb.com SPSApplication.zip @CigarDoug Questions

  11. SPSVB Sponsors Platinum Gold Silver

Related


More Related Content

giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#