More Related Content More from Hamdi Hmidi (12) 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.
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>
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"}];
}
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='';
}
});
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;
});
