Building an End-to-End AngularJS Application
9 likes11,940 views
The document details the development of an end-to-end AngularJS application named 'Customer Manager.' It outlines the application structure, including the use of various technologies such as Node.js, Express, and MongoDB, as well as implementation details of controllers, services, and directives. Additionally, it covers routing configurations and modals to enhance user interaction within the application.
![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)
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>