From zero to HERO with

Trifon Statkov

About me
Trifon Statkov
Software developer at
Co-owner at

@Tricho340

The Plan
I will make you feel confident using
Angular JS in less than 60 minutes
Presentation comprises of 3 parts:
Part I. Absolute introduction to Angular JS
Part II. Angular JS building blocks
Part III. Some coding

Part I. Absolute introduction to

Angular JS

Angular JS facts (1)

Open-source JavaScript framework
Developed in 2009 by Miko Hevery
and Adam Abrons
Maintained by Google
Actively developed and supported

Why use it?

The problem HTML is great for static
pages, but has no tools for web
applications
The solution extend and adapt HTML
vocabulary with some additional
declarations that are useful for web
applications

More benefits
Less boilerplate code
Less effort in mundane tasks allowing
for better focus on what is ACTUALLY
VALUABLE THE LOGIC
More efficiency in development
Separation of concerns

Some more details

Uses JQLite (a subset of JQuery) for
DOM manipulations
If you include jQuery before Angular, it
will be used instead of JQLite

Part II. Angular JS building blocks

Angular JS is MVC

MVC = Model-View-Controller
Less dependencies
Improves maintainability
It is easier to read and understand code

M for Model
Holds the data
Notifies the View and the Controller for
changes in the data
Does not know about the View and the
Controller

V for View

Displays stuff (buttons, labels, )

This is what your users will see
Knows about the Model
Usually displays something related to
the current state of the Model

C for Controller
Controls everything
Knows about both the Model and the
View
The logic resides in it
What to happen, when and how

Two-way data binding

View is updated automatically when the
Model is changed
Model is updated automatically when a
value in the View has changed
No DOM manipulation boilerplate
needed!

Two-way data binding illustrated

Dependency Injection
No more global objects
Classes will get the objects they need
(their dependencies) in order to work

Anatomy of an Angular application

(1)

Controllers
Models
Services
Directives
Modules
Filters
Factories
Scopes

Templates
Routes
Animations

Controllers in Angular JS
Define the applications behaviour

What to put in the Controller?

Focus on the application logic
Dont worry about the Model Angular
JS will take care of it

Controllers in Angular JS (example)

The Scope object ($scope) (1)

One scope for each controller
The GLUE between the View and the
Controller
A hash of key/values
Holds the data to display in the View
$rootScope object visible in all
controllers

Communication between scopes

Dispatching event from parent

scope to child scope
$scope.$broadcast(event_name,
(optional) array of
arguments to pass
to event listeners);
// where $scope is the parent scope

Detecting events dispatched from

parent scope in the child scope
$scope.$on(event_name, function(args)
{
// code to invoke if the event occurs
});
// where $scope is the child scope

Dispatching events from child scope

to parent scope
$scope.$emit(event_name);
// where $scope is the child scope

Detecting events dispatched from

child scope in the parent scope
$scope.$on(event_name);
// where $scope is the parent scope

What is Angular module? (1)

Container for

Controllers
Services
Directives
Factories
Filters
Configuration information

What is Angular module? (2)

Each Angular JS app contains at least
one module
Discrete logical part of the application

What is Angular directive? (1)

Use them when you have to make DOM
manipulations
Ever wanted to create your own tag or
attribute this is how you do it!
Takes you one step closer to creating
domain-specific markup

What is Angular directive? (2)

Directives should not change a model
or controllers logic
All they handle is creating the pages
content and structure of elements

What is Angular filter? (1)

Reusable operation using which you can
modify the content that is shown on the
page
Examples: uppercase a value, filter
search results, etc.

Defining a new filter

module.filter(filter_name,
function(data) {
// data is filtered or modified
// in a specific manner and
returned
return data;
}

Using the filter we just defined

<div
data-ng-repeat=
record in records | filter:
filter_name
>
</div>

Providers (1)
4 types

Factory
Service
Value
Provider

Providers - Factory
We define a function that returns an
object to which we have attached
methods and properties that will be
accessible by factory users later
This object is available everywhere in
the module in which the factory was
defined via Dependency Injection

Factory example (1) defining the

factory
module.factory(factory_id, function() {
return {
functionname: function() {
return this is a function;
},
anotherfunction: function() {
// make a request and get data from backend
return data;
}
}
});

Factory example (2) using the

factory
Module.controller(ControllerName,
function ControllerName($scope,
factory_id) {
$scope.methodname = function() {
factory_id.functionname();
}
});

Providers - Service
You define a function in which additional
functions and properties are defined via
the this keyword

Service example (1) - defining a

service
module.service(service_name, function() {
this.function_name = function() {
return this is a functions result;
};
this.anotherfunction = function() {
// make a request to backend
// and fetch data
return data;
});

Service example (2) - using a

service in a controller
Module.controller(ControllerName,
function ControllerName($scope,
service_name) {
$scope.methodname = function() {
service_name.function_name();
}
});

Providers - value
Similar to constants
Could be used to store configuration
properties

Value example (1) - defining a

value
module.value(value_name, value);

Value example (2) - using a value in

a controller
Module.controller(ControllerName, function
ControllerName($scope, value_name) {
$scope.methodname = function() {
if (value_name == 1) {
// do something based on
// specific value of the constant
}
}
});

Providers - provider
Define $get method in a function that
returns the object to be injected
The object can have various properties
and methods similar to the object
returned by factory

Provider example (1) - defining a

provider
module.provider(provider_name, function() {
this.$get = function() {
return {
function_name: function() {
},
another_function: function() {
}
}
});

Provider example (2) - Using a

provider
Module.controller(ControllerName,
function ControllerName($scope,
provider_name) {
$scope.methodname = function() {
provider_name.function_name();
}
});

Angular JS best practices

Angular JS best practice #1

Create a separate for module for
Services
Controllers
Filters

Parts are more isolated and decoupled

Easier to test a part of the application

Angular JS best practice #2

Write some tests using Jasmine

What is Angular module?

Container for

Services
Directives
Factories
Filters
Configuration information

The ngApp directive

<div data-ng-app=>
</div>

Angular animation = easy

Introduced in latest build (05.04.2013)
and introduced by Misko in YouTube
video
Uses CSS3 transitions
Use the ngAnimate Angular directive for
the element you wish to animate

A word of warning
You better avoid using Angular JS for IE6
and IE7 projects
Because of lack of support for custom tags and
hashchange events

Stuff you did not see today (and you

should definitely check out)

A lot because Angular JS is HUGE

Writing tests and executing test suite
Form validation with Angular JS
Internationalization with Angular JS (i18n)
Localization with Angular JS (l10n)

Some great resources (1)

http://www.egghead.io/ - Angular JS video
course by John Lindquist (@johnlindquist)
http://www.yearofmoo.com/ - a blog that
contains some great articles about Angular
JS
http://angularjs.org/ - Angular JS official
web-site
http://docs.angularjs.org/api/ - Angular JS
API reference
https://groups.google.com/group/angular/ Angular JS Google Group

Some great resources (2)

https://chrome.google.com/webstore/detai
l/angularjs-batarang/ighdmehidhipcmcojjg
iloacoafjmpfk?hl=en
- Angular JS Batarang, a great solution for
debugging Angular JS applications
https://www.youtube.com/watch?featur
e=player_embedded&v=q-7mhcHXSfM#
! - A video demo of using Batarang

Some great resources (3)

https://github.com/angular/angular-seed
A starting point for Angular JS projects
Includes end to end tests folder where you
could easily add some tests to your app using
Jasmine

http://docs.angularjs.org/guide/dev_guide.
e2e-testing
A guide to testing Angular JS applications

Questions?

Thank you for your time

Expect very soon: SharePoint

Saturday!

Saturday,June 8, 2013
Same familiar format 1 day filled with sessions
focused on SharePoint technologies
Best SharePoint professionals in the region
Registrations will be open next week (15 th)!
www.SharePointSaturday.eu

Thanks to our Sponsors:

Diamond Sponsor:

Platinum Sponsors:

Gold Sponsors:

Swag Sponsors:
Media Partners: