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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Les Fondamentaux D'Angular JS | Hmidi Hamdi

222

Published on

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

No Downloads
Views
Total Views
222
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
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

×