dive into angular, part 2: architecture

DIVE INTO ANGULAR,PART 2: ARCHITECTURE

_by Oleksii Prohonnyi

AGENDA Separation of concerns Consistent syntax File structure Naming convention Data sharing between controllers Debug References

SEPARATION OF CONCERNS

SEPARATION OF CONCERNS

Each entity should:– be responsible for single function/feature;– be placed into separate file;– handle only it’s own actions and events;– have single unique role.

See more: medium.com

SEPARATION OF CONCERNS: VERTICAL

SEPARATION OF CONCERNS: HORIZONTAL

CONSISTENT SYNTAX

CONSISTENT SYNTAX

Select the most suitable architecture approach and follow it without any excuses and exceptions.

"Angular App Structuring Guidelines" by John Papa "An AngularJS Style Guide for Closure Users at Google" by Google Any other

See more: medium.com

FILE STRUCTURE

FILE STRUCTURE

Organize your app having in mind the idea than any component should be reusable and extendable.

Use design patterns and architecture principles to organize relations between component’s files.

Easy way to check that file structure is fine – remove any component from the project files. This process should be easy and intuitive.

See more: scotch.io

FILE STRUCTURE: BY TYPE

FILE STRUCTURE: BY FEATURE

NAMING CONVENTION

NAMING CONVENTION

Avoid using Angular.js terms in file names, e.g. “Controller”, “Service”.

Name the file the way entity is called. Name the component folder the way the entity is named. Use unique and non-similar names for entities. Name of the entity should present what it is responsible for (e.g.

“statusbar”).

DATA SHARING BETWEEN CONTROLLERS

DATA SHARING BETWEEN CONTROLLERS: SERVICE Shared service should be created and injected in all controllers

which use the data.

DATA SHARING BETWEEN CONTROLLERS: GLOBAL NAME Both controllers should have references in global context, after

that all of them will be accessible even from native JavaScript code.

DATA SHARING BETWEEN CONTROLLERS: EVENTS Angular’s $emit, $broadcast and $on fall under the common

“publish/subscribe” design pattern.

See more: toddmotto.com

DEBUG

DEBUG

Natively (See more: ng-book.com) External tools:

– Batarang by AngularJS– ng-inspector– AngScope

REFERENCES

REFERENCES https://github.com/angular/angular-seed http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-co

mponents.html https://github.com/johnpapa/angular-styleguide https://leanpub.com/web-component-development-with-angularjs

/read https://egghead.io/courses/angularjs-application-architecture https://www.pluralsight.com/courses/angularjs-patterns-clean-cod

e

https://www.airpair.com/angularjs/posts/top-10-mistakes-angularjs-developers-make

HOME TASK

HOME TASK: SUMMARY

Main idea: admin interface for Sigma photo gallery application. Technologies: HTML5, CSS3, JavaScript (ES5), Angular.js (1.x) Functionality:

– Home page:• see the full list of uploaded images with (id, name, likes count, status);• click handler in table row (opens “Photo page”);• change handler for “Search” field (filter rows of the table due to input value).

– Photo page:• see full information about image (image, editable name, author, likes count);• click handler on “Save” button (save changes);• click handler on “Cancel” button (opens “Home page”).

HOME TASK: HOME PAGE

HOME TASK: PHOTO PAGE

Oleksii Prohonnyi

facebook.com/oprohonnyi

linkedin.com/in/oprohonnyi