AngularJS in large applications - AE NV
10 likes5,742 views
The document discusses strategies for managing large AngularJS applications, emphasizing the need for effective dependency management and build automation. It covers approaches to building reusable components and highlights communication through hypermedia, referencing the Richardson Maturity Model. Solutions such as Bower and $templateCache are presented to address issues in managing project complexity and enhancing modularity.
![First approach
"municipality": {
"criteria": {
"groups": [["LABEL“,"POSTAL_CODE"]],
“label": {
"type": "TEXT_MEDIUM",
"operators": "ALPHA",
"common": true,
"mandatory": false
},
…
},
…
22](https://image.slidesharecdn.com/ae-angularjsinlargeapplications-140122092432-phpapp01/85/AngularJS-in-large-applications-AE-NV-22-320.jpg)
![follow() Replace content of directive with
resource behind link
Example:
<a ng-click=“links[‘children’].follow()”></a>
44](https://image.slidesharecdn.com/ae-angularjsinlargeapplications-140122092432-phpapp01/85/AngularJS-in-large-applications-AE-NV-44-320.jpg)
.then(...);
45](https://image.slidesharecdn.com/ae-angularjsinlargeapplications-140122092432-phpapp01/85/AngularJS-in-large-applications-AE-NV-45-320.jpg)
![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](https://image.slidesharecdn.com/ae-angularjsinlargeapplications-140122092432-phpapp01/85/AngularJS-in-large-applications-AE-NV-63-320.jpg)
AngularJS in large applications - 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
- 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
- 9. Historical issues No real build Manual Monolithic RequireJS Karma 9
- 10. Initial solutions Introduce Grunt And separate builds Remove dependency on RequireJS 10
- 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
- 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
- 26. 26
- 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
- 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
- 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
- 52. Where is the model? 52
- 54. QUESTIONS? 54
- 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
- 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