Credit goes to Tero Parviainen for writing about this pattern.

The scope definition explicitly defines what date can be handed to the component. It does not inherit from a parent scope. You can think of this as its "API".

To write and run unit tests easily, use a controller.

If a comComponents have a one-to-one correspondence with HTML templates.

Beyond the original writeup of the component pattern, we can optimize even more.

Internally, the directive should always refer to its controller as ctrl. This creates reusable and more maintainable code.

Avoid using $scope in your controllers to set values if possible. You can use this.something = "value" in controllers and refer to ctrl.something in your template. You will need to use $scope to access data handed to the isolate scope, though.

If your component has a template, then fs.readFileSync it. This is made possible by the browserify transform brfs.

This boilerplate is build using npm scripts.

npm run serve opens browser for development with livereload.

npm run dist creates browserify bundles in dist/ folder.

npm test runs the tests.

npm run watch executes npm test when index.js changes.