bclinkinbeard/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This is a brief example of using atomify (or in my case atomify-js and atomify-css directly) with https://github.com/bclinkinbeard/angular to create a working "Angular atom". It demonstrates that complex directives like ng-repeat, and two-way bindings like ng-model on an input both work.
The biggest remaining question is how or if scope inheritance would work. In this demo I am using $rootScope directly, which is obviously not a real solution, but I was just proving out that the basic functionality works.

  
## entry.js
var LoginForm = require('login-form-atom');

var form = new LoginForm({ buttonLabel: 'It Works!' });
form.render();

## index.html
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" href="bundle.css"/>
</head>
<body>

<div id="login-form-target"></div>

<script type="text/javascript" src="bundle.js"></script>

</body>
</html>

## login-form-atom.css
.login-form button {
	width: 100px;
	height: 30px;
	background: var(bg-color, #0b0);
	font-weight: bold;
	font-size: 15px;
	color: white;
}

## login-form-atom.js
var tpl = require('./template.html'),
	$ = require('jquery-browserify'),
  angular = require('angular'),
  inject = angular.injector(['ng']).invoke,
  $scope;

var LoginForm = function (opts) {
	this.opts = opts || {};
	this.target = this.opts.target || $('#login-form-target');
}

LoginForm.prototype.context = function () {
	return {
    buttonLabel: this.opts.buttonLabel || 'Submit',
    items: this.opts.items || [{name: 'Ben'}, {name: 'Hannah'}, {name: 'Jack'}]
	}
}

LoginForm.prototype.render = function () {
	var target = this.target,
    data = this.context();

  inject(function ($rootScope, $compile) {
    angular.extend($rootScope, data); // copy our data to the scope

    var el = angular.element(tpl); // create DOM element
    el = $compile(el)($rootScope); // compile the element and scope
    $rootScope.$digest(); // trigger a digest
    target.append(el); // attach to the DOM
  })
};

module.exports = LoginForm;
	var LoginForm = require('login-form-atom');

	var form = new LoginForm({ buttonLabel: 'It Works!' });
	form.render();
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<link rel="stylesheet" href="bundle.css"/>
	</head>
	<body>

	<div id="login-form-target"></div>

	<script type="text/javascript" src="bundle.js"></script>

	</body>
	</html>
	.login-form button {
	width: 100px;
	height: 30px;
	background: var(bg-color, #0b0);
	font-weight: bold;
	font-size: 15px;
	color: white;
	}
	var tpl = require('./template.html'),
	$ = require('jquery-browserify'),
	angular = require('angular'),
	inject = angular.injector(['ng']).invoke,
	$scope;

	var LoginForm = function (opts) {
	this.opts = opts \|\| {};
	this.target = this.opts.target \|\| $('#login-form-target');
	}

	LoginForm.prototype.context = function () {
	return {
	buttonLabel: this.opts.buttonLabel \|\| 'Submit',
	items: this.opts.items \|\| [{name: 'Ben'}, {name: 'Hannah'}, {name: 'Jack'}]
	}
	}

	LoginForm.prototype.render = function () {
	var target = this.target,
	data = this.context();

	inject(function ($rootScope, $compile) {
	angular.extend($rootScope, data); // copy our data to the scope

	var el = angular.element(tpl); // create DOM element
	el = $compile(el)($rootScope); // compile the element and scope
	$rootScope.$digest(); // trigger a digest
	target.append(el); // attach to the DOM
	})
	};

	module.exports = LoginForm;