This talk discusses how AngularJS can be used to build an end-to-end Customer Manager application. It covers structuring code and files, working with events, XHR interceptors, plus more.

1. Building an End-to-End
AngularJS Application
Dan Wahlin

4. 






5. The Customer Manager App

7. http://tinyurl.com/CustomerMgr

8. Application Technologies

9. Node.js
Express
MongoDB
ASP.NET
Web API
SQL Server

10. /api/dataservice/

11. ngAnimate Bootstrap
AngularJS
ngRoute UI Bootstrap
Optional
Breeze jQuery GreenSock

12. Application and Code
Structure

14. 





15. 



18. angular.module('customersApp').controller('MyController',
['$scope', function ($scope) {
$scope.orderby = 'product';
$scope.reverse = false;
$scope.ordersTotal = 0.00;
$scope.setOrder = function (orderby) { … };
}]);

19. (function() {
var myController = function ($scope) {
$scope.orderby = 'product';
$scope.reverse = false;
$scope.ordersTotal = 0.00;
$scope.setOrder = function (orderby) { … };
init();
function init() { … }
};
myController.$inject = ['$scope'];
angular.module('customersApp'.controller('MyController',
myController);
}());
Focus on your code
Handle minification
Hook function into
AngularjS

20. Creating Factories and
Services

21. customersService modalService
customersBreezeService
Controllers/Directives
Show Modal DialogWork with Data
authService

22. (function () {
var customersService = function ($http, $q) {
var serviceBase = '/api/dataservice/',
customersFactory = {};
customersFactory.getCustomers = function (pageIndex,
pageSize) {
return getPagedResource('customers', pageIndex,
pageSize);
};
return customersFactory;
};
customersService.$inject = ['$http', '$q'];
angular.module('customersService')
.factory('customersService' customersService);
}());
Uses $http to call
RESTful service

23. (function () {
var authFactory = function ($http, $q, $rootScope) {
var serviceBase = '/api/dataservice/',
factory = {
loginPath: '/login',
user: { isAuthenticated: false }
};
factory.login = function (email, password) { };
factory.logout = function () { };
return factory;
};
authFactory.$inject = ['$http', '$q', '$rootScope'];
angular.module('customersApp')
.factory('authService', authFactory);
}());

24. (function () {
var modalService = function ($modal) {
this.showModal = function (customModalDefaults,
customModalOptions) { … };
this.show = function (customModalDefaults,
customModalOptions) {
return $modal.open(tempModalDefaults).result;
};
};
modalService.$inject = ['$modal'];
angular.module('customersApp'.service('modalService',
modalService]);
}());
Provider from UI Bootstrap

25. Directives and Filters

26. Directives
wcOverlay
wcUnique
Filters
nameCityStateFilter
nameProductFilter

27. 





28. var wcDirectivesApp = angular.module('wc.directives', []);
//Empty factory to hook into $httpProvider.interceptors
//Directive will hookup request, response, and responseError
interceptors
wcDirectivesApp.factory('httpInterceptor', function () {
return {};
});
//Hook httpInterceptor factory into the $httpProvider interceptors
so that we can monitor XHR calls
wcDirectivesApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push('httpInterceptor');
}]);

29. function wireUpHttpInterceptor() {
httpInterceptor.request = function (config) {
processRequest();
return config || $q.when(config);
};
httpInterceptor.response = function (response) {
processResponse();
return response || $q.when(response);
};
httpInterceptor.responseError = function (rejection) {
processResponse();
return rejection || $q.when(rejection);
};
}
httpInterceptor injected
into Directive

30. 


if (currentValue === element.val()) {
ngModel.$setValidity('unique', unique);
}

31. 





32. 
<div data-ng-repeat="customer in customers |
nameProductFilter:searchText | orderBy:'lastName'">
…
</div>

function filterCustomers(filterText) {
$scope.filteredCustomers =
$filter("nameCityStateFilter")($scope.customers, filterText);
$scope.filteredCount = $scope.filteredCustomers.length;
}

33. Controllers and Views

34. 










35. 


<div data-ng-view="" id="ng-view"
class="slide-animation"></div>

<div data-wc-overlay="" data-wc-overlay-delay="300">
<img src="/Content/images/spinner.gif"/>
&nbsp;&nbsp;Loading
</div>

36. customersApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/customers', {
controller: 'CustomersController',
templateUrl: '/app/views/customers/customers.html'
})
.when('/customerorders/:customerID', {
controller: 'CustomerOrdersController',
templateUrl: '/app/views/customers/customerOrders.html'
})
.when('/customeredit/:customerID', {
controller: 'CustomerEditController',
templateUrl: '/app/views/customers/customerEdit.html'
})
.when('/orders', {
controller: 'OrdersController',
templateUrl: '/app/views/orders/orders.html'
})
.otherwise({ redirectTo: '/customers' });
}]);

37. 








38. 






39. http://weblogs.asp.net/dwahlin