aleksmiller/nested-component.html

## nested-component.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nested component</title>
</head>
<body>
<div data-ng-app="app">
    <div data-ng-controller="MainCtrl as main">
        <form-panel count="main.count"></form-panel>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.min.js"></script>
<!--main module BEGIN-->
<script>
    (function() {
        angular.module('app', []);
    })();
</script>
<!--main module END-->

<!--main controller BEGIN-->
<script>
    (function() {
        angular
                .module('app')
                .controller('MainCtrl', function MainCtrl() {
                    this.count = 4;
                });
    })();
</script>
<!--main controller END-->

<!--panel component BEGIN-->
<script>
    (function() {
        angular
                .module('app')
                .component('formPanel', {
                    bindings: {
                        count: '='
                    },
                    controller: 'CounterFormCtrl',
                    controllerAs: 'pan',
                    template: function($element, $attrs) {
                        return [
                            '<fieldset>',
                                '<legend>Panel component</legend>',
                                '<counter count="pan.count"></counter>',
                            '</fieldset>'
                        ].join('');
                    }
                })
                .controller('CounterFormCtrl', function CounterFormCtrl() {
                    // panel controller
                    // ...
                })
    })();
</script>
<!--panel component END-->

<!--counter component BEGIN-->
<script>
    (function() {
        angular
                .module('app')
                .component('counter', {
                    bindings: {
                        count: '='
                    },
                    controller: 'CounterCtrl',
                    template: function($element, $attrs) {
                        return [
                            '<div class="counter">',
                                '<p>Counter component. Value = {{counter.count}}</p>',
                                '<input type="text" data-ng-model="counter.count">',
                                '<button type="button" data-ng-click="counter.decrement();">-</button>',
                                '<button type="button" data-ng-click="counter.increment();">+</button>',
                            '</div>'
                        ].join('');
                    }
                })
                .controller('CounterCtrl', function CounterCtrl() {
                    function increment() {
                        this.count++;
                    }

                    function decrement() {
                        this.count--;
                    }

                    this.increment = increment;
                    this.decrement = decrement;
                });
    })();
</script>
<!--counter component END-->
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Nested component</title>
	</head>
	<body>
	<div data-ng-app="app">
	<div data-ng-controller="MainCtrl as main">
	<form-panel count="main.count"></form-panel>
	</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.min.js"></script>
	<!--main module BEGIN-->
	<script>
	(function() {
	angular.module('app', []);
	})();
	</script>
	<!--main module END-->

	<!--main controller BEGIN-->
	<script>
	(function() {
	angular
	.module('app')
	.controller('MainCtrl', function MainCtrl() {
	this.count = 4;
	});
	})();
	</script>
	<!--main controller END-->

	<!--panel component BEGIN-->
	<script>
	(function() {
	angular
	.module('app')
	.component('formPanel', {
	bindings: {
	count: '='
	},
	controller: 'CounterFormCtrl',
	controllerAs: 'pan',
	template: function($element, $attrs) {
	return [
	'<fieldset>',
	'<legend>Panel component</legend>',
	'<counter count="pan.count"></counter>',
	'</fieldset>'
	].join('');
	}
	})
	.controller('CounterFormCtrl', function CounterFormCtrl() {
	// panel controller
	// ...
	})
	})();
	</script>
	<!--panel component END-->

	<!--counter component BEGIN-->
	<script>
	(function() {
	angular
	.module('app')
	.component('counter', {
	bindings: {
	count: '='
	},
	controller: 'CounterCtrl',
	template: function($element, $attrs) {
	return [
	'<div class="counter">',
	'<p>Counter component. Value = {{counter.count}}</p>',
	'<input type="text" data-ng-model="counter.count">',
	'<button type="button" data-ng-click="counter.decrement();">-</button>',
	'<button type="button" data-ng-click="counter.increment();">+</button>',
	'</div>'
	].join('');
	}
	})
	.controller('CounterCtrl', function CounterCtrl() {
	function increment() {
	this.count++;
	}

	function decrement() {
	this.count--;
	}

	this.increment = increment;
	this.decrement = decrement;
	});
	})();
	</script>
	<!--counter component END-->
	</body>
	</html>