Angular JS Best Practices High Quality SPA Applications

Angular. JS Best Practices High Quality SPA Applications Soft. Uni Team Technical Trainers Software University http: //softuni. bg Java. Scr Framew ipt orks

Table of Contents 1. File & Folder Organization 2. Organizing Modules 3. Configuring and Running Apps 4. Naming Conventions 5. Controllers, Services, Directives Roles 6. Dealing with Scope 7. Communication between components 8. Breaking page into components 2

File & Folder Organization How to structure Angular code? 3

File Organization – Angular Seed § § § § /components § viersion-directive. js § interpolate-filter. js /view 1 § View 1. html § View 2. js /view 2 app. css app. js index. html § By Type § /js /controllers § /services § /filters § /directives § app. js § § /partials § /styles § index. html 4

File Organization – Angular Seed § By Feature § /authentication § /ads § public. Ads. Ctrl. js § By Feature then Type /authentication § /ads § /controllers § § § ads. Data. Svc. js § § § /profile § /styles § index. html /services § § public. Ads. html public. Ads. Ctrl. js ads. Data. Svc. js /partials § public. Ads. html /styles § index. html § 5

Dealing with Angular Modules What are modules and how to use it? 6

Angular Modules § Modules are NOT containers for the objects in your application § Modules does NOT provide a sort of namespacing § Angular is creating an injector § The injector is the namespace for the objects § There is only one injector for a given Angular application § Only one object of a given name can exist in the injector 7

Angular Modules - Example angular. module('app 1', ['app 2', 'app 3']); angular. module('app 2', []); angular. module('app 3', []); angular. module('app 2'). controller('Ctrl 1‘, function($scope) { $scope. name = 'Ctrl 1 in App 2'; }); angular. module('app 3'). controller('Ctrl 1‘, function($scope) { $scope. name = 'Ctrl 1 in App 3'; }); <body ng-app="app 1"> Prints: Ctrl 1 in App 3 <div ng-controller="Ctrl 1">{{name}}</div> </body> 8

Angular Injector Module 1 Module 2 Ctrl 1 Ctrl 2 Service 1 Directive 1 Ctrl 3 Ctrl 4 Service 2 Directive 2 9

Organizing Modules § One module Module § Two modules Main. Module Common. Module § Multiple modules Main. Module Sub. Module 1 Sub. Module 2 Sub. Module 3 10

Configuring and Running Applications Angular. run & Angular. config

Configuring and running applications § Angular. config() § Configuration blocks get executed during the provider registrations and configuration phase (pre-init). Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured. § Angular. run() § Run blocks get executed after the injector is created (post-init) and are used to kickstart the application. Everything can be injected into the run blocks because Angular has already bootstrapped the dependency injection. 12

Angular execution order § app. config() § app. run() § directive's compile functions (if they are found in the DOM) § app. controller() § directive's link functions (again, if found) 13

Naming Conventions 14

Naming Conventions § Controllers § schedule or schedule. Ctrl § Services § schedule or schedule. Svc § Filters § rating or rating. Filter § Directives § small. Schedule or small. Schedule. Drct or small-schedule § Partials § schedule - schedule. html or schedule. Display. html 15

Components Responsibilities Design guidelines for different components 16

Components Responsibilities § Controllers § Directives § Setup the Scope § Manipulate DOM § View Interaction § Receive view events § Coordinate view and model § Services § Handle non-view logic § Views § Display the application § Declare bindings & directives § Communicate with the server § Hold data and state 17

Design guidelines § Your components should do only what is responsible for § Services § Single Responsibility Principle § Cohesive § Loosely Coupled § Good Interface § Testable 18

Design guidelines § Controllers § Coordinate view and model § Directives Purposes § Widgets § DOM Events § Functionality 19

Dealing with the Scope 20

Scope Overview § Angular always starts with the Root Scope § All scopes in application are in hierarchy § All scopes belong to exactly one element § Relationship types § Shared scope § Inherited scope § Isolated scope

Communication Between Components § Inherited Scope § Everything defined in parent scope is available in child scopes § Communicating with Events $scope. $on('category. Clicked‘, function(event, category) { }); $root. Scope. $broadcast('category: clicked ', category); § Communicating with Services $scope. clicked = function(category) { category. Svc. clicked(category) } $scope. categories = category. Svc. get. Filtered. Categories();

Breaking Page Into Components § Inline controllers – ng. Controller <div ng-controller="sidebar. Ctrl"> … </div> § ng. Include & ng. Controller <div ng-include="'sidebar. html'" ng-controller="sidebar. Ctrl"> … </div> § Directives <side-bar></side-bar> app. directive('nav. Bar', function() { return { restrict: 'E', template. Url: 'sidebar. html ', controller: 'sidebar. Ctrl' }}); 25

Avoiding FOUC in Views § Flash Of Uncompiled Content § Avoiding FOUC § ng. Cloak – Put it only at elements with bindings (not at body) § ng. Bind – Add   in bind elements (don’t leave them empty) § Waiting image <img src="spinner. gif" ng-hide="true" width="100 px" /> <div ng-cloak><h 1 ng-bind="person. name">  </h 1></div> 26

Writing Valid HTML with Angular. JS § Writing valid HTML can be important § Use only element and attribute forms of directives § Use data prefix if you are using attribute form of directives <body data-ng-app="app"> <div data-ng-controller="sidebar. Ctrl"> <div data-categories></div> </body> 27

Minification § Manually minsafe § Use array to declare your dependencies app. controller('main. Ctrl', ['$scope', 'my. Svc', function($scope, my. Svc) { $scope. data = my. Svc. data; }]); § Use ng. Min – Utility that minsafe your code 1. Install ngmin npm install ngmin -g 2. Minsafe you code ngmin app. js app. save. js 3. Minify your minsaved code 28

Angular. JS Best Practices ? s n stio e u Q ? ? ? https: //softuni. bg/courses/javascript-frameworks

License § This course (slides, examples, demos, videos, homework, etc. ) is licensed under the "Creative Commons Attribution-Non. Commercial. Share. Alike 4. 0 International" license § Attribution: this work may contain portions from § "SPA with Angular. JS" course by Telerik Academy under CC-BY-NC-SA license 30

Free Trainings @ Software University § Software University Foundation – softuni. org § Software University – High-Quality Education, Profession and Job for Software Developers § softuni. bg § Software University @ Facebook § facebook. com/Software. University § Software University @ You. Tube § youtube. com/Software. University § Software University Forums – forum. softuni. bg