This presentation has been prepared by Oleksii Prohonnyi for internal Angular.js training to improve skills of newbies in JS/Angular. Part 1 (Introduction): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-1-introduction Part 3 (Performance): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-3-performance Part 4 (Angular 2.0): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-4-angular-20 Part 5 (Experience): https://www.slideshare.net/oprohonnyi/dive-into-angular-part-5-experience

1. DIVE INTO ANGULAR,
PART 2: ARCHITECTURE
_by Oleksii Prohonnyi

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

3. SEPARATION OF CONCERNS

4. 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

5. SEPARATION OF CONCERNS:
VERTICAL

6. SEPARATION OF CONCERNS:
HORIZONTAL

7. CONSISTENT SYNTAX

8. 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

9. FILE STRUCTURE

10. 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

11. FILE STRUCTURE: BY TYPE

12. FILE STRUCTURE: BY FEATURE

13. NAMING CONVENTION

14. 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”).

15. DATA SHARING BETWEEN
CONTROLLERS

16. DATA SHARING BETWEEN
CONTROLLERS: SERVICE
 Shared service should be created and injected in all controllers
which use the data.

17. 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.

18. DATA SHARING BETWEEN
CONTROLLERS: EVENTS
 Angular’s $emit, $broadcast and $on fall under the common
“publish/subscribe” design pattern.
 See more: toddmotto.com

19. DEBUG

20. DEBUG
 Natively (See more: ng-book.com)
 External tools:
– Batarang by AngularJS
– ng-inspector
– AngScope

21. REFERENCES

22. REFERENCES
 https://github.com/angular/angular-seed
 http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-
components.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-
code
 https://www.airpair.com/angularjs/posts/top-10-mistakes-
angularjs-developers-make

24. HOME TASK

25. 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”).

26. HOME TASK: HOME PAGE

27. HOME TASK: PHOTO PAGE

28. Oleksii Prohonnyi
facebook.com/oprohonnyi
linkedin.com/in/oprohonnyi