Angular 1.3 new features

image

app.directive('validateInteger', function () {

  var REGEX = /^\-?\d+$/;

  return {
    require: 'ngModel',
    link: function (scope, element, attrs, ctrl) {

      ctrl.$validators.integer = function (modelValue, viewValue) {

        if (REGEX.test(viewValue)) {
          return true
        }
        return false;
      };
    }
  };
});
  • Async $validators
    app.directive('validateUsername', function ($q, userService) {
    
      return {
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
    
          ctrl.$asyncValidators.username = function (modelValue, viewValue) {
            return $q(function (resolve, reject) {
              userService.checkValidity(viewValue).then(function () {
                  resolve();
                }, function () {
                  reject();
                });
            });
          };
        }
      };
    });

Using it:

<form name="myForm">
  <input type="text" name="username" validate-username>
  <p ng-if="myForm.username.$pending">Validating user name...</p>
</form>
  • ngMessages & ngMessage
    <ng-messages for="loginForm.password.$error">
      <ng-message when="required">...</ng-message>
      <ng-message when="minlength">...</ng-message>
      <ng-message when="pattern">...</ng-message>
      <ng-message when="validator4">...</ng-message>
      <ng-message when="validator5">...</ng-message>
    </ng-messages>
<script type="script/ng-template" id="required-message">
  <ng-message when="required">
    This field is required!
  </ng-messages>
</script>

<ng-messages ng-messages-include="required-message" for="loginForm.password.$error">
  ...
</ng-messages>

<!-- somewhere else -->
<ng-messages ng-messages-include="required-message" for="otherForm.field.$error">
  ...
</ng-messages>
  • bindToController for Directive
    • For Directives having an isolated scope with properties to be bound to a controller.
      app.directive('someDirective', function () {
        return {
          scope: {
            name: '='
          },
          controller: function () {
            this.name = 'Pascal';
          },
          controllerAs: 'ctrl',
          bindToController: true,
          template: '<div>{{ctrl.name}}</div>'
        };
      });
  • ng-model-options
    • UpdateOn
      <input 
        type="text" 
        ng-model="name" 
        ng-model-options="{ updateOn: 'default blur' }">
    • debounce
      <input 
        type="search" 
        ng-model="searchQuery" 
        ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 300, 'blur': 0 } }">
  • $rollbackViewValue<form name=”userForm”>
    <input type=”text” name=”userName”
    ng-model=”name”
    ng-model-options=”{ updateOn: ‘blur’ }”
    ng-keyup=”cancel($event)” />
    </form>

    $scope.cancel = function (e) {
    if (e.keyCode == 27) {   // 27: ESC key
    $scope.userForm.userName.$rollbackViewValue();
    }

  • One way bindings
    • <p>Hello {{::name}}</p>
    • <li ng-repeat=”item in ::items”>{{item.name}}</li>
  • Disable Debug Info
  • $applyAsync
  • ES6 Style Promises
  • Stateful Filters
  • Angular Hint
Advertisements

ASP.NET Web API 2–Token Authentication for SPA

image