Angular JS v1.4.8

TECH SESSION Lapusneanu Gabi Costel

Key Features

01 Modules

02

03

Data Binding

Expressions

04Services

05Directives

Controllers 06

function module(name, requires, configFn)essions

name === 'hasOwnProperty'

What is a Module?

01

02

04

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

Creation Retrieval

angular.module('myModule', []); angular.module('myModule');

Signature

Basic Module (Steps)

01Place the script at the bottom of the page.

02Place ng-*app to the

root of your application.*["ng-", "data-ng-", "ng:", "x-ng-"]

03Create the ng-app

module.

Basic Module (Code)

Angular JS1 + 2 = 3

Basic Module (Bootstrap)

As a best practice, consider adding an ng-strict-di directive on the same element as ng-app

Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is evaluated if at that time document.readyState is set to 'complete'. At this point Angular looks for the ng-app directive which designates your application root.

You should call angular.bootstrap() after you've loaded or defined your modules. You should not use the ng-app directive when manually bootstrapping your app.

If window.name contains prefix NG_DEFER_BOOTSTRAP! when angular.bootstrap is called, the bootstrap process will be paused until angular.resumeBootstrap() is called.

A

M

D

Basic Module (Instance)

Basic Module (Compile)

Signature

Dependency Injection (DI)

The Angular injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested.

Dependency Annotation

1

2

3

$inject Property Annotation

Inline

Preferred way

Inferred Implicit

Annotation

Only works if code is not minified/obfuscated (is disallowed when the injector is in strict mode).

Dependencies are injected based on the order they are declared within $inject array.

Data Binding

Data-binding in Angular apps is the automatic synchronization of data between the model and view components.

The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application.

The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa..

A binding is denoted by double-curlies {{ }} or by ngBind directive.

It is preferable to use ngBind instead of {{ expression }}, or ng-cloak with {{expression}}. For better performance you can use One-Time Binding ::.

Expressions

AngularJS expressions are much like JavaScript expressions. They can contain literals, operators and variable.

{{expression}}

Angular JS1 + 2 = {{1 + 2}}1 + 2 = 3

//expression//

ServiceValue/

Constant

Factory Provider

Services

Services are objects whose API is defined by the developer writing the service.

Directives (specialized objects)

Directives are used to extend HTML.

DirectiveTypes

E

AC

MComment:

<!— directive: my-directive exp -->

Element name (default): <my-directive></my-directive>

Attribute (default): <div my-directive="exp"></div>

Class: <div class="my-directive:exp;“/>

Directive Definition Object

In the DOM we refer to directives by lower-case forms, in code we refer to directives by their case-sensitive camelCase normalized.

Execution Order

Propagation of Events

Time Directive (DEMO)

THANK YOU!