Skip to content

Instantly share code, notes, and snippets.

@nire0510
Created October 16, 2015 09:50
Show Gist options
  • Save nire0510/e07a2a265807bd0bb2cc to your computer and use it in GitHub Desktop.
Save nire0510/e07a2a265807bd0bb2cc to your computer and use it in GitHub Desktop.
AngularJS - 2 modules, One page
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS - 2 modules, One page</title>
<meta name="feditor:preset" content="default"/>
</head>
<body>
<div id="first" data-ng-app="SampleApp1">
<div id="container" data-ng-controller="MyController1">
<p data-ng-bind="value"></p>
</div>
</div>
<div id="second">
<div id="container" data-ng-controller="MyController2">
<p data-ng-bind="value"></p>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
</body>
</html>
(function (angular) {
'use strict';
angular.module('SampleApp1', [])
.config(function() {
})
.value('foo', 'bar')
.controller('MyController1', MyController1);
angular.module('SampleApp2', ['SampleApp1'])
.config(function() {
})
.controller('MyController2', MyController2);
MyController1.$inject = ['$scope'];
function MyController1 ($scope) {
$scope.value = 1;
}
MyController2.$inject = ['$scope', 'foo'];
function MyController2 ($scope, foo) {
$scope.value = foo;
}
angular.bootstrap(document.querySelector('#second'), ['SampleApp2']);
})(window.angular);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment