SlideShare una empresa de Scribd logo
1 de 29
Descargar para leer sin conexión
AngularJS application
architecture
Gabriele Falace
workshop 11.03.2015
Separation of Concerns
Rule of 1
● each component has 1 role
● 1 component per file
● each component has a single purpose
Separation of Concerns - example
Classifying concerns:
● Cross-Cutting and generic
○ logging
○ exception handling
● Cross-Cutting and feature-specific
○ a service fetching Customer data
● Features
○ Customer Controller
○ Customer Address widget
Consistent syntax
Many things can be done with different styles.
It is strongly recommended to stick with one,
especially when working in team!
Consistent syntax - example
It is often needed to create an alias for the this
reference.
WHY: in JavaScript a scope is created by a
function definition (and not by {} blocks) →
while nesting function definitions, the reference
to the “original” this is lost.
Consistent syntax - example
function foo(){
this.x = 5;
// other code
function bar(){
// can’t access x through “this”
// this “this” belongs to bar
this.x = 6;
}
}
Consistent syntax - example
function foo(){
var self = this;
self.x = 5;
// other code
function bar(){
// can access “external” x through “self”
this.x = 6;
console.log(self.x);
}
}
Consistent syntax - example
widely used aliases
● in controllers: var vm = this; // view model
● in general js: var self = this;
Consistent syntax - services
angular.module('globalServices')
.service('paymentService', PaymentService); // a service is a SINGLETON
/* @ngInject */
function PaymentService($http, tokenService){
var service = {
validateCardNumber: validateCardNumber,
properCardNumberLength: properCardNumberLength
};
return service;
// implementation
}
Organizing the App
can be by type of by feature
by type can be ok for small-medium
sized apps.
When the size grows this gets confusing.
larger app → by feature, then by type
naming conventions
Controllers: avoid the suffix “Controller” use
uppercase for the function name (it’s a
constructor)
Factories/Services: same as file name
Directives: same as file name + short and
consistent prefix (e.g. “eb”)
Modules
Modules
use angular.module() for both declaring and
fetching modules.
angular.module(‘app’, []); // CREATES
angular.module(‘app’); // FETCHES
var app = angular.module(‘app’, []); //not recommended
Modules
Aggregate dependencies, in order to avoid an
overly long list of dependencies in our
modules.
Use a root “app.core” module to aggregate 3rd
party and other generic modules.
Controllers
Controllers
● only presentation logic in here
● don’t use anonymous functions
● use the “Controller As” syntax with “this”
instead of scope
● separate registration, injection, declaration
angular.module(‘app’).controller(‘foo’, Foo);
Foo.$inject = [‘$http’, ‘$scope’];
function Foo($http, $scope){ … }
Controllers
Declare the “Controller As” in ngRoutes,
whenever possible, also using resolve for
bootstrapping logic
controller: ‘Controller’
controllerAs: ‘ctrl’
resolve: {
message: [‘customerService’, function(customerService) {
return customerService.getGreetingMessage();
}]
}
Controllers
The controller can be injected with “message”
before the controller is instantiated → good
mechanism for bootstrapping logic, better than
“app.run” when logic should be specific to the
controller
Controller.$inject = [‘message’];
function Controller(message){ … }
AJAX - sequential requests
$http.get(PRICELIST_URL)
.then(function (data) {
pricelist = data['data'];
console.log('AFTER CALL 1 __ ' + pricelist + '(pricelist)');
return $http.get(CURRENCY_URL);
})
.then(function (data) {
currency = data['data'];
var actualUrl = TARIFFS_URL.replace('{priceListId}', pricelist);
return $http.get(actualUrl);
})
.then(function (data){
console.log('AFTER CALL 3 __ (tariffs) n' + JSON.stringify(data['data']));
});
AJAX - parallel requests
$q.all([fn1(), fn2(),]);
array of functions each returning a Promise
function fn1(){
return $http.get(SERVICE_URL);
}
Tips
using value/constant to keep everything in the
scope of the application. constants and values
can be injected.
angular.module('application').constant('origin', 'Sydney');
service('simpleService', ['origin', function (origin) {
// implementation ...
}
Tips
It’s usually nice to consider …
● using ngAnnotate (e.g. /* @ngInject */)
● using jshint (to impose some coding style)
● using JavaScript
○ especially iterators over arrays:
■ someArray.forEach(fn)
■ someArray.filter(fn)
■ someArray.some(fn)
■ someArray.every(fn)
■ someArray.map(fn)
Unit Testing - installation
● choose a framework (e.g. Jasmine)
● choose a test runner (e.g. Karma)
● setup:
npm install -g karma
npm install -g karma-cli
in the project folder run the following
karma init
Unit Testing - configuring
● in the project root a karma.conf.js file
specifies settings for the tests
○ make sure that the file property in the file references an array of file
path where the JS app file and the test are located!
● Typically, most important things to test are
Services, as they’re the components which
hold business logic
Unit Testing - example
describe('testPaymentService', function () {
var paymentService, $httpBackend;
beforeEach(module('globalServices'));
beforeEach(function () {
inject(function($injector){
$httpBackend = $injector.get('$httpBackend');
paymentService = $injector.get('paymentService');
});
});
afterEach(function() {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});
it('should check mastercard', function () {
$httpBackend
.when('GET', REST_API_URL + '/services/payment/validateCreditCard/5105105105105100')
.respond('MASTERCARD');
var res = paymentService.validateCardNumber('5105105105105100');
$httpBackend.flush();
expect(res.$$state.value.data).toEqual('MASTERCARD');
});
});
E2E Testing - installation
● choose a framework (e.g. Jasmine)
● choose a test runner (e.g. Protractor)
● setup:
npm install -g protractor
in the project folder run the following, to start the
Selenium WebDriver
webdriver-manager start
Configuring
create the configuration file. Copy the following into conf.js:
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['todo-spec.js']
};
This configuration tells Protractor where your test files (specs) are, and where to talk to your Selenium
Server (seleniumAddress).
Write a test
A protractor test, manipulates the actual elements in the app launching the browser and picking up
stuff in the page through matchers. Run it with protractor conf.js
describe('Ebuero CSW number fields validation', function () {
beforeEach(function () {
browser.sleep(2000);
browser.get(URL);
...
});
it('should format, validate and copy the phone, mobile and fax number', function () {
companyName.sendKeys('000TEST000 ebuero AG');
...
expect(faxNumber.getAttribute('value')).toBe(FORMATTED_PHONE_NUMBER);
element(by.cssContainingText('option', 'AG')).click();
nextButton1.click();
expect(createErrorBox.isDisplayed()).toBeFalsy();
});
});
References
● John Papa’s course on PluralSight
● Style guide: https://github.com/johnpapa/angular-styleguide
● More on Services, Providers: http://slides.wesalvaro.com/20121113/#/2/5
● Possible JSON security threat: http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-
json-vulnerability.aspx/

Más contenido relacionado

La actualidad más candente

Angular js tutorial slides
Angular js tutorial slidesAngular js tutorial slides
Angular js tutorial slides
samhelman
 

La actualidad más candente (20)

AngularJS Basics and Best Practices - CC FE &UX
AngularJS Basics and Best Practices - CC FE &UXAngularJS Basics and Best Practices - CC FE &UX
AngularJS Basics and Best Practices - CC FE &UX
 
AngularJs Crash Course
AngularJs Crash CourseAngularJs Crash Course
AngularJs Crash Course
 
Angular js
Angular jsAngular js
Angular js
 
AngularJS Best Practices
AngularJS Best PracticesAngularJS Best Practices
AngularJS Best Practices
 
The AngularJS way
The AngularJS wayThe AngularJS way
The AngularJS way
 
AngularJS Best Practices
AngularJS Best PracticesAngularJS Best Practices
AngularJS Best Practices
 
Angular JS - Introduction
Angular JS - IntroductionAngular JS - Introduction
Angular JS - Introduction
 
AngularJs presentation
AngularJs presentation AngularJs presentation
AngularJs presentation
 
AngularJS - The Next Big Thing?
AngularJS - The Next Big Thing?AngularJS - The Next Big Thing?
AngularJS - The Next Big Thing?
 
Introduction to Angular js 2.0
Introduction to Angular js 2.0Introduction to Angular js 2.0
Introduction to Angular js 2.0
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get started
 
AngularJS Project Setup step-by- step guide - RapidValue Solutions
AngularJS Project Setup step-by- step guide - RapidValue SolutionsAngularJS Project Setup step-by- step guide - RapidValue Solutions
AngularJS Project Setup step-by- step guide - RapidValue Solutions
 
Angular js architecture (v1.4.8)
Angular js architecture (v1.4.8)Angular js architecture (v1.4.8)
Angular js architecture (v1.4.8)
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project 
 
Angular js tutorial slides
Angular js tutorial slidesAngular js tutorial slides
Angular js tutorial slides
 
Angular js
Angular jsAngular js
Angular js
 
Front end development with Angular JS
Front end development with Angular JSFront end development with Angular JS
Front end development with Angular JS
 
Angularjs - lazy loading techniques
Angularjs - lazy loading techniques Angularjs - lazy loading techniques
Angularjs - lazy loading techniques
 
Angularjs
AngularjsAngularjs
Angularjs
 
Angular js
Angular jsAngular js
Angular js
 

Similar a AngularJS application architecture

Declarative Services - Dependency Injection OSGi Style
Declarative Services - Dependency Injection OSGi StyleDeclarative Services - Dependency Injection OSGi Style
Declarative Services - Dependency Injection OSGi Style
Felix Meschberger
 
Language enhancements in cold fusion 11
Language enhancements in cold fusion 11Language enhancements in cold fusion 11
Language enhancements in cold fusion 11
ColdFusionConference
 
How and why i roll my own node.js framework
How and why i roll my own node.js frameworkHow and why i roll my own node.js framework
How and why i roll my own node.js framework
Ben Lin
 

Similar a AngularJS application architecture (20)

Unit Testing and Coverage for AngularJS
Unit Testing and Coverage for AngularJSUnit Testing and Coverage for AngularJS
Unit Testing and Coverage for AngularJS
 
Protractor framework architecture with example
Protractor framework architecture with exampleProtractor framework architecture with example
Protractor framework architecture with example
 
Field injection, type safe configuration, and more new goodies in Declarative...
Field injection, type safe configuration, and more new goodies in Declarative...Field injection, type safe configuration, and more new goodies in Declarative...
Field injection, type safe configuration, and more new goodies in Declarative...
 
Voorhoede - Front-end architecture
Voorhoede - Front-end architectureVoorhoede - Front-end architecture
Voorhoede - Front-end architecture
 
How to write maintainable code without tests
How to write maintainable code without testsHow to write maintainable code without tests
How to write maintainable code without tests
 
Angular Intermediate
Angular IntermediateAngular Intermediate
Angular Intermediate
 
Build Web Apps using Node.js
Build Web Apps using Node.jsBuild Web Apps using Node.js
Build Web Apps using Node.js
 
Javascript ui for rest services
Javascript ui for rest servicesJavascript ui for rest services
Javascript ui for rest services
 
Declarative Services - Dependency Injection OSGi Style
Declarative Services - Dependency Injection OSGi StyleDeclarative Services - Dependency Injection OSGi Style
Declarative Services - Dependency Injection OSGi Style
 
Declarative Services - Dependency Injection OSGi Style
Declarative Services - Dependency Injection OSGi StyleDeclarative Services - Dependency Injection OSGi Style
Declarative Services - Dependency Injection OSGi Style
 
Angular training - Day 3 - custom directives, $http, $resource, setup with ye...
Angular training - Day 3 - custom directives, $http, $resource, setup with ye...Angular training - Day 3 - custom directives, $http, $resource, setup with ye...
Angular training - Day 3 - custom directives, $http, $resource, setup with ye...
 
Angular.js Primer in Aalto University
Angular.js Primer in Aalto UniversityAngular.js Primer in Aalto University
Angular.js Primer in Aalto University
 
Language enhancements in cold fusion 11
Language enhancements in cold fusion 11Language enhancements in cold fusion 11
Language enhancements in cold fusion 11
 
TypeScript for Java Developers
TypeScript for Java DevelopersTypeScript for Java Developers
TypeScript for Java Developers
 
Workshop 23: ReactJS, React & Redux testing
Workshop 23: ReactJS, React & Redux testingWorkshop 23: ReactJS, React & Redux testing
Workshop 23: ReactJS, React & Redux testing
 
dokumen.tips_rediscovering-spring-with-spring-boot1 (1).pdf
dokumen.tips_rediscovering-spring-with-spring-boot1 (1).pdfdokumen.tips_rediscovering-spring-with-spring-boot1 (1).pdf
dokumen.tips_rediscovering-spring-with-spring-boot1 (1).pdf
 
dokumen.tips_rediscovering-spring-with-spring-boot1.pdf
dokumen.tips_rediscovering-spring-with-spring-boot1.pdfdokumen.tips_rediscovering-spring-with-spring-boot1.pdf
dokumen.tips_rediscovering-spring-with-spring-boot1.pdf
 
How and why i roll my own node.js framework
How and why i roll my own node.js frameworkHow and why i roll my own node.js framework
How and why i roll my own node.js framework
 
SCR Annotations for Fun and Profit
SCR Annotations for Fun and ProfitSCR Annotations for Fun and Profit
SCR Annotations for Fun and Profit
 
Osgi
OsgiOsgi
Osgi
 

Último

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 

AngularJS application architecture

  • 2. Separation of Concerns Rule of 1 ● each component has 1 role ● 1 component per file ● each component has a single purpose
  • 3. Separation of Concerns - example Classifying concerns: ● Cross-Cutting and generic ○ logging ○ exception handling ● Cross-Cutting and feature-specific ○ a service fetching Customer data ● Features ○ Customer Controller ○ Customer Address widget
  • 4. Consistent syntax Many things can be done with different styles. It is strongly recommended to stick with one, especially when working in team!
  • 5. Consistent syntax - example It is often needed to create an alias for the this reference. WHY: in JavaScript a scope is created by a function definition (and not by {} blocks) → while nesting function definitions, the reference to the “original” this is lost.
  • 6. Consistent syntax - example function foo(){ this.x = 5; // other code function bar(){ // can’t access x through “this” // this “this” belongs to bar this.x = 6; } }
  • 7. Consistent syntax - example function foo(){ var self = this; self.x = 5; // other code function bar(){ // can access “external” x through “self” this.x = 6; console.log(self.x); } }
  • 8. Consistent syntax - example widely used aliases ● in controllers: var vm = this; // view model ● in general js: var self = this;
  • 9. Consistent syntax - services angular.module('globalServices') .service('paymentService', PaymentService); // a service is a SINGLETON /* @ngInject */ function PaymentService($http, tokenService){ var service = { validateCardNumber: validateCardNumber, properCardNumberLength: properCardNumberLength }; return service; // implementation }
  • 10. Organizing the App can be by type of by feature by type can be ok for small-medium sized apps. When the size grows this gets confusing. larger app → by feature, then by type
  • 11. naming conventions Controllers: avoid the suffix “Controller” use uppercase for the function name (it’s a constructor) Factories/Services: same as file name Directives: same as file name + short and consistent prefix (e.g. “eb”)
  • 13. Modules use angular.module() for both declaring and fetching modules. angular.module(‘app’, []); // CREATES angular.module(‘app’); // FETCHES var app = angular.module(‘app’, []); //not recommended
  • 14. Modules Aggregate dependencies, in order to avoid an overly long list of dependencies in our modules. Use a root “app.core” module to aggregate 3rd party and other generic modules.
  • 16. Controllers ● only presentation logic in here ● don’t use anonymous functions ● use the “Controller As” syntax with “this” instead of scope ● separate registration, injection, declaration angular.module(‘app’).controller(‘foo’, Foo); Foo.$inject = [‘$http’, ‘$scope’]; function Foo($http, $scope){ … }
  • 17. Controllers Declare the “Controller As” in ngRoutes, whenever possible, also using resolve for bootstrapping logic controller: ‘Controller’ controllerAs: ‘ctrl’ resolve: { message: [‘customerService’, function(customerService) { return customerService.getGreetingMessage(); }] }
  • 18. Controllers The controller can be injected with “message” before the controller is instantiated → good mechanism for bootstrapping logic, better than “app.run” when logic should be specific to the controller Controller.$inject = [‘message’]; function Controller(message){ … }
  • 19. AJAX - sequential requests $http.get(PRICELIST_URL) .then(function (data) { pricelist = data['data']; console.log('AFTER CALL 1 __ ' + pricelist + '(pricelist)'); return $http.get(CURRENCY_URL); }) .then(function (data) { currency = data['data']; var actualUrl = TARIFFS_URL.replace('{priceListId}', pricelist); return $http.get(actualUrl); }) .then(function (data){ console.log('AFTER CALL 3 __ (tariffs) n' + JSON.stringify(data['data'])); });
  • 20. AJAX - parallel requests $q.all([fn1(), fn2(),]); array of functions each returning a Promise function fn1(){ return $http.get(SERVICE_URL); }
  • 21. Tips using value/constant to keep everything in the scope of the application. constants and values can be injected. angular.module('application').constant('origin', 'Sydney'); service('simpleService', ['origin', function (origin) { // implementation ... }
  • 22. Tips It’s usually nice to consider … ● using ngAnnotate (e.g. /* @ngInject */) ● using jshint (to impose some coding style) ● using JavaScript ○ especially iterators over arrays: ■ someArray.forEach(fn) ■ someArray.filter(fn) ■ someArray.some(fn) ■ someArray.every(fn) ■ someArray.map(fn)
  • 23. Unit Testing - installation ● choose a framework (e.g. Jasmine) ● choose a test runner (e.g. Karma) ● setup: npm install -g karma npm install -g karma-cli in the project folder run the following karma init
  • 24. Unit Testing - configuring ● in the project root a karma.conf.js file specifies settings for the tests ○ make sure that the file property in the file references an array of file path where the JS app file and the test are located! ● Typically, most important things to test are Services, as they’re the components which hold business logic
  • 25. Unit Testing - example describe('testPaymentService', function () { var paymentService, $httpBackend; beforeEach(module('globalServices')); beforeEach(function () { inject(function($injector){ $httpBackend = $injector.get('$httpBackend'); paymentService = $injector.get('paymentService'); }); }); afterEach(function() { $httpBackend.verifyNoOutstandingExpectation(); $httpBackend.verifyNoOutstandingRequest(); }); it('should check mastercard', function () { $httpBackend .when('GET', REST_API_URL + '/services/payment/validateCreditCard/5105105105105100') .respond('MASTERCARD'); var res = paymentService.validateCardNumber('5105105105105100'); $httpBackend.flush(); expect(res.$$state.value.data).toEqual('MASTERCARD'); }); });
  • 26. E2E Testing - installation ● choose a framework (e.g. Jasmine) ● choose a test runner (e.g. Protractor) ● setup: npm install -g protractor in the project folder run the following, to start the Selenium WebDriver webdriver-manager start
  • 27. Configuring create the configuration file. Copy the following into conf.js: exports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['todo-spec.js'] }; This configuration tells Protractor where your test files (specs) are, and where to talk to your Selenium Server (seleniumAddress).
  • 28. Write a test A protractor test, manipulates the actual elements in the app launching the browser and picking up stuff in the page through matchers. Run it with protractor conf.js describe('Ebuero CSW number fields validation', function () { beforeEach(function () { browser.sleep(2000); browser.get(URL); ... }); it('should format, validate and copy the phone, mobile and fax number', function () { companyName.sendKeys('000TEST000 ebuero AG'); ... expect(faxNumber.getAttribute('value')).toBe(FORMATTED_PHONE_NUMBER); element(by.cssContainingText('option', 'AG')).click(); nextButton1.click(); expect(createErrorBox.isDisplayed()).toBeFalsy(); }); });
  • 29. References ● John Papa’s course on PluralSight ● Style guide: https://github.com/johnpapa/angular-styleguide ● More on Services, Providers: http://slides.wesalvaro.com/20121113/#/2/5 ● Possible JSON security threat: http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle- json-vulnerability.aspx/