Skip to content

Repository files navigation

angular-scope-types

npm versionnpm downloadsBuild StatusCode CoverageGitter

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 apiCheckInstancevarmyApiCheck=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 angularScopeTypesInstancevarmyScopeTypes=angularScopeTypes({disabled: SOME_VARIABLE_THAT_SAYS_YOU_ARE_ON_PRODUCTION,apiCheckInstance: myApiCheck});// get your angular modulevaryourModule=angular.module('yourModule');// add your instance's `directive` function to your module to make it injectableyourModule.constant('myScopeTypesDirective',myScopeTypes.directive);// later in your code for a directive:yourModule.directive('myDirective',function(myScopeTypesDirective){returnmyScopeTypesDirective({templateUrl: '/my-directive.html',scope: {foo: '=',bar: '@'},scopeTypes: getScopeTypes});functiongetScopeTypes(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

About

Angular scopeTypes, based on React propTypes

Resources

Stars

10 stars

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages