Les Fondamentaux D'Angular JS | Hmidi Hamdi

562 views

Published on

Published in: Engineering
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
562
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Les Fondamentaux D'Angular JS | Hmidi Hamdi

  1. 1. Les Fondamentaux d’Angular JS Hmidi Hamdi
  2. 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. 3. SPA ”Single Page Application”
  4. 4. MVC “Model View Controller”
  5. 5. Exemple http://devfest.google-club.com/
  6. 6. Pourquoi Angular JS? - Utilise le modèle MVW (Model View Wathever). - Flexible avec les filtres. - Ecrire moins du code.
  7. 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. 8. Directives, Filters and Data binding
  9. 9. Directives Une directive est une stratégie pour enseigner des nouveaux astuces au HTML. Càd rendre le HTML Dynamique.
  10. 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. 11. Views, Controllers and Scope View Controller$Scope
  12. 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. 13. Modules
  14. 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. 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. 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. 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. 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. 19. Let’s Code
  20. 20. Merci pour votre attention

×