AngularJS 101

ANGULARJS 101
"Cause evrything is cool the ng-way"
#GDG Blida #DEVFEST

HOUSSEM YAHIAOUI
AKA : EL-CODE
Student & GDG Blida member
&
MEAN stack lover & AngularJS indoor speacker

FRIENDLY BUT DEADLY PERSON
If you are || you know someone who like those stuff just call me at:
+213 0 - what-ever !

AGENDA !
1. What is Angular ?
2. What is a SPA
3. Angularjs Anatomy :
1. App vs module
2. Services
3. Controllers
4. Factories
5. Directives
So Let's Rock in !

First of all :
In order to make things even clearer !

WHAT IS ANGULARJS ?
what about a History lesson !

Developed in 2009 By : Misko Hevery, publicly released in
oct 2010 version : 0.9.0 and now we're in version 1.3.6

AngularJS is :
1. An intuitive framework that makes it easy to organize
your code.
2. An MV* framework : MVC / MVVM / MVP ...
3. A two way data binding framework : a data
synchronization method that let the value change in
model and view side.

Me when i start to get along with Angularjs

SPA !
Question:
What's that ?

Spa !
"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."
Mike Wasson
Or :
"An awesome relatively new tech for awesome cool and
UI/UX capable application that makes you feel like a JS guru
and makes you looks good in public aka: "Khshine"
Me

Why we don't use Jquery
Jquery capabilites are framed in the DOM manipulation so
the framework can't handle certain SPAs needed
behaviours such as routing & role decaupling aka SOC ...

Simple RE : App = Module*
& remember

The What ?
Consider the module as your container, that container can
have your application different parts : Controllers / Filters
/ Services / Directives / Constants / Values / Interceptors
...

THE HOW!
Angularjs apps like many other framework have a View
side and a Js files which attach to it and manage it so in
order to have a fully working application we need the
following:

In JS Side !
// in the app.js file or what ever you want to name it
angular.module('application name', ['External modules / it's blank by default]);
//or
var app = angular.module('application name', []);
// now we use the handled variable instead
app.
*
*
*
*

In View Side !
Template / Index / Fragment ... *
<html ng‐app="Application Name">
<head>
<!‐‐ Something HERE ! ‐‐>
</head>
<body>
<!‐‐ Something HERE ! ‐‐>
</body>

ANGULARJS SERVICES
Question in mind !
What's a service ? and why we Should use it ?

The What ?
A substitutable objects that are wired together using DI.
You can use services to organize and share code across
your app
From the angularjs.org site

Angular support two type of services:
1. Core services: Are the ones shiped with angular outside of the box
which mean that we can use them whenever we want.
- A core service is prefixed by the : "$" sign like : $http / $q / $window ...
2. Custom services: Are the ones that we write with and for angular to
suite our special needs and also we can use them whenever we want.

Services in Angular have two different names and
manners to code them, we have:
1. Factories
2. Services

So far we have a anything like a SPA
Let's change it !

SPAs neat functionality is Routing
Let's talk about that one

AngularJS services are a poviders of somehow they provide
something when they called
and because of that we have the Routing service
represented in the officiel ngRoute module. or other the
new awesome module the ui-router module.
let's $digest that !

Let's analyse the code :
1. $stateProvider != an Angularjs Service, it's a ui-router
service
2. the State represent a route a urlproperty in our
queryString
3. Each route need 4 main things :
1. A Url
2. A Name
3. A Controller - we will talk about that in the next slide -
4. A template : an html page that shows our needed info

WHATS IS A CONTROLLER!
Angularjs controller is a javascript constructor function
that is used to augment the Angular Scope
From the angularjs.org site

The How !
// 1/2 ways to write controllers this way let you focus on
// your javascript code and push the angular configuration away
var Classy = function($scope){
$scope.name = "houssem";
};
// NG Associate the controller to the app in hand !
angular.module('app').controller('Class', Classy);
Or
// 2nd way to write your angurlarjs controller using the angularjs documented way
angular.module('app').controller('Class', function($scope){
};

But wait there is something to consider
"Optimisation"

So after minification
We are goins to have the folowing
var Class=function(s){s.name="houssem";};
So one big mess of unreadable code
+
Unkown ng arguments !
=

We Need a solution !
Dont fear "DI" is here !
But How? and Who it's gonna FIX the problem!

The How !
// 1/2 ways to write controllers this way let you focus on
var Classy = function($scope){
};
// 'DI' magic
Classy.$inject = ['$scope'];
so after minification we're going to have the following
var Classy=function(s){s.name="houssem";};Classy.$inject=['$scope'];
The result : Same mess with correct output and a happy
console

WHATS IS A FACTORY!
Problimatic : The Web need DATA
As a solution:
AngularJS factory can help us getting the requiried informations in order to
use it in data needed places.

The Factory syntax !
// 1/2 ways to write factories this way let you focus on
var ClassyFactory = function($http){
return {
getGDGBlidaMembers : function(year){
return $http.get('/DATA ENDPOINT ROUTE/'+year);
}
};
// DI
ClassyFactory.$inject = ['$http'];
// NG Associate the factory to the app in hand !
angular.module('app').factory('ClassyFactory', ClassyFactory);
PS : we're using the revealing pattern ;-)

But : you may say the following :

Now we have the needed data, let's use it !
But How ?

Simply declare it as dependency in your Controller
var Classy = function($scope, ClassyFacotry, INotify){
ClassyFactory.getGDGBlidaMembers(2014)
.success(response) {
$scope.data = response.members;
INotify.onSuccess('Data Gathring', 'Done with success !');
}.error(response){
INotify.onError('An error has occured', response.err_message + ' !');
}
});
};
//DI
Classy.$inject = ['$scope', 'ClassyFacotry', 'INotify'];
Your now well covered !
Display It ^_^

WHATS IS A DIRECTIVE !
For me a Directive is
HTML5 ++

But What's exactly i a Directive?
A directive is a new concept introduced in Angularjs, and
used to :
1. To give our Page / Template / View a new set of functionnality.
2. Let us handle our JS logic without extra work.
3. Best part is : Angularjs let and gives you the power of creating
new directives to suit our needs.

That's looks promising but how Exactly it works ?
1. Consider the directive as : your regular HTML5 markup
Attribute.
<input type="text" name="email" awesome‐attrib‐directive="info" required="true">
2. Consider the directive as : your new regular HTML5
markup Tag.
<gdg‐awesome required="true"></gdg‐awesome>
3. Or Both !
<gdg‐awesome grpe‐name="GDG" grpe‐loc="Blida"></gdg‐awesome>

Angular is already have a really cool set of core directives
And more ...

That was it ! / Keep in touch with me !
G+ : +HoussemYahiaoui
Twittre : @free_g33k
Facebook : fcb.com/houssem.intern0t
#peace

AngularJS 101

More Related Content

What's hot

Viewers also liked

Similar to AngularJS 101

Recently uploaded

AngularJS 101