AngularJS - Javascript framework for superheroes

30
A ngularJS Javascript framework for superheroes

description

PDF version of the AngularJS talk @DrupalDaysIT 2014 HTML version: http://wilk.github.io/AngularJS-Javascript-framework-for-superheroes/ Repository: https://github.com/wilk/AngularJS-Javascript-framework-for-superheroes

Transcript of AngularJS - Javascript framework for superheroes

Page 1: AngularJS - Javascript framework for superheroes

AngularJS ­ Javascript framework for superheroes

Page 3: AngularJS - Javascript framework for superheroes

Back in time...... when the dinosaurs rule the Earth

Websites instead of webapps

Client seen as a dumb interface

All the workload handled by the server

No client­side logic

Javascript coders seen as web designers

Page 4: AngularJS - Javascript framework for superheroes

Getting into present days...

AJAX ­ HTML5 ­ CSS3

Web 2.0

Client splitted from server

Lots of new Javascript libraries

Web application

Page 5: AngularJS - Javascript framework for superheroes

Javascript: the answer!

Javascript framework

MVC Architecture

Big web apps

Page 6: AngularJS - Javascript framework for superheroes

A current problem

Too much time

Too much code

Too much stress

Building client­side webapp is still hard

DOM Manipulation

Data validation

Page 7: AngularJS - Javascript framework for superheroes

Angular for the win!Data­binding

Basic templating directives

Form validation

Routing

Reusable components

Dependency injection

Unit­testing

Page 8: AngularJS - Javascript framework for superheroes

BootstrappingLoad HTML DOM

Load the module associated with the directive

Create the application injector

Compile the DOM treating the ng­app directive as the root of the compilation

Page 9: AngularJS - Javascript framework for superheroes

Conceptual Overview1.  The browser loads the HTML and parses it into a DOM

2.  The browser loads angular.js script

3.  Angular waits for DOMContentLoaded event

4.  Angular looks for ng­app directive, which designates the application boundary

5.  The Module specified in ng­app (if any) is used to configure the $injector

6.  The $injector is used to create the $compile service as well as $rootScope

7.  The $compile service is used to compile the DOM and link it with $rootScope

Page 10: AngularJS - Javascript framework for superheroes

HTML CompilerCompiler is an angular service which traverses the DOM looking for attributes

Compile: traverse the DOM and collect all of the directives. The result is a linking function

Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in theview, and any user interactions with the view are reflected in the scope model. This makes the scope model the single

source of truth

Page 11: AngularJS - Javascript framework for superheroes

Conceptual OverviewAlso knows as Model View ­ View Model (MVVM)

Page 12: AngularJS - Javascript framework for superheroes

Scope & ViewThe scope is responsible for detecting changes to the model section and provides the execution

context for expressions

The browser parses the HTML into the DOM, and the DOMbecomes the input to the template engine known as thecompiler. The compiler looks for directives which in turn setup watches on the model. The result is a continuouslyupdating view which does not need template model re­merging. Your model becomes the single source­of­truth foryour view.

Page 13: AngularJS - Javascript framework for superheroes

Example Code

<input type="text" ng-model="yourName" placeholder="Enter a name here"><h1>Hello {{yourName}}!</h1>

Enter a name here

Hello !

Page 14: AngularJS - Javascript framework for superheroes

DirectivesA directive is a behavior or DOM transformation which is triggered by the presence of a customattribute, element name, or a class name. A directive allows you to extend the HTML vocabulary

in a declarative fashion

Page 15: AngularJS - Javascript framework for superheroes

Directives Example

angular.module('Presentation', []) .controller('DirectiveController', ['$scope', function ($scope) { $scope.customer = { name: 'Naomi', address: '1600 Amphitheatre' }; }]) .directive('myCustomer', function () { return { template: '<b>Name</b>: {{customer.name}} <b>Address</b>: {{customer.address}}' }; }); // HTML<div ng-controller="DirectiveController"> <div my-customer></div></div>

Name: Naomi Address: 1600 Amphitheatre

Page 16: AngularJS - Javascript framework for superheroes

FiltersFilters perform data transformation. Typically they are used in conjunction with the locale toformat the data in locale specific output. They follow the spirit of UNIX filters and use similar

syntax | (pipe)

Page 17: AngularJS - Javascript framework for superheroes

Filters Example

<div>Formatted number: {{val | number:2}}</div><div>Your name (in lowercase): {{user.name | lowercase}}</div>

Formatted number:

Enter a name here

Your name (in lowercase):

Page 18: AngularJS - Javascript framework for superheroes

Client­Side Routing$route is used for deep­linking URLs to controllers and views (HTML partials).

It watches $location.url() and tries to map the path to an existing route definition. You candefine routes through $routeProvider's API.

The $route service is typically used in conjunction with the ngView directive and the$routeParams service.

Page 19: AngularJS - Javascript framework for superheroes

Routing Example

angular.module('MyApp', ['ngRoute']) .config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/user/:id', { templateUrl: 'views/user.html', controller: 'UserController' }); }) .controller('UserController', ['$scope', '$route', function ($scope, $route) { $scope.userId = $route.current.params.id; });

Page 20: AngularJS - Javascript framework for superheroes

ServicesAngular services are substitutable objects that are wired together using dependency injection(DI). You can use services to organize and share code across your app.

Angular services are:

Lazily instantiated: Angular only instantiates a service when an application component dependson it

Singletons: Each component dependent on a service gets a reference to the single instancegenerated by the service factory

Angular offers several useful services (like $http), but for most applications you'll also want tocreate your own.

Page 21: AngularJS - Javascript framework for superheroes

Services Example

angular.module('Presentation', []) .service('notify', ['$window', function (window) { var msgs = []; return function (msg) { msgs.push(msg); if (msgs.length > 2) { window.alert(msgs); msgs = []; } }; }) .controller('ServiceController', ['$scope', 'notify', function ($scope, notify) { $scope.notify = notify; }); // HTML<div ng-controller="ServiceController"> <input type="text" ng-init="message='Developers'" ng-model="message"/> <button ng-click="notify(message)") Notify</button></div>

Developers  Notify

Page 22: AngularJS - Javascript framework for superheroes

FormForm is simply a group of controls. Angular gives state to each of them, such as pristine, dirty, valid, invalid

Angular form creates an instance of FormController. FormController itself has methods and properties:

formName.$pristine: TRUE if the user has not interacted with the form yet

formName.$dirty: TRUE if the user has already interacted with the form.

formName.$valid: TRUE if all containing form and controls are valid

formName.$invalid: TRUE if at least one containing form and control is invalid.

formName.$error: Is an object hash, containing references to all invalid controls or forms

Page 23: AngularJS - Javascript framework for superheroes

Form StatesIt is important to understand flow of the form states in order to use angular form properly. This flow gives you visualizationof the form state from the very first time the form is rendered until the user has finished filling the form

Flow 1: pristine and invalid ­ When the form is first rendered and the user has not interacted with the form yet.

Flow 2: dirty and invalid ­ User has interacted with the form, but validity has not been satisfied, yet

Flow 3: dirty and valid ­ User has finished filling the form and all the validation rule has been satisfied

Page 24: AngularJS - Javascript framework for superheroes

Form Example (HTML)

<div ng-controller="FormController"> <form name="form" class="css-form" novalidate> Name: <input type="text" ng-model="user.name" name="uName" required/> <br/>E-mail: <input type="email" ng-model="user.email" name="uEmail" required/> <br/> <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid: <span ng-show="form.uEmail.$error.required"> Tell us your email. </span> <span ng-show="form.uEmail.$error.email"> This is not a valid email. </span> </div> <input type="checkbox" ng-model="user.agree" name="userAgree" required/> I agree<br/> <div ng-show="!user.agree"> Please agree. </div> <button ng-click="reset()" ng-disabled="isUnchanged(user)"> RESET </button> <button ng-click="update(user)" ng-disabled="form.$invalid || isUnchanged(user)"> SAVE </button>

</form>

Page 25: AngularJS - Javascript framework for superheroes

Form Example (Javascript)

function FormController ($scope) { $scope.master = {}; $scope.update = function (user) { $scope.master = angular.copy(user); }; $scope.reset = function () { $scope.user = angular.copy($scope.master); }; $scope.isUnchanged = function (user) { return angular.equals(user, $scope.master); }; $scope.reset();}

Page 26: AngularJS - Javascript framework for superheroes

Form Live ExampleName: E­mail: 

I agreePlease agree.RESET  SAVE

Page 27: AngularJS - Javascript framework for superheroes

Unit TestingUnit testing as the name implies is about testing individual units of code. What makes eachapplication unique is its logic, and the logic is what we would like to test. If the logic for yourapplication contains DOM manipulation, it will be hard to test. In angular the controllers are

strictly separated from the DOM manipulation logic and this results in a much easier testabilitystory.

AngularJS uses Jasmine as unit testing and E2E framework

Page 28: AngularJS - Javascript framework for superheroes

Unit testing example

function PasswordCtrl ($scope) { $scope.password = ''; $scope.grade = function () { var size = $scope.password.length; if (size > 8) { $scope.strength = 'strong'; } else if (size > 3) { $scope.strength = 'medium'; } else { $scope.strength = 'weak'; } };}

var $scope = {};var pc = $controller('PasswordCtrl', {$scope: $scope});$scope.password = 'abc';$scope.grade();expect($scope.strength).toEqual('weak');

Page 29: AngularJS - Javascript framework for superheroes

E2E testing exampleIt's quite easy to test services, directives, filters, controllers, etc with AngularJS and Jasmine

describe('service', function () { beforeEach(module('myApp.services')); describe('version', function () { it('should return current version', inject(function (version) { expect(version).toEqual('0.1'); })); });});