Simple demo of using Atomify to create AngularJS components.
The code is all pretty self explanatory, but by inlining the template and controller via require()
, directives become a great delivery mechanism. With Atomify bundling the CSS and assets as well, you get a fully self contained, portable unit.
module.exports = function () {
return {
restrict: 'E',
scope: {
list: '='
},
template: require('./template.html'),
controller: require('./DemoController')
};
};
The component can then be used by simply require()
-ing it in as a directive, and then declaring its usage in the DOM like normal.
angular.module('app', [])
.directive('demoComponent', require('demo-component'));
<demo-component list="people"></demo-component>
Clone the repo, npm install
(demo-component is already in node_modules
), then browserify app.js > dist/bundle.js
and open dist/index.html
.