Apps development using KnockoutJS and AngularJS in CSOM

I did some research on JavaScript frameworks and can see that Microsoft TypeScript, Knockout.js and AngularJS keep coming up on various talks around Windows 8, Windows Phone 8 and general web development.

I decided to explore how I could take concepts from both to have the AngularJS Todo sample loading from a SharePoint Task List in the Host Web (ghettoweb) rather than the App Web.

From a net new Visual Studio 2013 project, you simply need to add the angular.min.js file to your scripts folder and add a reference to it on your default.aspx page.

The way that AngularJS hooks up to your default.aspx HTML code which essentially becomes your view is by some attributes on HTML elements. The nice part about this is that I am not writing in JavaScript how the View is going to look, very similar to ASP.NET MVC approach. I can actually write standard HTML without throwing it all in one big string in JavaScript.

Then if you open up your app.js file you can paste these blocks into it which I’ll explain in sections.

I declare all of the objects that are commonly used at the top of the App.js, I need to discuss more with the JavaScript peeps on best practices here on whether I should declare some of the other objects that I use in sections below up here or not.

In this section, this is where the AngularJS Controller is declared. The function maps directly to the HTML element ‘ng-controller’ attribute value. The $scope (the model) is very important and is used by the view and populated by the controller. You can see I have added a $scope.todos collection and the HTML View iterates through this collection using the HTML attribute ‘ng-repeat’.
You will also notice that I have various functions that map to a AngularJS service (next code section) to keep the controller relatively clean. Again some of these functions like AddTask are mapped in the View. Contructs like the remaining value that is in the View are calculated in the Controller below.

The ability of writing AngularJS Services means that you can really separate out the logic nicely rather than one big horrible JavaScript file. Technically the Controller and all the Services can be in different JavaScript files.

This block gets the SharePoint Tasks from the Host web Task List. Calling the Host web is a little more complex due to cross domain calls than calling the App web, there are some great samples that explain all this. For the $scope to retain I found that I had to use inline Delegates rather than calling out to a function, which makes the JavaScript a little too nested for my liking, I need to research how I can clean this up more…although I’m not sure I even like the chaining of function calls into function calls either?!?!

The Add Task function calls the SharePoint CSOM code up to the Host web to add a new task and notice how I use $scope.todos.push to add a new object to the collection and this will automatically update the View, I don’t have to rewrite the HTML on the screen.

The Archive Task function calls CSOM again to delete the completed tasks from the SharePoint list.

I only used one common function here, but I’ve already noticed that people like Andrew Connell are creating these in separate JavaScript files to make them reusable across projects.

I hope you found this sample useful, I certainly enjoyed pushing myself into the unknown and leveraging AngularJS. I will continue to build on this sample as I improve the UX to Update an exist task and set things more than just the title etc.

I have uploaded the completed app withUbertTaskListAngularApp as a Visual Studio 2013 project. I’d love to hear from JavaScript guys on anything I can do to improve this more too!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s