alianza-devangular-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.