Building an End-to-End AngularJS Application
9 likes11,934 views
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.
![angular.module('customersApp').controller('MyController',
['$scope', function ($scope) {
$scope.orderby = 'product';
$scope.reverse = false;
$scope.ordersTotal = 0.00;
$scope.setOrder = function (orderby) { … };
}]);](https://image.slidesharecdn.com/buildinganend-to-endangularjsapplication-140412195848-phpapp01/85/Building-an-End-to-End-AngularJS-Application-18-320.jpg)
![(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](https://image.slidesharecdn.com/buildinganend-to-endangularjsapplication-140412195848-phpapp01/85/Building-an-End-to-End-AngularJS-Application-19-320.jpg)
![(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](https://image.slidesharecdn.com/buildinganend-to-endangularjsapplication-140412195848-phpapp01/85/Building-an-End-to-End-AngularJS-Application-22-320.jpg)
![(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);
}());](https://image.slidesharecdn.com/buildinganend-to-endangularjsapplication-140412195848-phpapp01/85/Building-an-End-to-End-AngularJS-Application-23-320.jpg)
![(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](https://image.slidesharecdn.com/buildinganend-to-endangularjsapplication-140412195848-phpapp01/85/Building-an-End-to-End-AngularJS-Application-24-320.jpg)
![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');
}]);](https://image.slidesharecdn.com/buildinganend-to-endangularjsapplication-140412195848-phpapp01/85/Building-an-End-to-End-AngularJS-Application-28-320.jpg)
![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' });
}]);](https://image.slidesharecdn.com/buildinganend-to-endangularjsapplication-140412195848-phpapp01/85/Building-an-End-to-End-AngularJS-Application-36-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Building an End-to-End AngularJS Application (20)
Ad
More from Dan Wahlin (7)
Ad
Recently uploaded (20)
Building an End-to-End AngularJS Application
- 1. Building an End-to-End AngularJS Application Dan Wahlin
- 4.
- 5. The Customer Manager App
- 11. ngAnimate Bootstrap AngularJS ngRoute UI Bootstrap Optional Breeze jQuery GreenSock
- 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
- 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
- 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; }
- 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"/> 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.
Editor's Notes
- #38: <divclass="error-container"ng-show="signup_form.username.$dirty && signup_form.username.$invalid"><smallclass="error"ng-show="signup_form.username.$error.required">Please input a username</small><smallclass="error"ng-show="signup_form.username.$error.minlength">Your username is required to be at least 3 characters</small><smallclass="error"ng-show="signup_form.username.$error.maxlength">Your username cannot be longer than 20 characters</small><smallclass="error"ng-show="signup_form.username.$error.unique">That username is taken, please try another</small></div>