angular js
TRANSCRIPT
ANGULARJS
BY
RENAUD HOYOUX
ABOUT MELead Developer
FullStack Developer
Attaché
...
on the Histoweb project (Cytomine software).
ABOUT CYTOMINE
ANGULAR ? WHAT IS THAT ?*Angular, Angular, est-ce que j'ai une gueule d'Angular ?*
ANGULARJSFramework Frontend100% JavascriptOpen sourceMV*Maintained by Google
WHAT'S ORIGINAL ?
PARADIGMMost alternatives Angular
Explicit DOM modication Natural DOM extension
Imperative Declarative
ARCHITECTURE
BASED ONModuleControllerScopeService
MAIN CHARACTERISTICSjqLite, Data Binding, Directives, Form Validation, Filters,
Dependency Injection.
JQLITEsubset of jQuery that implements only the most commonly
needed functionality.
One way
DATA BINDING
<!DOCTYPE html><html ngapp="exampleApp" > <head> <script src="angular.js"></script> <script>
</script> </head> <body ngcontroller="dayCtrl"> Today is day </body></html>
angular.module("exampleApp", []) .controller("dayCtrl", function ($scope) $scope.day = new Date(); );
Two way
DATA BINDING
<!DOCTYPE html><html ngapp="exampleApp" > <head> <script src="angular.js"></script> <script> angular.module("exampleApp", []) .controller("nameCtrl", function ($scope) //$scope.me = "Renaud"; ); </script> </head> <body ngcontroller="nameCtrl"> <input ngmodel="me"> <br/> I am me </body></html>
DIRECTIVESExtend and enhance HTML.Lots of built-in directives.Contain the DOM manipulation.
FORM VALIDATION
FILTERSFormat the data displayed to the user.Can be used throughout a module.
DEPENDENCY INJECTION<!DOCTYPE html><html ngapp="exampleApp" > <head> <script src="angular.js"></script> <script> angular.module("exampleApp", []) .controller("dayCtrl", function ($scope, $filter, $http, days) //... ); </script> </head> <body><! Lot of cool stuff> </body></html>
DEMO ?
DEMODIRECTIVES
ng-repeat, ng-show, ng-if,...
DEMOFILTERS
DEMOFORM VALIDATION
CONVINCED ?
DON'T FORGET !It is still JS !
INHERITANCE<!DOCTYPE html><html ngapp="exampleApp"> <body ngcontroller="topLevelCtrl"> <h4>Top Level Controller</h4> <div class="inputgroup"> <input class="formcontrol" ngmodel="dataValue"> </div> <div ngcontroller="firstChildCtrl"> <h4>First Child Controller</h4> <div class="inputgroup"> <input class="formcontrol" ngmodel="dataValue"> </div> </div> <div ngcontroller="secondChildCtrl"> <h4>Second Child Controller</h4>
MAIN DRAWBACKAngular is dying
WHO KILLED LAURA PALMER ANGULAR ?ANGULAR2
WHAT IS DIFFERENT ?ControllerServiceModule$scopejqLiteDirectiveDependency InjectionComponentClasses
WHAT IS DIFFERENT ?
“Mais à part ça, Madame la Marquise, tout vatrès bien, tout va très bien.”
WHY SHOULD I LEARN IT ?“Different languages solve the same problemsin different ways. By learning several different
approaches, you can help broaden yourthinking and avoid getting stuck in a rut.”
The Pragmatic Programmer: From Journeyman to Master
HOW ?JHipster
Follow me on Twitter Demo les are on
https://github.com/geektortoise/angular_demo
THE END@TheGeekTortoise
GitHub