(function () {
var app = angular.module('modCigars', ["modSPDataServices", "ngRoute"]);
}()); // end function
The Configuration component controls AngularJS behavior for the entire module. Here it uses the routeProvider class to determine which .html file is loaded. This gives us the single-page application capability.
//
// Configuration
//
app.config( ["$locationProvider", "$routeProvider", function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix("");
$routeProvider
.when("/", {
templateUrl: "../SiteAssets/Cigars/List.html",
controller: "Cigars",
controllerAs: "vm"
})
.when("/Display/:ItemID", {
templateUrl: "../SiteAssets/Cigars/Display.html",
controller: "Cigar",
controllerAs: "vm"
})
.when("/Edit/:ItemID", {
templateUrl: "../SiteAssets/Cigars/Edit.html",
controller: "Cigar",
controllerAs: "vm"
})
.when("/New", {
templateUrl: "../SiteAssets/Cigars/Edit.html",
controller: "Cigar",
controllerAs: "vm"
})
.otherwise( {
template: "<h2>This is not a valid selection.</h2>"
})
}]); // end app.config( ["$locationProvider", "$routeProvider", function($locationProvider, $routeProvider) {$locationProvider.hashPrefix("");
The .when command examines the hash portion of the URL and assigns a URL and controller accordingly. Thus, when the URL ends in "/" (no hashes), the List.html file is displayed within the placeholder on Cigars.html:
<div ng-app="modCigars">
<div ng-view=""></div>
</div>
The Cigar Controller is used by Display.html and Edit.html to retrieve a single List Item from the Cigars list and display it on the page. Edit.html is used without an Item ID to create a new List Item.
//
// Cigar Controller
//
app.controller("Cigar", ["$q", "$log", "$routeParams", "SPDataServices",
function ($q, $log, $routeParams, SPDataServices) {
var vm = this;
var listItemID = $routeParams.ItemID;
var Controls = [vm.Manufacturer, vm.Title, vm.Size, vm.Origin, vm.Source, vm.Price, vm.Rating];
vm.fields = ["ID", "Manufacturer", "Title", "Size", "Origin", "Source", "Price", "Rating"];
var savedFields = ["Manufacturer", "Size", "Origin", "Source", "Price", "Rating"];
if (listItemID) {
SPDataServices.getListItem("Cigars", listItemID, vm.fields)
.then( function(result) {
vm.Manufacturer = result.get_item("Manufacturer")
vm.Title = result.get_item("Title")
vm.Size = result.get_item("Size")
vm.Origin = result.get_item("Origin")
vm.Source = result.get_item("Source")
vm.Price = result.get_item("Price")
vm.Rating = result.get_item("Rating")
})
.catch( function(failure) {
vm.message = failure;
console.log(failure);
});
} else {
var txtTitle = document.getElementById("txtTitle")
if (txtTitle) {
txtTitle.focus();
}
}
vm.editButtonClick = function () {
window.location.href = "#Edit/" + listItemID;
}
vm.closeButtonClick = function () {
window.location.href = "#";
}
vm.saveButtonClick = function () {
vm.Size = new Date(vm.Size).toISOString();
vm.Origin= new Date(vm.Origin).toISOString();
if (window.location.hash == "#/New") {
SPDataServices.addListItem("Cigars", savedFields,
[vm.Manufacturer, vm.Size, vm.Origin, vm.Source, vm.Price, vm.Rating])
.then(function(result) {
window.location.href = "#";
});
} else {
SPDataServices.saveListItem("Cigars", listItemID, savedFields,
[vm.Manufacturer, vm.Size, vm.Origin, vm.Source, vm.Price, vm.Rating])
.then(function(result) {
window.location.href = "#";
});
}
}
vm.cancelButtonClick = function () {
window.location.href = "#";
}
}]); // end app.controller("Cigar", ["$q", "$log", "$routeParams", "SPDataServices", function ($q, $log, $routeParams, SPDataServices)
The Cigars Controller is used by List.html to retrieve a collection of List Items from the Cigars list and display it on the page.
//
// Cigars Controller
//
app.controller("Cigars", ['$q', "$log", "SPDataServices",
function ($q, $log, SPDataServices) {
var vm = this;
console.log("Cigars?");
var queryString = "<View><Query>" +
"<OrderBy><FieldRef Name='Title'/></OrderBy>" +
"<Where>" +
"<Eq><FieldRef Name='Rating'></FieldRef><Value Type='Number'>5</Value></Eq>" +
"</Where>" +
"</Query></View>";
var Controls = [vm.Manufacturer, vm.Title, vm.Size, vm.Origin, vm.Source, vm.Price, vm.Rating];
vm.fields = ["ID", "Manufacturer", "Title", "Size", "Origin", "Source", "Price", "Rating"];
SPDataServices.getListItems("Cigars", queryString, vm.fields)
.then(function(result) {
vm.cigars = result;
})
.catch(function(failure) {
vm.failure = failure;
});
vm.newButtonClick = function () {
window.location.href = "#New";
}
}]); // end app.controller("Cigars", ['$q', "$log", function ($q, $log) {
Display.html
This snippet shows a List Item in display mode.
This is how it is displayed on the page.
Edit.html
