Angular js

ABOUT ME
Lead Developer
FullStack Developer
Attaché
...
on the Histoweb project (Cytomine software).

ANGULAR ? WHAT IS THAT ?
*Angular, Angular, est-ce que j'ai une gueule d'Angular ?*

ANGULARJS
Framework Frontend
100% Javascript
Open source
MV*
Maintained by Google

PARADIGM
Most alternatives Angular
Explicit DOM modi cation Natural DOM extension
Imperative Declarative

BASED ON
Module
Controller
Scope
Service

MAIN CHARACTERISTICS
jqLite, Data Binding, Directives, Form Validation, Filters,
Dependency Injection.

JQLITE
subset 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>
   <head>
      <script>

      .controller("nameCtrl", function ($scope) {
         //$scope.me = "Renaud";
      });
      </script>
   </head>
   <body ngcontroller="nameCtrl">
      <input ngmodel="me"> <br/>
      I am {{me}}
   </body>
</html>

DIRECTIVES
Extend and enhance HTML.
Lots of built-in directives.
Contain the DOM manipulation.

FILTERS
Format the data displayed to the user.
Can be used throughout a module.

DEPENDENCY INJECTION
<!DOCTYPE html>
   <head>
      <script>

      .controller("dayCtrl", function ($scope, $filter, $http, days) {
         //...
      });
      </script>
   </head>
   <body>
<! Lot of cool stuff>
   </body>
</html>

DEMO
DIRECTIVES
ng-repeat, ng-show, ng-if,...

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 DRAWBACK
Angular is dying

WHO KILLED LAURA PALMER ANGULAR ?
ANGULAR2

WHAT IS DIFFERENT ?
Controller
Service
Module
$scope
jqLite
Directive
Dependency Injection
Component
Classes

“Mais à part ça, Madame la Marquise, tout va
très bien, tout va très bien.”

WHY SHOULD I LEARN IT ?
“Different languages solve the same problems
in different ways. By learning several different
approaches, you can help broaden your
thinking and avoid getting stuck in a rut.”
The Pragmatic Programmer: From Journeyman to Master

Follow me on Twitter
Demo les are on
https://github.com/geektortoise/angular_demo
THE END
@TheGeekTortoise
GitHub

Angular js

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

Similar to Angular js

Similar to Angular js (20)

More from Geeks Anonymes

More from Geeks Anonymes (20)

Recently uploaded

Recently uploaded (20)

Angular js