angular js recommended practices - mini

www.aurorasolutions.io www.aurorasolutions.io

AngularJSRecommended Practices

http://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





http://www.aurorasolutions.io/

http://www.aurorasolutions.io/


http://www.fixtelligent.com

http://www.meetup.com/Stockholm-Spring-Framework-Grails-Enthusiast/

https://se.linkedin.com/in/rasheedwaraich


Agenda

● RP # 1 File Organization● RP # 2 CCC● RP # 3 Scopes● RP # 4 Named Functions● RP # 5 Keep Controllers Focused● Credits!






File OrganizationRecommended Practice # 1






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






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!






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






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






Approach # 4 - By Feature

Pros

➔ changes happen together

Cons

➔ code delivery?➔ what kind of file am I looking into?

Conclusion

➔ definitely recommended approach






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






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






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






Cross Component Communication - CCCRecommended Practice # 2






Quiz?

★ How many methods does AngularJS supports for cross component communication?






CCC Options

❖ Option 1: Inherited Scope❖ Option 2: Events❖ Option 3: Shared Services






Option 1: Inherited Scope

drawbacks:

➔ pollute parent scope➔ scattered business logic➔ hidden dependencies

benefits:

➔ ease of use






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






Option 3: Shared Services

benefits:

➔ clean controllers➔ less # of dependencies

drawbacks:

➔ requires more work!➔ seems artificial






Final Advice

➔ When to use “Inherited Scope”?➔ When to use “Events”?➔ When to use “Shared Service”?






ScopesRecommended Practice # 3






Batarang!

➔ Chrome add-in by Brian Ford➔ Helps in visualization➔ Helps in debugging






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>






Scope Basics - HTML ~ Controller






Scope Basics - HTML ~ Scope






Shared Scope






Inherited Scope






Isolated Scope






Named FunctionsRecommended Practice # 4






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






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






Named Functions - How?

/** good **/

angular

.module('app', [])

.controller('ToDoController', ToDoController)

.service('ToDoService', ToDoService);

function ToDoController () {

}

function ToDoService () {

}

app.module.js






Keeps Controller FocusedRecommended Practice # 5






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






Keep Controller Focused - Why?

➔ code re-use is not possible➔ hard to test➔ doesn’t hides implementation details➔ lots of dependencies






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






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






Credits!






Credits

➔ John Papa: https://github.com/johnpapa/angularjs-styleguide#directives ➔ Joe Eames: http://www.pluralsight.com/courses/table-of-contents/angular-best-practices





https://github.com/johnpapa/angularjs-styleguide#directives

http://www.pluralsight.com/courses/table-of-contents/angular-best-practices


Hungry to learn more!

Please feel to drop me an email at: [email protected]





mailto:[email protected]

angular js recommended practices - mini

Technology

feature approach

type approach

good approach

approaches approach

type of object approach

file organization rp

files onlyconclusion

scopes rp