Embed Size (px)
Citation preview
Les Fondamentaux d’Angular JS
Hmidi Hamdi
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.
SPA ”Single Page Application”
MVC “Model View Controller”
Exemple
http://devfest.google-club.com/
Pourquoi Angular JS?
- Utilise le modèle MVW (Model View Wathever).
- Flexible avec les filtres.
- Ecrire moins du code.
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>
Directives, Filters and Data binding
Directives
Une directive est une stratégie pour enseigner des nouveaux astuces au HTML.
Càd rendre le HTML Dynamique.
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
Views, Controllers and Scope
View Controller$Scope
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"}];
}
Modules
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’’>
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='';
}
});
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"
}
]
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;});
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"
}
]
Let’s Code
Merci pour votre attention
