Atelier de travail
app.js
L'atelier de travail est le squelette de base sur lequel on va travailler pour comprendre l'architecture AngularJS. Il est constitué des deux fichiers suivants :
CTRL+C pour copier, CTRL+V pour coller
1
var app = angular.module('nf29', []); // définition du module nf29
2
3
// ajouter un contrôleur au module4
app.controller('CdtCtrl',['$scope', function($scope){
5
6
$scope.name="Merouane"; // attachez l'attribut "name" au $scope
7
8
// attachez la fonction "hello" au $scope9
$scope.hello = function(){
10
11
alert($scope.name2);
12
}
13
14
$scope.changeName = function(){
15
if($scope.name=="NF29"){
16
$scope.name="Merouane";
17
}else{
18
$scope.name = "NF29";
19
}
20
}
21
22
}]);
var app = angular.module('nf29', []); // définition du module nf29
// ajouter un contrôleur au module
app.controller('CdtCtrl',['$scope', function($scope){
$scope.name="Merouane"; // attachez l'attribut "name" au $scope
// attachez la fonction "hello" au $scope
$scope.hello = function(){
alert($scope.name2);
}
$scope.changeName = function(){
if($scope.name=="NF29"){
$scope.name="Merouane";
}else{
$scope.name = "NF29";
}
}
}]);index.html
CTRL+C pour copier, CTRL+V pour coller
1
2
<html ng-app="nf29">
3
<head>4
<meta charset="UTF-8"/>
5
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
6
</head>7
<body class="container">
8
<div ng-controller="CdtCtrl">
9
10
<label class="success">Name 1 :</label>
11
<button type="button" class="btn btn-default" ng-click="changeName()"> Clicker pour changer ma valeur depuis le controlleur </button>
12
<h1>Hello {{name}}!</h1>
13
<hr>14
15
16
<label>Name 2 :</label>
17
<input type="text" ng-model="name2" placeholder="Enter a name">
18
<button type="button" class="btn btn-default" ng-click="hello()"> Clicker pour vérifier ma présence dans le controlleur </button>
19
20
<h1 ng-click="hello()">Hello {{name2}}!</h1>
21
22
</div>23
24
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
25
<script src="app.js"></script>
26
</body>27
</html><!doctype html>
<html ng-app="nf29">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
</head>
<body class="container">
<div ng-controller="CdtCtrl">
<label class="success">Name 1 :</label>
<button type="button" class="btn btn-default" ng-click="changeName()"> Clicker pour changer ma valeur depuis le controlleur </button>
<h1>Hello {{name}}!</h1>
<hr>
<label>Name 2 :</label>
<input type="text" ng-model="name2" placeholder="Enter a name">
<button type="button" class="btn btn-default" ng-click="hello()"> Clicker pour vérifier ma présence dans le controlleur </button>
<h1 ng-click="hello()">Hello {{name2}}!</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
