Introduction-Angularjs-ToulouseJs
AngularJs
une approche moderne du développement Web
Les Concepts de Base
- Two-Way data binding
- Directives / Templates
- Injection de dépendance
- ...
Two Way Data binding
Vue
<input ng-model='model1'/>
Hello {{model1}}!
Vue
<div ng-controller='DataBindCtrl'>
<input ng-model='model2'/>
Hello {{model2}}!
</div>
Controlleur
function DataBindCtrl($scope) {
$scope.model2 = "World";
}
Hello World!
Les Directives
ng-show ng-class
Vue
<div ng-controller="DirectiveTestCtrl">
<button ng-click="ajouteMessage()"> + </button>
{{messageCount}}
<div ng-show="messageCount > 3" ng-class="{alert: messageCount > 5}">
Il y a {{messageCount}} messages
</div>
</div>
Controlleur
function DirectiveTestCtrl($scope) {
$scope.messageCount = 0 ;
$scope.ajouteMessage = function(){
$scope.messageCount++;
}
}
Il y a 0 messages
ng-repeat
Vue
<ul>
<li ng-repeat="message in messageListe track by $index">{{message}}</li>
</ul>
Controlleur
function DirectiveTestCtrl($scope) {
$scope.messageListe = ["message1","message2"];
$scope.ajouteMessage = function(){
$scope.messageListe.push("message"+parseInt(Math.random()*10,10));
}
}
- message1
- message2
Une directive peut être
- Un attribut :
<span my-directive=""></span>
- Une classe :
<span class="my-directive: expression;"></span>
- Un element :
<my-directive></my-directive>
- Un commentaire :
<!-- directive: my-directive expression -->
Services et injection de dépendance
Injection possible dans
- Controlleur
- Service
- Directive
- Filtre
Exemples
angular.module('myModule',[])
.value('myValue', 'Hello World')
.controller('myController', function($scope, myValue) {
$scope.value = myValue;
});
angular.module('myModule',['ngResource'])
.controller('myController', function($scope,$resource) {
var User = $resource('/user/:userId', {userId:'@id'});
User.get({userId:123}, function(user) {
user.abc = true;
user.$save();
});
});