dive into angular, part 2: architecture
TRANSCRIPT
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