angular-scope-types

angular-scope-types

Demo

This is still in the early stages. This is currently available as a beta on npm. Basically this is intended to bring a concept like React propTypes to Angular.

This is based on trying to support this issue with as clean an api as possible.

Usage

angular-scope-types uses api-check to do api checking. api-check is basically React propTypes without React. So you'll need to install api-check into your project and include the script first. It is available on npm via npm install --save api-check

You will then create your own instance of apiCheck and use that to create your own instance of angular-scope-types. (Note, you don't have to create your own instance, but it is recommended).

Both api-check and angular-scope-types are exported as UMD modules meaning you can use them with CommonJS, AMD, or as globals (apiCheck and angularScopeTypes respectively).

Here's a quick example for recommended usage (uses globals):

// create your apiCheckInstance
var myApiCheck = apiCheck({
  output: {
    prefix: 'Global prefix',
    suffix: 'global suffix',
    docsBaseUrl: 'https://example.com/errors-and-warnings#'
  },
  disabled: SOME_VARIABLE_THAT_SAYS_YOU_ARE_ON_PRODUCTION
}, {
  /* custom checkers if you wanna */
});


// create your angularScopeTypesInstance
var myScopeTypes = angularScopeTypes({
  disabled: SOME_VARIABLE_THAT_SAYS_YOU_ARE_ON_PRODUCTION,
  apiCheckInstance: myApiCheck
});

// get your angular module
var yourModule = angular.module('yourModule');

// add your instance's `directive` function to your module to make it injectable
yourModule.constant('myScopeTypesDirective', myScopeTypes.directive);


// later in your code for a directive:
yourModule.directive('myDirective', function(myScopeTypesDirective) {
  return myScopeTypesDirective({
    templateUrl: '/my-directive.html',
    scope: {foo: '=', bar: '@'},
    scopeTypes: getScopeTypes
  });

  function getScopeTypes(check) {
    return {
      foo: check.shape({
        isFoo: check.bool,
        isBar: check.bool,
        someNum: check.number,
        someOptional: check.object.optional
      }).strict.optional,
      bar: check.oneOf(['fooString', 'barString'])
    };
  }
});

See and play with the demo for a live example.

LICENSE MIT