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

Font Awesome – Get Started

image

Pick your Icon: http://fontawesome.io/icons/

Setup

EASIEST: BootstrapCDN

Add Font Awesome + Bootstrap into your website with two lines of code. You don’t even have to download or install anything!

  1. Paste the following code into the <head> section of your site’s HTML.
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    

    Want to use Font Awesome by itself without Bootstrap? Just don’t include the first line.

  2. Pat yourself on the back for your scalable-vector-icons-on-the-website judo solution in two lines of code.
  3. Check out the examples to start using Font Awesome!

EASY: Default CSS

Use this method to get the default Font Awesome CSS with the default Bootstrap CSS.

  1. Copy the font-awesome directory into your project.
  2. In the <head> of your html, reference the location to your font-awesome.min.css.
    <link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    
  3. Check out the examples to start using Font Awesome!

PRO: Custom LESS

Use this method to customize Font Awesome and Bootstrap 2.3.2 using LESS.

  1. Copy the font-awesome directory into your project.
  2. Open your project’s bootstrap/bootstrap.less and replace
    @import "sprites.less";
    

    with

    @import "path/to/font-awesome/less/font-awesome.less";
    
  3. Open your project’s font-awesome/variables.less and edit the @FontAwesomePath variable to point to your font directory.
    @FontAwesomePath:   "../font";
    

    The font path is relative from your compiled CSS directory.

  4. Re-compile your LESS if using a static compiler. Otherwise, you should be good to go.
  5. Check out the examples to start using Font Awesome!

Start using it

After you get up and running, you can place Font Awesome icons just about anywhere with the <i> tag:

<i class="icon-flag"></i> icon-flag

You can also do http://fontawesome.io/examples/:

  • Inline Icons

  • Larger Icons

  • Bordered & Pulled Icons

  • Buttons image

  • Button Groups image

  • Button Dropdowns image

  • Bulleted Lists image

  • Navigation image

  • Prepended & Appended Form Inputs image

  • Animated Spinner image

  • Rotated & Flipped image

  • Stacked Icons image

ASP.NET Web API 2–Token Authentication for SPA

image