Download - Dive into Angular, part 2: Architecture
![Page 1: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/1.jpg)
DIVE INTO ANGULAR,PART 2: ARCHITECTURE
_by Oleksii Prohonnyi
![Page 2: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/2.jpg)
AGENDA Separation of concerns Consistent syntax File structure Naming convention Data sharing between controllers Debug References
![Page 3: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/3.jpg)
SEPARATION OF CONCERNS
![Page 4: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/4.jpg)
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
![Page 5: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/5.jpg)
SEPARATION OF CONCERNS: VERTICAL
![Page 6: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/6.jpg)
SEPARATION OF CONCERNS: HORIZONTAL
![Page 7: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/7.jpg)
CONSISTENT SYNTAX
![Page 8: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/8.jpg)
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
![Page 9: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/9.jpg)
FILE STRUCTURE
![Page 10: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/10.jpg)
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
![Page 11: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/11.jpg)
FILE STRUCTURE: BY TYPE
![Page 12: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/12.jpg)
FILE STRUCTURE: BY FEATURE
![Page 13: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/13.jpg)
NAMING CONVENTION
![Page 14: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/14.jpg)
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”).
![Page 15: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/15.jpg)
DATA SHARING BETWEEN CONTROLLERS
![Page 16: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/16.jpg)
DATA SHARING BETWEEN CONTROLLERS: SERVICE Shared service should be created and injected in all controllers
which use the data.
![Page 17: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/17.jpg)
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.
![Page 18: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/18.jpg)
DATA SHARING BETWEEN CONTROLLERS: EVENTS Angular’s $emit, $broadcast and $on fall under the common
“publish/subscribe” design pattern.
See more: toddmotto.com
![Page 19: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/19.jpg)
DEBUG
![Page 20: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/20.jpg)
DEBUG
Natively (See more: ng-book.com) External tools:
– Batarang by AngularJS– ng-inspector– AngScope
![Page 21: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/21.jpg)
REFERENCES
![Page 22: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/22.jpg)
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
![Page 23: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/23.jpg)
![Page 24: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/24.jpg)
HOME TASK
![Page 25: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/25.jpg)
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”).
![Page 26: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/26.jpg)
HOME TASK: HOME PAGE
![Page 27: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/27.jpg)
HOME TASK: PHOTO PAGE
![Page 28: Dive into Angular, part 2: Architecture](https://reader035.vdocuments.net/reader035/viewer/2022062823/5872b3321a28ab523c8b5f6f/html5/thumbnails/28.jpg)
Oleksii Prohonnyi
facebook.com/oprohonnyi
linkedin.com/in/oprohonnyi