AngularJS
class: center, middle .title[  ] --- class: center middle .title[ # Modules ] .left[ ##Creation ```js /*var myMod = */angular.module('myModule', [ 'dep1', 'dep2',/* ... */ 'depN']); ``` ] .left[ ##Retrieval ```js /*var myMod = */angular.module('myModule'); ``` ] .left[ ##Configuration ```js angular.module('myModule', []) .config(function(injectables){ /* provider-injector */}) .run(function(injectables){ /* instance-injector */}) .value('a', 123) .factory('a', function() { return 123; }) .directive('directiveName', ...) .filter('filterName', ...) /*...*/; ``` ] --- class: center, middle .title[ # Injector ] .left[ ##In Angular apps most of the objects are instantiated and wired together automatically by the ***injector service***. ```js var $injector = angular.injector(); // inferred (only works if code not minified/obfuscated) $injector.invoke(function(serviceA){}); // annotated function explicit(serviceA) {}; explicit.$inject = ['serviceA']; $injector.invoke(explicit); // inline $injector.invoke(['serviceA', function(serviceA){}]); ``` ] .left[ ##The injector creates two types of objects, ***services*** and ***specialized objects***. ] --- class: center middle .title[ # Services ## The injector needs to know how to create these objects. ##You tell it by registering a "recipe" for creating your object with the injector. ] .left[ - ###Value - ###Factory - ###Service - ###Provider - ###Constant ] --- class: center, middle .title[ # Service "Value" ] .left[ ```js myModule.value('labId', 'FL5'); ``` ```js myModule.controller('MyCtrl', function ( $scope, labId ) { $scope.lab_id = labId; }) ``` ```html <div ng-controller="MyCtrl"> Lab ID: <span> {{ lab_id }} </span> </div> ``` ] --- class: center, middle .title[ # Service "Factory" ] .left[ ```js myModule.factory('labInfo', function ( /* injectables */ ) { return { labId : 'FL5' } }); ``` ```js myModule.controller('MyCtrl', function ( $scope, labInfo ) { $scope.labInfo = labInfo; }) ``` ```html <div ng-controller="MyCtrl"> Lab ID: <span> {{ labInfo.labId }} </span> </div> ``` ] --- class: center middle .title[ # Service "Service" ] .left[ ```js myModule.service('labInfo', function ( /* injectables */ ) { this.labId : 'FL5' }); ``` ```js myModule.controller('MyCtrl', function ( $scope, labInfo ) { $scope.labInfo = labInfo; }) ``` ```html <div ng-controller="MyCtrl"> Lab ID: <span> {{ labInfo.labId }} </span> </div> ``` ] --- class: center, middle .title[ # Service "Provider" ] .left[ ```js myModule.provider('labInfo', function () { var _prefix = ''; this.setPrefix = function ( pref ) { _prefix = pref; }; this.$get = function ( /* injectables */ ) { return { labId : _prefix + 'FL5' } } }); ``` ```js myModule.controller('MyCtrl', function ( $scope, labInfo ) { $scope.labInfo = labInfo; }) ``` ```html <div ng-controller="MyCtrl"> Lab ID: <span> {{ labInfo.labId }} </span> </div> ``` ] --- class: center, middle .title[ # Module Config ] .left[ ```js angular.module('myModule', []). .value('a', 123) .factory('a', function() { return 123; }) .directive('directiveName', ...) .filter('filterName', ...); // is same as angular.module('myModule', []). config(function($provide, $compileProvider, $filterProvider) { $provide.value('a', 123); $provide.factory('a', function() { return 123; }); $compileProvider.directive('directiveName', ...); $filterProvider.register('filterName', ...); }); }); ``` ] --- class: center, middle .title[ # Module Config ] .left[ ```js myModule.provider('labInfo', function () { var _prefix = ''; this.setPrefix = function ( pref ) { _prefix = pref; }; this.$get = function ( /* injectables */ ) { return { labId : _prefix + 'FL5' } } }); ``` ] .left[ ```js myModule.config(function (labInfoProvider) { labInfoProvider.setPrefix('epam_'); }); ``` ] --- class: center, middle .title[ # Built-in Providers ] .left.img-wrap-50[ ```js $anchorScrollProvider $animateProvider $compileProvider $controllerProvider $filterProvider *$httpProvider $interpolateProvider $locationProvider $logProvider $parseProvider $qProvider $rootScopeProvider $sceDelegateProvider $sceProvider $templateRequestProvider ``` ] --- class: center, middle .title[ # $http service ] .left[ ## Basic Usage ] .left[ ```js $http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // this callback will be called asynchronously // when the response is available }, function errorCallback(response) { // called asynchronously if an error occurs // or server returns response with an error status. }); ``` ] .left[ ### Shortcut methods ] .left[ ```js $http.get('/someUrl', config).then(successCallback, errorCallback); $http.post('/someUrl', data, config).then(successCallback, errorCallback); ``` ] --- class: center, middle .title[ # $http service ] .left[ ## Response object ] .left[ ```js { data, // – {string|Object} – The response body transformed with the transform functions. status, // – {number} – HTTP status code of the response. headers, // – {function([headerName])} – Header getter function. config, // – {Object} – The configuration object that was used to generate the request. statusText, // – {string} – HTTP status text of the response. } ``` ] --- class: center, middle .title[ # UI Router ] .left[ ### Angular UI-Router is a client-side Single Page Application routing framework for AngularJS. ### Routing frameworks for SPAs update the browser's URL as the user navigates through the app. Conversely, this allows changes to the browser's URL to drive navigation through the app, thus allowing the user to create a bookmark to a location deep within the SPA. ### UI-Router applications are modeled as a hierarchical tree of states. ] --- class: center, middle .title[ # UI Router ] # Setup .left[ ```html <div ui-view></div> ``` ] .left[ ```js myModule.config(function($stateProvider) { $stateProvider .state('state1', { url: "/state1", templateUrl: "partials/state1.html" }) .state('state1.list', { url: "/list", templateUrl: "partials/state1.list.html", controller: function($scope) { $scope.items = ["A", "List", "Of", "Items"]; } }); }); ``` ] --- class: center, middle .title[ # UI Router ] # Activating a state .left[ - Call ``` $state.go() ```. High-level convenience method. - Click a link containing the ``` ui-sref ``` directive. - Navigate to the url associated with the state. ] --- class: center, middle .title[ # UI Router ] # State Change Events ### All these events are fired at the $rootScope level. .left[ ```js $rootScope.$on( 'eventName', function(event, toState, toParams, fromState, fromParams, options){ ///... } ); ``` - ```$stateChangeStart``` - fired when the transition begins. - ```$stateChangeSuccess``` - fired once the state transition is complete. - ```$stateChangeError``` - fired when an error occurs during transition. ] --- # Related resources - [AngularJS API Reference](https://docs.angularjs.org/api) - [Angular UI Router](https://github.com/angular-ui/ui-router) - [Angular 1 Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md)
