angularjs 101
TRANSCRIPT
ANGULARJS 101"Cause evrything is cool the ng-way"
#GDG Blida #DEVFEST
#badjokes!
HOUSSEM YAHIAOUI
AKA : EL-CODE
Student & GDG Blida member
&
MEAN stack lover & AngularJS indoor speacker
PS: I'M NOT A PSYCHOPATH
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 SPA3. 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
And his PM Said
AngularJS is :
1. An intuitive framework that makes it easy to organizeyour code.
2. An MV* framework : MVC / MVVM / MVP ...
3. A two way data binding framework : a datasynchronization method that let the value change inmodel 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 aSingle 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 andUI/UX capable application that makes you feel like a JS guru
and makes you looks good in public aka: "Khshine"Me
Another Question:
Why we don't use Jquery
Jquery capabilites are framed in the DOM manipulation sothe framework can't handle certain SPAs needed
behaviours such as routing & role decaupling aka SOC ...
ANGULARJS ANATOMY !
NG APP !
App or Module ?
Simple RE : App = Module*
& remember
The What ?
Consider the module as your container, that container canhave your application different parts : Controllers / Filters/ Services / Directives / Constants / Values / Interceptors
...
THE HOW!Angularjs apps like many other framework have a Viewside and a Js files which attach to it and manage it so in
order to have a fully working application we need thefollowing:
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 appFrom the angularjs.org site
Angular support two type of services:
1. Core services: Are the ones shiped with angular outside of the boxwhich 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 tosuite our special needs and also we can use them whenever we want.
Services in Angular have two different names andmanners to code them, we have:
1. Factories
2. Services
So far we have a anything like a SPALet's change it !
SPAs neat functionality is Routing
Let's talk about that one
AngularJS services are a poviders of somehow they providesomething when they called
and because of that we have the Routing servicerepresented in the officiel ngRoute module. or other the
new awesome module the ui-router module.
let's $digest that !
From our CodeLab Code
Let's analyse the code :
1. $stateProvider != an Angularjs Service, it's a ui-routerservice
2. the State represent a route a urlproperty in ourqueryString
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 functionthat 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 awayvar 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 wayangular.module('app').controller('Class', function($scope){ $scope.name = "houssem"; };
But wait there is something to consider
"Optimisation"
So after minificationWe are goins to have the folowing
var Class=function(s){s.name="houssem";};angular.module('app').controller('Class', Classy);
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// your javascript code and push the angular configuration away
var Classy = function($scope){ $scope.name = "houssem"; };
// 'DI' magicClassy.$inject = ['$scope'];// NG Associate the controller to the app in hand !angular.module('app').controller('Class', Classy);
so after minification we're going to have the followingvar Classy=function(s){s.name="houssem";};Classy.$inject=['$scope'];angular.module('app').controller('Class', Classy);
The result : Same mess with correct output and a happyconsole
WHATS IS A FACTORY!
Problimatic : The Web need DATA
As a solution:
AngularJS factory can help us getting the requiried informations in order touse it in data needed places.
The Factory syntax !
// 1/2 ways to write factories this way let you focus on// your javascript code and push the angular configuration away
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 + ' !'); } });};//DIClassy.$inject = ['$scope', 'ClassyFacotry', 'INotify'];// NG Associate the controller to the app in hand !angular.module('app').controller('Class', Classy);
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, andused 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 creatingnew directives to suit our needs.
That's looks promising but how Exactly it works ?
1. Consider the directive as : your regular HTML5 markupAttribute.
2. Consider the directive as : your new regular HTML5markup Tag.
3. Or Both !
<input type="text" name="email" awesome‐attrib‐directive="info" required="true">
<gdg‐awesome required="true"></gdg‐awesome>
<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