angularjs 1.x - your first application (problems and solutions)

2

Igor TalevskiDeveloper @ http://it-labs.com/

@TalevskiIgor

3

Please Mute your mobile devices

4

General Sponsors

Platinum Sponsors

Silver Sponsors

Gold Sponsors

Bronze Sponsors

5

Introduction

6

Angular learning curve

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

Single-Page Applications (SPAs) are Web apps that load a single HTML pageand dynamically update that page as the user interacts with the app.

8

Normal page life circle

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

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.

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

Combine with other library

13

Combine with other library

14

Architecture

Folders by type

15

Architecture

Folders by feature

16

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.

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

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

20

Data BindingAutomatic 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).

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

23

Demo

24

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

25

Dependency AnnotationAngular 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

Yeoman generator for AngularJS - lets you quickly

set up a project with sensible defaults and best

practices.

27

Useful Tools For Developers

28

Useful Tools For Developers• (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 • 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

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

32

Getting data from the server

33

Getting data from the server

• 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

35

Service Repository

36

Usage of Service Repository

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

HTTP status codes

39

HTTP status codes

40

HTTP status codes

https://httpstatuses.com/

41

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

42

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

43

InterceptorsFor 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 is an advanced technology that makes it possible to open an interactive communication session between the user's browser and a server.

45

WebSockets

46

WebSockets

47

Demo

48

Complete the evaluation and earn the chance to win prizes in the closing rafflehttp://eval.codecamp.mk

Questions

Thank you