Angular training - Day 3 - custom directives, $http, $resource, setup with yeoman, unit testing, best practices

Angular training - Day 3 - custom directives, $http, $resource, setup with yeoman, unit testing, best practices

• 1.
  HTML enhanced forweb apps!
• 2.
  Agenda – Day3  Exercise discussion / QA  Custom Directives  Loading and Saving Data ($http, $resource)  Demo - Setting up app with AngularJS Seed or Yeoman  Unit Testing AngularJS application  Dos and Dont’s – Best Practices  Further Reading – Concepts, capabilities
• 3.
  Custom Directives For any DOM manipulations  Create new HTML components, capabilities & be able to reuse  Allows wrapping 3rd party UI widgets to be included in Angular world  Accepts parameters as primitive values or model objects  Nested directives and transclusion  Multiple directives on same element  Phases –  Compilation phase  Linking phase  Data/functionality sharing between directives via controllers
• 4.
  Custom Directives <my-directiveattribute=“some attribute” ..> angular.module('myModule', []). directive('myDirective', function() { return { restrict: 'A', // < E | A | C | M > template: '<div>...some more markup...</div>', templateUrl: 'my-directive-template.html', replace: false, transclude: true, // < false | true > scope: { // < true | false | {} > 'localFoo': '@foo' // < @ | @attribute> 'localBar': '=info' // < = | =attribute | =? attribute> 'myProp': '&expression' // < & | &attribute > }, controller: function($scope, myDepedencies, ...) {...}, require: 'myOtherDirective' // prefix - < (no prefix) | ? | ^ | ?^ > link: function postLink(scope, iElement, iAttrs, otherController, ... ) { ... } }; }); <span>text</span> <div ng-transclude /> </my-directive>
• 5.
  Demo • SimpleTodo Application • Basic Todo Directive • Nested Todo Directives • Tabs Directive
• 6.
  Loading & SavingData ($http)  Facilitates communication with remote HTTP servers  Basic service - reference here  $http API is based on the deferred/promise APIs exposed by the $q service // Simple GET request example : $http.get('/someUrl'). success(function(data, status, headers, config) { // this callback will be called asynchronously // when the response is available }). error(function(data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error status. });
• 7.
  Loading & SavingData ($resource)  For interacting with Restful backend APIs  Allows to easily perform CRUD operations  Provides higher level of abstraction wrt. $http  Requires ‘ngResource’ module  Reference – here var todo = $resource(rest_end_point +'/todos/:id', urlParam, { get : {method : 'GET', isArray:false}, patch: {method : 'PATCH', params:params} }); }; //Usage todo.patch({'id':selectedTodo.id}, selectedTodo, function(successResponse){ console.log(successResponse); },function(errorResponse){ console.log(errorResponse); }); };
• 8.
  Demo • Ajaxwith $http • Ajax with $resource
• 9.
  Setting up AngularJsApp with Tools  Via AngularJs Seed  https://github.com/angular/angular-seed  Creates directory layout  Basic project outline like scripts, sample modules, tests etc.  Via Yeoman  Reference - https://www.airpair.com/js/using-angularjs-yeoman  Collection of 3 tools – Yo, Grunt & Bower  Yo --> scaffolding, Grunt --> build process, Bower --> app dependencies  It helps in  Create the development environment  Automatic stuffs – reload browser, generating components etc  Minify code, optimizations and packaging
• 10.
  Demo • Yeoman
• 11.
  Unit testing components  Uses Karma as test runner framework  Command line tool to  Spawn web server &  Execute tests in browsers  It’s a nodeJs module, installed through ‘npm’  Uses Jasmine as testing framework  Jasmine provides functions to help with  Structuring your tests  Making assertions  AngularJS provides mocks  Promotes testing individual controllers, services etc.  Reference – here  Sample – Testing a controller
• 12.
  Best Practices In HTML templates/views,  Use Directives for abstracting common markups, extensions  Do not use complex expressions in bindings. Move them to Controllers  Optimize use of bindings. Lesser, the faster your application gets  In Controllers,  Keep them light. Use Services to offload functionality  No DOM manipulations! Delegate them to directives  In Directives,  Prefer using directives as tag names or attributes over classes and comments  Do not use ‘ng-’ prefix for your directives  Create isolate scopes to avoid accidental overrides of properties  Notify Angular about direct changes on DOM, via $scope.$apply  Create modules to group controllers, services, directives etc.  Test (unit & E2E) each component – Services, Controllers, Directives etc.
• 13.
  Best Practices.. Use inject pattern for defining components.  Avoids breakages when minifying  Do not create $ and $$ prefixed APIs  Could lead to collisions with internal components  Prefer ‘data-’ prefix when using directives
• 14.
  Advanced Topics -Further Reading  Concepts  $scope.$apply  Digest Cycle  Scopes in Directives  Services as Providers  Config  Vars  Constants  Custom filters  End to End testing (Protractor)
• 15.
  References  Articles  AngularJS official guide  Use AngularJS to power your application  Why does AngularJS rock?  Rapid prototyping with AngularJs  AngularJs Form Validation  Videos  Official YouTube channel  AngularJs Fundamentals in 60-ish minutes  Writing Directives  Introduction to AngularJs Unit Testing  End to End testing of AngularJs apps with Protractor
• 16.
  Questions.. ?
• 17.
  Thank you!