SharePoint App: Simple Photo Gallery AngularJS

On SharePoint

Today, I will explain in details how to create a SharePoint hosted app using AngularJS Framework, The app itself is a very simple app it contains the following:

Image Library to store your images
App Part loads the Images within the library and displays thumbnails of the images, upon user click the full image will appear in a lightbox.

First step is as usual creating a new Visual Studio Solution and create new Project , select Apps under Office/SharePoint then select App for SharePoint.

Name your App and choose its location.

Secondly , you need to select or enter the sharepoint Site you will use to debug the app it can be a developer site or any other site which have the sideloading feature enabled.
to learn how to enable sideloading feature for any site, check this great post by Alexander Vanwynsberghe

Back to our app, let's create a new app part and name it AlbumViewer.aspx , after the creation of the aspx page, let's make the App Part Angular friendly !

add the AngularJS link

Add the ng-app attribute to HTML tag
Add the ng-controller attribute to our container DIV element
let's add new Javascript file which will act as AngularJS app controller.

The controller will contain three different main functions:

GetItemsREST: utilizes List RESTful APIs to get the image library contents.
GetApplicationConfig: used to read the application settings which the user can edit to control the number of images appears in the app part.
AngularJS app initialization.

Now we need to add reference to the controller JavaScript file to the app part.

Now let's try the app , hitting F5 and waiting , the app will load the default.aspx using it the user can update the item count, by default it's set to 6 items only.

Also in the Default page you will find a link to the PhotoLibrary which is created in the app web to store the user images.