This presentation was featured on the third AngularJS Meetup in Belgium and presented by Glenn Dejaeger, Thomas Anciaux and Pieter Herroelen, who have been working on a large AngularJS application for almost a year now. This presentation features the many challenges they have encountered and also ways to solve them, including: - structuring a large AngularJS application (and building it with grunt) - writing reusable components - using AngularJS with a hypermedia API Enjoy! AE nv

1. AngularJS in large
applications
AngularJS Meetup
ae nv/sa
Interleuvenlaan 27b, B-3001 Heverlee
T +32 16 39 30 60 - F +32 16 39 30 70
www.ae.be

2. Agenda





Introduction
Managing a large application
Communication through hypermedia
Break
Reusable components
 2

3. http://www.slideshare.net/AE_nv/angular-js-in-large-applications
http://ow.ly/sPVGy
#ajsugbe
 3

4. Introduction
 Glenn Dejaeger @glenndejaeger
 Experience: 2+ years
 Thomas Anciaux @thomaux
 Experience: 2+ years
 Pieter Herroelen @piether
 Experience: 1 year
We work for AE @AE_NV
 4

5. Project context






Enterprise environment
Master database system
CRUD
Spearhead
Internal project
Infrequent releases
 5

6. Project size
 17 developers, 4 js developers
 10k MD total
 LOC’s
 JavaScript: 7k
 Java REST layer: 11k
 Java total: 700k+
 6

7. PART 1
MANAGING A LARGE APPLICATION
 7

8. Historical Issues
APP
MODULES
FRAMEWORK
REQUIREJS
APP
.LESS
MODULES
.LESS
 8

9. Historical issues
 No real build
 Manual
 Monolithic
 RequireJS
 Karma
 9

10. Initial solutions
 Introduce Grunt
 And separate builds
 Remove dependency on RequireJS
 10

11. New Issues
APP
MODULES
FRAMEWORK
MODULES
BOOTSTRAP
ANGULAR
BOOTSTRAP
FRAMEWORK
FRAMEWORK
ANGULAR
ANGULAR
 11

12. New issues
<base href=“whatever/buildnr/”>
directive(“aDirective”, function(){
return {
...,
templateUrl: “relative/path/...”
...
}
});
 12

13. New issues
 Dependency management?
 Referencing HTML templates
 13

14. Dependency Management?
 Manual!
 Error prone
 Not feasible with a large set of dependencies
 Wrap dependencies with output
 Ugly!
 14

15. New Solution
 Introduce Bower
 Introduce $templateCache
 15

16. Bower
 Setup each project as a Bower module
 Publish versions independently
 Bower can target local or zipped folders
 Store the tagged versions anywhere you’d like
 16

17. $templateCache
 Angular service
 Registers templates by name
 Grunt task compiles and concatenates all HTML to
JS
 17

18. Conclusion
 Advantages
 Automation of build system
 Closer to pure angular (easy Karma setup etc.)
 Dependency management
 Disadvantages
 One big file per project/module
 Harder to use Chrome Dev tools
 18

19. QUESTIONS?
 19

20. PART 2
COMMUNICATION THROUGH
HYPERMEDIA
 20

21. Project needs
 A lot of similar functionality (CRUD)
 Hierarchical data
 Flexible UI: “A browser in a browser”
 Multiple tabs
 Links all over the place
...
 21

22. First approach
"municipality": {
"criteria": {
"groups": [["LABEL“,"POSTAL_CODE"]],
“label": {
"type": "TEXT_MEDIUM",
"operators": "ALPHA",
"common": true,
"mandatory": false
},
…
},
…
 22

23. First approach
CLIENT
DATA
SERVER
CONFIG
 23

24. First approach
http://www.youtube.com/watch?v=62RvRQuMVyg
 24

25. Richardson maturity model
http://martinfowler.com/articles/richardsonMaturityModel.html
 25

26.  26

27. Richardson maturity model
http://martinfowler.com/articles/richardsonMaturityModel.html
 27

28. Hypermedia
CLIENT
HYPERMEDIA
SERVER
 28

29. Hypermedia
CLIENT
JSON over HTTP
SERVER
 29

30. http://www.toddmgreen.com/wp-content/uploads/2011/12/Arthur-C-2.png
 30

31. Hypermedia
Content-type: application/hal+json
CLIENT
HYPERMEDIA
SERVER
 31

32. Hypermedia
Content-type: application/hal+json
SPEC
 32

33. Hypermedia
Content-type: application/hal+json
SPEC
CLIENT
SERVER
 33

34. Which specification?
 34

35.  35

36. HAL - Hypertext Application Language
http://stateless.co/hal_specification.html
 36

37. HAL
 37

38. "_links": {
"self": { "href": "/orders"}
},
"currentlyProcessing": 14,
"shippedToday": 20,
"_embedded": {
"ea:order": [
{
"_links": {
"self": { "href": "/orders/123" },
"ea:basket": { "href": "/baskets/98712" }
},
"total": 30.00
}
...
 38

39. "_links": {
"self": { "href": "/orders"}
},
"currentlyProcessing": 14,
"shippedToday": 20,
"_embedded": {
"ea:order": [
{
"_links": {
"self": { "href": "/orders/123" },
"ea:basket": { "href": "/baskets/98712" }
},
"total": 30.00
}
...
 39

40. "_links": {
"self": { "href": "/orders"}
},
"currentlyProcessing": 14,
"shippedToday": 20,
"_embedded": {
"ea:order": [
{
"_links": {
"self": { "href": "/orders/123" },
"ea:basket": { "href": "/baskets/98712" }
},
"total": 30.00
}
...
 40

41. EPiaAACBSwaADEtPoHTMD
<resource uri=“http://example.com/path”> ...
 41

42. JSON
• properties
• links
• embedded
$scope
objects
 42

43. JSON
• properties
• links
• embedded
$scope
functions
 43

44. follow() Replace content of directive with
resource behind link
Example:
<a ng-click=“links[‘children’].follow()”></a>
 44

45. function(method, data) Do an HTTP call
with the specified method and the specified data
in the request. Returns a promise.
Example:
$scope.links[‘save’](‘POST’, $scope.form).then(...);
 45

46. HAL
CLIENT
SERVER
 46

47. HAL
CLIENT
SERVER
LINK RELATIONS
 47

48. JSON
• properties
• links
• embedded
$scope
Recursive
structure
 48

49. JSON
$scope
HTML
• properties
• links
• embedded
• header
property
 49

50. JSON
$scope
<ng-include
src=“property+’.html’”>
</ng-include>
• properties
• links
• embedded
• header
HTML
property
 50

51. http://www.x17online.com/gisele-elephant.jpg
 51

52. Where is the model?
 52

53. http://www.x17online.com/gisele-elephant.jpg
 53

54. QUESTIONS?
 54

55. PART 2.5
BREAK
 55

56. PART 3
DEVELOPING REUSABLE
COMPONENTS
 56

57.  57

58. What is a component?
 58

59. What is a component?
 An identifiable part of a larger program or
construction
 Provides a particular function or group of related
functions
 Has its own responsibility
 59

60. What is a component?
COMPONENT
DIRECTIVE
 60

61. Grid component
 61

62. Grid component
directive(“grid”, function(){
return {
...
scope: {
data: ‘=‘,
columnDefs: ‘=‘,
sortable: ‘=‘,
filterable: ‘=‘
...
}
controller: ‘gridController’,
template: $templateCache.get(‘grid.html')
...
}
});
 62

63. Grid component
<div ng-init=“columnDefs=[
{field: ‘firstName’, title: ’firstname’},
{field: ‘lastName’, title: ’lastname’},
{field: ‘city’, title: ’city’},
{field: ‘title’, title: ’title’},
{field: ‘birthDate’, title:’birthdate’},
{field: ‘age’, title:’age’},
]”>
<div grid
data=“$scope.persons”
column-defs=“columnDefs”></div>
</div>
 63

64. Problem 1
 1 big controller
 Unreadable
 Unmaintainable
 No separation of concerns
 64

65. Solution
 Different services with their own responsibility
 Injected into controller
 Only logic, no state!
 65

66. Problem 2
 1 big object to configure all the columns
 Unreadable
 Static
 Error prone
 66

67. Solution
<div grid data=“$scope.persons”>
<div grid-column field=“firstName” title=“firstname”/>
<div grid-column field=“lastName” title=“lastname”/>
<div grid-column field=“city” title=“city”/>
<div grid-column field=“title” title=“title”/>
<div grid-column field=“birthDate” title=“birthdate”/>
<div grid-column field=“age” title=“age”/>
</div>
 67

68. What is a component?
COMPONENT
DIRECTIVE
DIRECTIVE
DIRECTIVE
 68

69. Grid component
directive(“grid”, function(){
return {
...
transclude: true
...
}
});
 69

70. Grid component
directive(“gridColumn”, function(){
return {
...
scope: {
field: ‘@‘,
title: ‘@‘,
hidden: ‘=‘
...
}
require: ‘^grid’,
link: function(scope, elem, attrs, gridCtrl){
...
}
...
});
 70

71. Communication between components
 Isolated scopes
 Don’t pollute other scopes
 No direct access to parent scope
 71

72. Communication between components
 Events
 Loosely coupled
 No control over listeners
 Shared services
 Tightly coupled
 Control over consumers
 72

73. Parting words
 Solved a number of problems
 Modularity of the build
 Interaction with a hypermedia back-end
 Modularity of the code
 Created a few new problems
 YMMV
 73

74. QUESTIONS?
 74

75. @ae_nv
linkedin.com/company/ae-nv-sa