angular js recommended practices - mini

www.aurorasolutions.io www.aurorasolutions.io

AngularJSRecommended Practices

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

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

➔ can’t forget to specify new js files in HTML!

➔ hard to find particular component➔ code reuse impossible➔ can’t judge application size

Conclusion

➔ not recommended!

Approach # 2

➔ bit better organization over last method

➔ one big garbage dump when # of files above 15!

Conclusion

➔ works OK for tiny applications

Approach # 3 - By Type

➔ bit better organization over last method

➔ still hard to find files➔ linked files aren’t together

Conclusion

➔ good enough for small applications

Approach # 4 - By Feature

➔ changes happen together

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

Conclusion

➔ definitely recommended approach

Approach # 5 - By Feature Then Type

➔ bit more organization than last method

➔ 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

➔ quite helpful when one feature has multiple sub features

➔ 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

★ 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>

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

Hungry to learn more!

Please feel to drop me an email at: rasheed@aurorasolutions.org

angular js recommended practices - mini

feature approach

type approach

good approach

approaches approach

type of object approach

file organization rp

files onlyconclusion

scopes rp

Technology

angular js

angular js meetup

angular js learning

angular js course content - amazon s3 - s3-ap · angular js...

apresentação angular js

다시보는 angular js

angular js fundamentals

angular js 4php

angular js - introduction

angular js. contents about angular js hassle free angular js...

#speakgeek - angular js

pro angular js

6.angular js

angular js: first look เริ่มต้น angular js...

angular js 2

angular js routing

let’s angular js!!