Introduction au Framework AngularJs

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}}!

Hello !

Vue

                        <div ng-controller='DataBindCtrl'>
  <input ng-model='model2'/>
  Hello {{model2}}!
</div>

Controlleur

                        function DataBindCtrl($scope) {
  $scope.model2 = "World";
}

Hello World!

Le modèle reste indépendant de la vue

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++;
    }
}

0

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();
        });

      });

@maxdow