Testable Web Applications With AngularJS and NodeJS

Presented by Greg BurkeWeb Application Developer – FPI

greg.burke@financialpartners.com

Angular and Node

• Angular JS: comprehensive MV* framework• Contains the building blocks for a SPA• Node JS: server-side Javascript• Web server, test runner

Outline

• Brainstorm• Overview of SPA• Problems• Framework Discussion• Angular Demo• Testing Demo• Other topics in Node/Angular

Brainstorming

• Discuss the different elements needed in order to build a large enterprise application

Considerations

• SPA?• MV*?• Controls?• Module loading?• Unit Testing?

SPA

• Only one true “page”• Multiple “views”• Async requests• Need to handle back button and navigable

views• Sammy.js, JQuery AJAX, Amplify• Demo

MV*

• Separation of concerns• Two-way data-binding• Knockout.js, Backbone.js

Controls

• Grids• Date Pickers• Tree views• Input Masking• KendoUI and JQueryUI

Module Loading

• Dependency management• Code separation• RequireJS

Unit Testing

• Specifications• Modules• MV* compatibility• Qunit, Jasmine

Issues

• Many different libraries• Not cohesive• Difficult to test• Compatibility issues• Onboarding

Demo: Testability

• Testing with this setup can be problematic

Frameworks

• “Inversion of Control is a key part of what makes a framework different to a library. A library is essentially a set of functions that you can call, these days usually organized into classes. Each call does some work and returns control to the client.” – Martin Fowler

Discuss: Framework or Not

Requirements

• Inventory management app• Define a household inventory• Indicate when items are used• Generate a grocery list of needed items

Angular JS

• MV* framework• Cohesive and “opinionated”• All the necessary functionality for SPA• Helps you write testable code (DI)• AngularUI Team works on UI controls

Controllers

• Contains logic for rendering your View• Fields for data-binding• Avoid DOM manipulation• May be associated with a template• Example

Directives

• New tags/attributes• “Custom bindings”• Nested templates• DOM manipulation• Example

Services

• Share logic between controllers• Keeps controllers clean• Business logic• Example

Resources

• Similar to service proxy• Interact with any RESTful API

Overview

• Controllers• Directives• Services• Resources

Full App Demo

Testing

• Dependency injection• Jasmine• Karma Testrunner

Dependency Injection

• Dependency injection is a software design pattern that allows the removal of hard-coded dependencies and makes it possible to change them, whether at run-time or compile-time.

Full Testing Demo

Pluralsight

• AngularJS Fundamentals• AngularJS for .NET Developers• AngularJS In-Depth• Application Building Patterns with AngularJS• Building a Site with Bootstrap, AngularJS…• Building AngularJS and Node.js Apps…• Building Apps with Angular and Breeze

Other Resources

• http://docs.angularjs.org/api• http://docs.angularjs.org/tutorial/• https://github.com/angular/angular-seed