Simple demo of self contained AngularJS component
JavaScript CSS
Permalink
Failed to load latest commit information.
dist Atomify! Mar 28, 2014
node_modules/demo-component Add deps files to source control May 2, 2014
.gitignore Add deps to source control May 2, 2014
LICENSE Initial commit Jan 26, 2014
README.md Update README Mar 31, 2014
app.js Atomify! Mar 28, 2014
index.css Atomify! Mar 28, 2014
package.json 2.0.0 Mar 31, 2014

README.md

angular-component-demo

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>

Try it yourself

Clone the repo, npm install (demo-component is already in node_modules), then browserify app.js > dist/bundle.js and open dist/index.html.