nire0510
10/16/2015 - 9:50 AM

AngularJS - 2 modules, One page

AngularJS - 2 modules, One page

(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);
<!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>