HTML enhanced for web apps!

Agenda – Day 3

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

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

Custom Directives

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, ... ) { ... }

};

});

<my-directive attribute=“some attribute” ..>

<span>text</span>

<div ng-transclude />

</my-directive>

Demo• Simple Todo Application

• Basic Todo Directive

• Nested Todo Directives

• Tabs Directive

Loading & Saving Data ($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.

});

Loading & Saving Data ($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);

});

};

Demo• Ajax with $http

• Ajax with $resource

Setting up AngularJs App 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

Demo• Yeoman

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

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.

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

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)

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

Questions.. ?

Thank you!