Your SlideShare is downloading. ×
  • Like
Les Fondamentaux D'Angular JS | Hmidi Hamdi
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Les Fondamentaux D'Angular JS | Hmidi Hamdi

  • 163 views
Published

 

Published in Engineering
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
163
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
1
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Les Fondamentaux d’Angular JS Hmidi Hamdi
  • 2. C’est quoi Angular JS? - AngularJS est un Framework JavaScript open-source développé par Google. - Ce Framework facilite grandement le développement d'application web selon le modèle MVC* (Modèle Vue Controleur). - Utilisée pour développer des applications SPA*(Single Page Application). - Framework des applications coté client.
  • 3. SPA ”Single Page Application”
  • 4. MVC “Model View Controller”
  • 5. Exemple http://devfest.google-club.com/
  • 6. Pourquoi Angular JS? - Utilise le modèle MVW (Model View Wathever). - Flexible avec les filtres. - Ecrire moins du code.
  • 7. Hello Angular JS ! <!doctype html> <html ng-app> <head> <title>Hello Angular JS</title> <SCRIPT TYPE="text/javascript" src="JS/angular.min.js"></SCRIPT> </head> <body > <h1> {{« Hello Angular JS» }} </h1> </body> </html>
  • 8. Directives, Filters and Data binding
  • 9. Directives Une directive est une stratégie pour enseigner des nouveaux astuces au HTML. Càd rendre le HTML Dynamique.
  • 10. Exemple <!doctype html> <html> <head> <title>Exemple 1</title> <SCRIPT TYPE="text/javascript" src="JS/angular.min.js"></SCRIPT> </head> <body ng-app> <input type="text" ng-model="name" > <h1>Hello {{name}} </h1> </body> </html> Directive Directive Data Binding
  • 11. Views, Controllers and Scope View Controller$Scope
  • 12. Exemple : View and Controller <!doctype html> <html ng-app > <head> <title>Exemple 2</title> <SCRIPT TYPE = "text/javascript" src= "JS/angular.min.js"></SCRIPT> <script type="text/javascript" src="JS/Controller1.js"></script> </head> <body ng-controller="monContr" > <h1> Membres </h1> <div id = "membre" ng-repeat = "item in items" > <h1>Nom et Prenom : </h1> {{item.nom}} - {{item.prenom}} <h2>Club : </h2> {{ item.club }} </div> </body> </html> function monContr($scope){ $scope.items=[{‘’nom’’:"Hamdi",’’prenom’’:"Hmidi",’’club’’:"IGC" }, {‘’nom’’:"Marwan",’’prenom’’:"Zouinkhi",’’club’’:"IGC"}, {‘’nom’’:"Bouchlema",’’prenom’’:"Sabri",’’club’’:"IGC"}]; }
  • 13. Modules
  • 14. Modules C’est un conteneur d’application , Chaque application web peut être constituée par plusieurs modules chaque module possède ça fonctionnalité. Var myapp= angular.module(‘module_name’,[]); Myapp.controller(‘test’, function($scope){ //TODO code }); <html ng-app=‘’ module_name’’>
  • 15. Events <!doctype html> <html ng-app="myapp"> <head> <title>EVENTS</title> <SCRIPT TYPE="text/javascript" src="angular.min.js"></SCRIPT> <SCRIPT TYPE="text/javascript" src="cont.js"></SCRIPT> </head> <body ng-controller="test"> <form action="#"> <input type="text" ng-model="newval"> <button ng-click="add()">Add</button> </form> <ul> <li ng-repeat="item in items">{{item}}</li> </ul> </body> </html> var myapp=angular.module('myapp',[]); myapp.controller('test',function($scope){ $scope.items=['IGC','SP','MIC','OVET','UGET','UGTE']; $scope.add= function(){ $scope.items.push($scope.newval); $scope.newval=''; } });
  • 16. Angular et AJAX $scope.todos=[]; $http.get('data.php').success(function(data){ $scope.todos=data; }); [ { "name":"Tache a faire ", "done":"false" }, { "name":"Tache a faire ", "done":"false" } ]
  • 17. Routes <!DOCTYPE html> <html ng-app="myapp"> <head> <script src="angular.js"></script> <script src="angular-route.js"></script> <script src="app.js"></script> </head> <body> <div ng-view></div> </body> </html> var myapp = angular.module("myapp", ['ngRoute']); myapp.config( function($routeProvider) { $routeProvider. when('/page1', { templateUrl: 'page1.html', controller: 'page1Ctrl' }). when('/page2/:id', { templateUrl: 'page2.html', controller: 'page2Ctrl' }). otherwise({ redirectTo: '/page1' }); } ); myapp.controller("page1Ctrl", function($scope) { $scope.page = "1"; }); myapp.controller("page2Ctrl", function($scope, $routeParams) { $scope.page = $routeParams.id; });
  • 18. Factories var myapp=angular.module("myapp",[]); myapp.factory("DataFactory",function($http){ var Factory={}; var Response=$http.get("data.json"); Factory.DataGet= function(){ return Response; } return Factory; }); myapp.controller('Ctrl', function($scope,DataFactory){ $scope.tab=[]; DataFactory.DataGet().success(function(dt){ $scope.tab=dt; }); }); [ { "name":"Hamdi", "surname":"Hmidi" }, { "name":"Sabri", "surname":"Bouchlema" } ]
  • 19. Let’s Code
  • 20. Merci pour votre attention