We will talk about all aspects of building a single page application with AngularJS, and we will discuss real examples from day-to-day work. We will also cover a large amount of theory about general web development, best practices, and today's client demands. We will focus on three (3) main points: architecture, security, and real time notification.

2. Igor Talevski
Developer @ http://it-labs.com/
2
@TalevskiIgor

3. Please Mute your
mobile devices
3

4. General Sponsors
Platinum Sponsors
Silver Sponsors
Gold Sponsors
Bronze Sponsors
4

5. Introduction
5

6. Angular learning curve
6

7. SPA concepts
• SPA works and feels more like an application then a web page.
• SPA separates UI and data, SPA communicates with server only with JSON REST API (Send/Receive
JSON using AJAX)
• Reducing bandwidth usage is also a plus
• SPA can use caching and local storage effectively.
• You can easily fake JSON data communication to test SPA, and you can also easily fake JSON requests
to server to write unit tests.
• Some SPAs don’t require SEO, but for those that do, the solutions aren’t straightforward.
• Analytics is harder to implement
7
Single-Page Applications (SPAs) are Web apps that load a single HTML page
and dynamically update that page as the user interacts with the app.

8. 8
Normal page life circle

9. 9
SPA life circle

10. Automatic Initialization
• load the module associated with the directive.
• create the application injector
• compile the DOM treating the ngApp directive
as the root of the compilation.
(This allows you to tell it to treat only a portion
of the DOM as an Angular application.)
10
Angular initializes automatically upon DOMContentLoaded event or when the angular.js script
is evaluated if at that time document.readyState is set to 'complete‘.

11. Manual Initialization
• After the page and all of the code is loaded,
find the root element of your AngularJS
application, which is typically the root of the
document.
• Call angular.bootstrap to compile the element
into an executable, bi-directionally bound
application.
11
If you need to have more control over the initialization process, you can use a manual bootstrapping
method instead. Examples of when you'd need to do this include using script loaders or the need to
perform an operation before Angular compiles a page.

12. 12
Combine with other library

13. 13
Combine with other library

14. 14
Architecture
Folders by type

15. 15
Architecture
Folders by feature

16. 16

17. 17
Architecture
Folders by type
Folders by feature
M I X

18. Application Structure LIFT Principle
• Make locating your code intuitive, simple and fast.
• When you look at a file you should instantly know what it contains and represents.
• Keep a flat folder structure as long as possible. When you get to 8+ files, begin
considering separation.
• Be DRY, but don't go nuts and sacrifice readability.
18
Structure your app such that you can Locate your code quickly Identify the
code at a glance keep the Flattest structure you can and Try to stay DRY.

19. 19
Module
You can think of a module as a container for the different parts of your app – controllers,
services, filters, directives, etc…

20. Data Binding
20
Automatic synchronization of data between the model and view

21. Controllers
Use controllers to:
• Set up the initial state of the $scope object.
• Add behavior to the $scope object.
Do not use controllers to:
• Manipulate DOM — Controllers should contain only business logic.
• Format input — Use angular form controls instead.
• Filter output — Use angular filters instead.
• Share code or state across controllers — Use angular services instead.
• Manage the life-cycle of other components (to create service instances).
21
In Angular, a Controller is defined by a JavaScript constructor function that is used to
augment the Angular Scope.

22. Nesting controllers
• The root scope
• The MainController scope
• The ChildController scope
• The GrandChildController scope
22

23. Demo
23

24. Dependency Injection
24
Dependency Injection (DI) is a software design pattern that deals with how components
get hold of their dependencies.

25. Dependency Annotation
25
Angular invokes certain functions (like service factories and controllers) via the injector. You need to
annotate these functions so that the injector knows what services to inject into the function.
Inline Array Annotation
Property Annotation
Implicit Annotation

26. Useful Tools For Developers
26
Yeoman generator for
AngularJS - lets you quickly
set up a project with
sensible defaults and best
practices.

27. Useful Tools For Developers
27

28. Useful Tools For Developers
28
• (local server) The actual grunt server
• (jshint) Make sure there are no obvious mistakes
• (jscs) Make sure code styles are up to par
• (clean) Empties folders to start fresh
• (postcss) Add vendor prefixed styles
• (wiredep) Automatically inject Bower components into the app
• (compass) Compiles Sass to CSS and generates necessary files if requested
• (filerev) Renames files for browser caching purposes
• (usemin) Performs rewrites based on filerev and the useminPrepare configuration
• (ngAnnotate) *tries to make the code safe for minification automatically
• (ngTemplate) register your AngularJS templates in the $templateCache
• (livereload) Watches files for changes and runs tasks based on the changed files
• uglify, cssmin, imagemin, svgmin, htmlmin, etc ...

29. Useful Packages
29
• ng-constant
If you develop a website that uses multiple environments such as development, staging and
production you probably have a configuration file of sorts to handle things like database
settings, mail server credentials, and so on for your backend system.
But how do you handle such variables in the front-end? Specifically, in an AngularJS App?

30. Directives
• 'A' - only matches attribute name
• 'E' - only matches element name
• 'C' - only matches class name
• 'M' - only matches comment
30
At a high level, directives are markers on a DOM element (such as an attribute, element name,
comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to
that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.

31. Getting data from the server
31

32. Getting data from the server
32

33. Getting data from the server
33
• data – {string | Object} – The response body transformed with the transform functions.
• status – {number} – HTTP status code of the response.
• headers – {function([headerName])} – Header getter function.
• config – {Object} – The configuration object that was used to generate the request.
• statusText – {string} – HTTP status text of the response.

34. Restangular
34

35. 35
Service Repository

36. 36
Usage of Service Repository

37. 37
Same-origin policy
The same-origin policy restricts how a document or script loaded from one origin can
interact with a resource from another origin. It is a critical security mechanism for
isolating potentially malicious documents.

38. 38
HTTP status codes

39. 39
HTTP status codes

40. 40
HTTP status codes
https://httpstatuses.com/

41. AngularUI Router
41
Routing frameworks for SPAs update the browser's URL as the user nagivates through the app.

42. JWT
42
JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims
securely between two parties.

43. Interceptors
43
For purposes of global error handling, authentication, or any kind of synchronous or
asynchronous pre-processing of request or postprocessing of responses, it is desirable to be
able to intercept requests before they are handed to the server and responses before they are
handed over to the application code that initiated these requests.

44. WebSockets
44
is an advanced technology that makes it possible to open an interactive communication
session between the user's browser and a server.

45. WebSockets
45

46. WebSockets
46

47. Demo
47

48. Complete the evaluation
and earn the chance to win
prizes in the closing raffle
http://eval.codecamp.mk
48
Questions

49. Thank you