angular js recommended practices - mini
TRANSCRIPT
![Page 1: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/1.jpg)
www.aurorasolutions.io www.aurorasolutions.io
AngularJSRecommended Practices
![Page 2: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/2.jpg)
www.aurorasolutions.io www.aurorasolutions.io
![Page 3: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/3.jpg)
www.aurorasolutions.io www.aurorasolutions.io
![Page 4: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/4.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Who is Rasheed?❏ Software Architect & Agile Coach @ Aurora - IT Outsourcing & Consulting Company❏ Programmer (Java, Groovy, C#, JavaScript). Architect. Agile Coach.❏ Serial Entrepreneur❏ Co-founder of Aurora Solutions & FixTellient❏ Certified Instructor for Spring Courses (Core, Web & Integration)❏ Organizer of Stockholm Spring Framework & Grails Enthusiast! Meetup (Meeting next
week talking about Spring Boot!)
LinkedIn: https://se.linkedin.com/in/rasheedwaraich
![Page 5: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/5.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Agenda
● RP # 1 File Organization● RP # 2 CCC● RP # 3 Scopes● RP # 4 Named Functions● RP # 5 Keep Controllers Focused● Credits!
![Page 6: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/6.jpg)
www.aurorasolutions.io www.aurorasolutions.io
File OrganizationRecommended Practice # 1
![Page 7: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/7.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Approaches
❖ Approach 1: One file per each type of object❖ Approach 2: Separate file per object❖ Approach 3: By Type❖ Approach 4: By Feature❖ Approach 5: By Feature Then Type❖ Approach 6: By Feature Then Sub-Feature
![Page 8: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/8.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Approach # 1
Pros
➔ can’t forget to specify new js files in HTML!
Cons
➔ hard to find particular component➔ code reuse impossible➔ can’t judge application size
Conclusion
➔ not recommended!
![Page 9: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/9.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Approach # 2
Pros
➔ bit better organization over last method
Cons
➔ one big garbage dump when # of files above 15!
Conclusion
➔ works OK for tiny applications
![Page 10: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/10.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Approach # 3 - By Type
Pros
➔ bit better organization over last method
Cons
➔ still hard to find files➔ linked files aren’t together
Conclusion
➔ good enough for small applications
![Page 11: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/11.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Approach # 4 - By Feature
Pros
➔ changes happen together
Cons
➔ code delivery?➔ what kind of file am I looking into?
Conclusion
➔ definitely recommended approach
![Page 12: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/12.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Approach # 5 - By Feature Then Type
Pros
➔ bit more organization than last method
Cons
➔ not good approach when feature has 3 files only
Conclusion
➔ definitely good approach if # of files > 15 for a feature
![Page 13: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/13.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Approach # 6 - By Feature Then Sub Feature
Pros
➔ quite helpful when one feature has multiple sub features
Cons
➔ same as approach 3 (by feature) i.e. code delivery & type of file
Conclusion
➔ works best for huge sites!➔ easy to grow from last approach
![Page 14: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/14.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Final Advice
❏ Nothing is right or wrong! The only advice is to stay consistent. Choose one approach depending on the project complexity and then stick with it!
❏ When I find my structure is not feeling comfortable, I go back and revisit these LIFT guidelines:❏ Locating our code is easy❏ Identify code at a glance❏ Flat structure as long as we can❏ Try to stay DRY (Don’t Repeat Yourself) or T-DRY
![Page 15: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/15.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Cross Component Communication - CCCRecommended Practice # 2
![Page 16: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/16.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Quiz?
★ How many methods does AngularJS supports for cross component communication?
![Page 17: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/17.jpg)
www.aurorasolutions.io www.aurorasolutions.io
CCC Options
❖ Option 1: Inherited Scope❖ Option 2: Events❖ Option 3: Shared Services
![Page 18: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/18.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Option 1: Inherited Scope
drawbacks:
➔ pollute parent scope➔ scattered business logic➔ hidden dependencies
benefits:
➔ ease of use
![Page 19: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/19.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Option 2: Events
drawbacks:
➔ raising event is hard! (scope.$broadcast, scope.$emit, $rootScope.$broadcast)
➔ event cancellation!➔ event names are strings
benefits:
➔ listening event is simple ($on)➔ clean code
![Page 20: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/20.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Option 3: Shared Services
benefits:
➔ clean controllers➔ less # of dependencies
drawbacks:
➔ requires more work!➔ seems artificial
![Page 21: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/21.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Final Advice
➔ When to use “Inherited Scope”?➔ When to use “Events”?➔ When to use “Shared Service”?
![Page 22: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/22.jpg)
www.aurorasolutions.io www.aurorasolutions.io
ScopesRecommended Practice # 3
![Page 23: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/23.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Batarang!
➔ Chrome add-in by Brian Ford➔ Helps in visualization➔ Helps in debugging
![Page 24: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/24.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Scope Basics - Sample HTML
<div id=“1” ng-controller=“controllerA”>
<div id=“2”></div>
<div id=“3”></div>
<div id=“4” ng-controller=“controllerB”>
<div id=“5” ></div>
</div>
</div>
![Page 25: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/25.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Scope Basics - HTML ~ Controller
![Page 26: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/26.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Scope Basics - HTML ~ Scope
![Page 27: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/27.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Scope Basics - HTML ~ Scope
![Page 28: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/28.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Shared Scope
![Page 29: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/29.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Inherited Scope
![Page 30: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/30.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Isolated Scope
![Page 31: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/31.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Named FunctionsRecommended Practice # 4
![Page 32: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/32.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Named Functions - What?
➔ Use named functions instead of passing an anonymous function in as a callback.
/** avoid **/
angular .module('app', []) .controller('ToDoController', function ToDoController () {
}) .service('ToDoService', function ToDoService () {
});
app.module.js
![Page 33: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/33.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Named Functions - Why?
➔ More readable code➔ Much easier to debug➔ Reduces the amount of nested callback code.➔ Reduces the volume of code "wrapped" inside the Angular framework
![Page 34: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/34.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Named Functions - How?
/** good **/
angular
.module('app', [])
.controller('ToDoController', ToDoController)
.service('ToDoService', ToDoService);
function ToDoController () {
}
function ToDoService () {
}
app.module.js
![Page 35: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/35.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Keeps Controller FocusedRecommended Practice # 5
![Page 36: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/36.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Keep Controller Focused - What?
➔ Defer logic in a controller by delegating to services and factories
/** avoid **/
function Order($http, $q) { var vm = this; vm.checkCredit = checkCredit; vm.total = 0;
function checkCredit() { var orderTotal = vm.total; return $http.get('api/creditcheck').then(function(data) { var remaining = data.remaining; return $q.when(!!(remaining > orderTotal)); }); };}
order.controller.js
![Page 37: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/37.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Keep Controller Focused - Why?
➔ code re-use is not possible➔ hard to test➔ doesn’t hides implementation details➔ lots of dependencies
![Page 38: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/38.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Keep Controller Focused - How?
/** good **/
function Order(creditService) {
var vm = this;
vm.checkCredit = checkCredit;
vm.total = 0;
function checkCredit() {
return creditService.check();
};
}
order.controller.js
![Page 39: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/39.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Keep Controller Focused - How?
Controller purpose:
❏ setup scope❏ view interaction
Controller design guidelines:
❏ glue between view & model (keep focused on the view)❏ least # of collaborators❏ testable❏ don’t try to reuse controller for other views
![Page 40: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/40.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Credits!
![Page 41: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/41.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Credits
➔ John Papa: https://github.com/johnpapa/angularjs-styleguide#directives ➔ Joe Eames: http://www.pluralsight.com/courses/table-of-contents/angular-best-practices
![Page 42: Angular js recommended practices - mini](https://reader030.vdocuments.mx/reader030/viewer/2022032616/55a6bf5b1a28ab41688b46d4/html5/thumbnails/42.jpg)
www.aurorasolutions.io www.aurorasolutions.io
Hungry to learn more!
Please feel to drop me an email at: [email protected]