Your SlideShare is downloading. ×
0
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building an End-to-End AngularJS Application

9,488

Published on

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.

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.

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,488
On Slideshare
0
From Embeds
0
Number of Embeds
53
Actions
Shares
0
Downloads
0
Comments
0
Likes
11
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • <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>
  • Transcript

    • 1. Building an End-to-End AngularJS Application Dan Wahlin
    • 2.      
    • 3. The Customer Manager App
    • 4. http://tinyurl.com/CustomerMgr
    • 5. Application Technologies
    • 6. Node.js Express MongoDB ASP.NET Web API SQL Server
    • 7. /api/dataservice/
    • 8. ngAnimate Bootstrap AngularJS ngRoute UI Bootstrap Optional Breeze jQuery GreenSock
    • 9. Application and Code Structure
    • 10.     
    • 11.   
    • 12. angular.module('customersApp').controller('MyController', ['$scope', function ($scope) { $scope.orderby = 'product'; $scope.reverse = false; $scope.ordersTotal = 0.00; $scope.setOrder = function (orderby) { … }; }]);
    • 13. (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
    • 14. Creating Factories and Services
    • 15. customersService modalService customersBreezeService Controllers/Directives Show Modal DialogWork with Data authService
    • 16. (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
    • 17. (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); }());
    • 18. (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
    • 19. Directives and Filters
    • 20. Directives wcOverlay wcUnique Filters nameCityStateFilter nameProductFilter
    • 21.     
    • 22. 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'); }]);
    • 23. 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
    • 24.    if (currentValue === element.val()) { ngModel.$setValidity('unique', unique); }
    • 25.     
    • 26.  <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; }
    • 27. Controllers and Views
    • 28.          
    • 29.    <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>
    • 30. 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' }); }]);
    • 31.        
    • 32.      
    • 33. http://weblogs.asp.net/dwahlin

    ×