<h1>{{ 1+1 }}</h1> // 2

<h1>{{ "Hello " + "world !!!" }}</h1> // Hello world

<h1>{{ "jaafar" | uppercase }}</h1> // JAAFAR

<input type="text" ng-model="ctrl.hello"/> <h1>{{ ctrl.hello }} world !!!</h1> 

<input type="text" ng-model="ctrl.myVar"/> 

<h1 class="{{ ctrl.myVar }}">Hello world !!!</h1>

<input type="text" ng-model="ctrl.hello"/> 

<h1>{{ ctrl.hello }} world !!!</h1> 

(function () {
  'use strict';

  angular
    .module('app', []);

})();

(function () {
  'use strict';

  angular
    .module('app')
    .controller()
    .directive()
    .pipe();

})();

(function () {
  'use strict';

  angular
    .module('app')
    .controller('AppController', AppController);

  function AppController() {
    var vm = this;
  }
})();

//Etat

$stateProvider.state('contact.detail', {     
    url: '/contacts/:id',    
    templateUrl: 'contacts.html',     
    controller: 'ContactsCtrl as contacts',    
    resolve: {...} 
}); 

//Route
$routeProvider.when('/contacts/:id', { 
    templateUrl: 'contacts.html',
    controller: 'ContactsCtrl as contacts',
    resolve: {...} 
});

// Activer un etat dans un controlleur
$state.go('mystate');


// Activer un etat dans un template
<a ui-sref="mystate">Lien</a>

// home.route.js
(function () {
  'use strict';

  angular
    .module('app.home').config(configState);

  function configState($stateProvider) {
    $stateProvider.state('main.home', {
      url: '/home',
      views: {
        'content@layout': {
          templateUrl: 'app/home/home.html',
          controller: 'HomeController as homeCtrl'
        }
      }
    });
  }
})();

// home.module.js
(function () {
  'use strict';

  angular
    .module('app.home', ['ui.router']);
})();

(function () {
  'use strict';

  angular
    .module('app.layout').config(configState);

  function configState($stateProvider) {
    $stateProvider
      .state('layout', {
        templateUrl: 'app/layout/layout.html'
      }).state('main', {
        parent: 'layout',
        abstract: true,
        views: {
          menubar: {
            templateUrl: 'app/layout/header/menubar/menubar.html',
            controller: 'MenubarController as menubar'
          },
          footer: {
            templateUrl: 'app/layout/footer/footer.html'
          }
        }
      });
  }
})();

<div class="container-fluid">
    <header>
        <nav class="menubar navbar navbar-inverse navbar-default" ui-view="menubar">
        <i>menubar</i>
        </nav>
    </header>
    <div class="main-content" role="main" ui-view="content"><i>content</i></div>
</div>
<footer class="footer minimal" ui-view="footer"><i>footer</i></footer>

//Etat

$stateProvider.state('contact.detail', {     
    url: '/contacts/:id',    
    templateUrl: 'contacts.html',     
    controller: 'ContactsCtrl as contacts',    
    resolve: {...} 
}); 

//Route
$routeProvider.when('/contacts/:id', { 
    templateUrl: 'contacts.html',
    controller: 'ContactsCtrl as contacts',
    resolve: {...} 
});

//Etat
$stateProvider.state('contact.detail', {     
    url: '/contacts/:id',    
    templateUrl: 'contacts.html',     
    controller: 'ContactsCtrl as contacts',    
    resolve: {
        contacts: function($http){
            return $http.get('/api/v1/contacts'); // promise
        },
        simple: function(){
            return 'simple';   
        }
        
    } 
}); 

// Controller
function contactDetailController($log, contacts, simple) {
    var vm = this;
    $log.log(contacts); // promise resolved
    $log.log(simple); // simple
}

//Component
angular
    .module('app.contacts')
    .component('contactsComponent', {
      bindings: {
        contacts: '<',
        simple: '@'
      },
      templateUrl: 'app/contacts/contacts.html',
      controller: contactsController,
      controllerAs: 'contactsCtrl'
    });

  function contactsController($log) {
    var vm = this;
    this.$onInit = function () {
      $log.log(vm.contacts);
      $log.log(vm.simple);
    };
  }

//Etat
$stateProvider.state('contact', {     
    url: '/contacts/:id',    
    templateUrl: 'contacts.html',     
    component: 'contactsComponent',    
    resolve: {
        contacts: function($http){
            return $http.get('/api/v1/contacts'); // promise
        },
        simple: function(){
            return 'simple';   
        }
        
    } 
}); 

  angular
    .module('app.contacts')
    .component('contactsComponent', {
      bindings: {
        simple: '@',
        contacts: '<'
      },
      templateUrl: 'app/participants/participants.html',
      controller: contactsController,
      controllerAs: 'contactsCtrl'
    });

  function contactsController($log, $http, $scope) {
    var vm = this;
    this.$onInit = function () {
      $log.log(vm.simple);
    };
  }

function ContactsService() {

  return {
    getContacts: getContacts
  }

  function handleSuccess(data, status, headers, config) {
    // use data, status, headers, config
    return data;
  }

  function handleError(data, status, headers, config) {
    // handle errors
  }

   getContacts() {
      return $http
        .get(`/api/contacts`)
        .success(handleSuccess)
        .error(handleError);
    }
}

function ContactsService() {

  return {
    getContacts: getContacts
  }

  function handleSuccess(data, status, headers, config) {
    // use data, status, headers, config
    return data;
  }

  function handleError(data, status, headers, config) {
    // handle errors
  }

   getContacts() {
      return $http
        .get(`/api/contacts`)
        .then(handleSuccess)
        .catch(handleError);
    }
}

(function () {
  'use strict';

  angular
    .module('app.contacts')
    .factory('contactsService', contactsService);

  function contactsService() {
    return { //revealing module pattern
        read: read,
        write: write
    }
    function read { }
    function write { }
  }
})();

// Controller

angular
.module('app')
.controller('contactsController', 
    function (contactsService) {
    contactsService.read();         
    contactsService.write();     
});

(function () {
  'use strict';

  angular
    .module('app.contacts')
    .service('contactsService', contactsService);

  function contactsService() {

    this.read = function read {}
    
    this.write = function write {}

  }
})();


// Controller

angular
.module('app')
.controller('contactsController', 
    function (contactsService) {
    contactsService.read();         
    contactsService.write();     
});

// Démarrer l'application REST
# npm start

node _server/server.js
✔Express server listening on http://localhost:9000/

<html>
    <head>        
    </head>
    <body ng-app="myApp">
         <section id="todoapp" ng-controller="TodoCtrl">
        </section> 
    </body>
</html>

<input name="country" ng-model="ctrl.country" />

<div ng-if="false"> // enleve la div du DOM
 Content
</div>

<div ng-if="true"> // remet la div dans le DOM
 Content
</div>

<li ng-repeat="todo in todos> </li>

<div ng-repeat="todo in todos track by $index">{{ todo  }}</div>

<div ng-switch="profil">     
    <span ng-switch-when="ADMIN">Administrateur</span>     
    <span ng-switch-when="USER">Utilisateur</span>     
    <span ng-switch-default>Anonyme</span> 
</div>

<div ng-show="false"> // cache la div
 Content
</div>

<div ng-hide="true"> // cache la div
 Content
</div>

.green { color: green;}      
.bold { font-weight: bold;}      
<input type="checkbox" ng-model="greenChecked"/>      
<input type="checkbox" ng-model="boldChecked"/>      
<div ng-class="{green: greenChecked, bold: boldChecked }">I'm classy</div>

<input type="checkbox" ng-model="disable"/>
<button ng-disabled="disable">Disable</button>
{{disable}}

<input type="checkbox" ng-model="isReadOnly"/><br/> 
<input type="text" ng-readonly="isReadOnly" />
{{isReadOnly}}

<my-directive>load myDirective</my-directive> //Some title

app.directive('myDirective', function() {
        return {
            template: '<h1>Some title</h1>' 
      // OR templateUrl: '/my-directive.html'
        }; 
});

<div my-directive></div> //Some title

app.directive('myDirective', function() {
        return {
            template: '<h1>Some title</h1>' 
      // OR templateUrl: '/my-directive.html'
        }; 
});

<div class=”my-directive: expression;”>My Text</div> // Red when expression = true 

app.directive('myDirective', function() {
      return {
      restrict: 'C',
      link: function (scope, element, attrs) {
        element.css('color', 'red');
      }
    };
});

restrict : ‘A’ – attribute (default one) | <div my-directive></div>
restrict : ‘C’ – Class | <div class=”my-directive: expression;”></div>
restrict : ‘E’ – element | <my-directive></my-directive>
restrict : ‘M’ – Comment | <!– Directive : my-directive expression; –>

app.directive('myDir', function() { 
           return {              
                scope: {},             
                template: '<h1>{{color}} Wont work</h1>'            
            };     
});

<my-dir color="red"></my-dir>


app.directive('myDir', function() { 
           return {              
                scope: {
                    myColor: '@color'
                },             
                template: '<h1>{{myColor}}</h1>' //red            
            };     
});

<my-dir obj="obj"></my-dir> // obj.color="red"


app.directive('myDir', function() { 
           return {              
                scope: {
                    myObj: '=obj'
                },             
                template: '<h1>{{myObj.color}}</h1>' // red           
            };     
});

// template
<my-dir showAlert="ctrl.showAlert()"></my-dir> 

// controller
vm.showAlert = function(){
    alert('red');
}

//directive
app.directive('myDir', function() { 
           return {              
                scope: {
                    showAlert: '&'
                },             
                template: '<h1  ng-click="showAlert()>Show alert</h1>' // alert red           
            };     
});

// UNIX syntaxe
{{ expression | uppercase }}
{{ expression | uppercase | trim }}
{{ array | orderBy:'name':true }}

// With JS
function myController($filter, $log){
    var toUpper = $filter('uppercase');
    $log.log(toUpper('hello')); // HELLO
}

  <input type="text" ng-model="mysearch"/>   
  <tr ng-repeat="person in persons | filter:mysearch"> 

  // Sur une propriété spécifique
  <input type="text" ng-model="mysearch.name"/>     
  <tr ng-repeat="person in persons | filter:mysearch" />

  <tr ng-repeat="person in persons | filter:{name: 'jaafar'}" />

app.filter('makeUppercase', function () {
  return function (item) {
    return item.toUpperCase();
  };
});


{{ 'jaafar' | makeUppercase }} // JAAFAR

app.filter('startsWithLetter', function () {
  return function (items, letter) {
    var filtered = [];
    return filtered;
  };
});

<li ng-repeat="friend in person.friends | startsWithLetter:letter">
    {{ friend }}
</li>

app.filter('complexFiltre', function () {
  return function (items, letter, something, somethingElse) {
    var filtered = [];
    return filtered;
  };
});

<li ng-repeat="friend in person.friends | complexFiltre:letter:something:somethingElse">
    {{ friend }}
 </li>

<form name="loginForm">
    <input type="text" name="user" />
    <input type="text" name="password" />
    <button>connexion</button>
</form>

<form name="loginForm">
    <input type="email" name="login" required ng-model="ctrlName.login"/>
    <span ng-show="loginForm.login.$dirty && loginForm.login.$error.required">
        Login is required
    </span>
    <span ng-show="loginForm.login.$dirty && loginForm.login.$error.email">
        Invalid email form
    </span>
    <input type="password" name="password" ng-model="ctrlName.password"/>
      <span ng-show="loginForm.login.$dirty && loginForm.login.$error.password">
        Password is required
      </span>
    <button ng-disabled="loginForm.$invalid">connexion</button>
</form>

<form name="loginForm" ng-submit="ctrlName.login()">
    <input type="email" name="login" required ng-model="ctrlName.login"/>
    <div ng-if="loginForm.login.$touched" ng-messages="loginForm.login.$error">
        <span ng-message="required">
            Login is required
        </span>
        <span ng-message="email">
            Invalid email form
        </span>
    </div>
    <button ng-disabled="loginForm.$invalid">connexion</button>
</form>

<form name="loginForm" ng-submit="ctrlName.login()">
    <input type="email" name="login" required ng-model="ctrlName.login"/>
    <span ng-show="loginForm.login.$dirty && loginForm.login.$error.required">
        Login is required
    </span>
    <span ng-show="loginForm.login.$dirty && loginForm.login.$error.email">
        Invalid email form
    </span>
    <button ng-disabled="loginForm.$invalid">connexion</button>
</form>