The journey of creating a single page application using AngularJS with BreezeJS.

1. Single Page Applications – A journey

About Me

About the company

Single Page Applications

AngularJS

BreezeJS

Application demo

Unit Testing

Conclusion

Any questions?

2. Biography – John Staveley

13 years

C#.net MVC HTML5

Strong on backend

Increasingly working on front end projects
https://www.linkedin.com/in/johnstaveley
@johnstaveley

3. Toriga Energy – Who, what, why?

Who are Toriga Energy?
− Compliance business

What they were trying to achieve?
− Cross platform mobile app
− Offline
− Bootstrap

Why?
− Fast adaptation to the marketplace
− Avoid app stores

4. How - Single Page Application?

CSS/HTML5 web page – all action takes place 'in page'

Don't get access to device features e.g. address book

Communication via $.ajax

Manifest

Local Storage to persist offline data

App settings for HTML5 – chrome removal, icon, splash

5. What - Initial solution

Jquery with Bootstrap
– Single page with tabbed control

7. Jobs view

8. Problems

jQuery
– No Navigation from job view to project view
– No Two way binding
– No deep linking

We need a framework...

9. But, which framework to choose?

10. AngularJS

Solves two way binding problem

11. AngularJS – How it works
Controller
View
Result!

12. AngularJS - Benefits

Routing – solves deep linking problem

Directives e.g. navigation control <navigation />

AngularJS versions of jquery libraries such as jquery ui,
bootstrap, kendo, signature pad - give example

More...

13. Demo of deep linking

14. Data – Initial solution

First there was: WCF web services with SQL

Not good at Rest

Inflexible

Verbose

No Metadata – validation

15. BreezeJS – solves data problems

To simplify creating the model on the client and persisting
changes

Client side queries

Validation

Extending the model

Only saves data that has changed

16. BreezeJS – get rid of the boiler plate!
Removes verbosity of web layer

17. Data access – Entity Framework

18. Unit Testing

Angular enforces separation of concerns

Angular allows Dependency injection

BDD with Jasmine and Sinon for mocking

Example

19. Controller to Unit Test

20. Unit testing code

21. Conclusion

Single Page Applications are great for cross platform apps
which avoid the app store

Don't benefit from intellisense

AngularJS makes your code testable

BreezeJS removes a lot of data access code
https://www.linkedin.com/in/johnstaveley
@johnstaveley

22. Any questions?