<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.bootcss.com/angular.js/1.5.0/angular.js"></script>
    <script src="https://cdn.bootcss.com/angular-ui-router/0.2.18/angular-ui-router.js"></script>
    <script src="https://cdn.bootcss.com/oclazyload/1.0.9/ocLazyLoad.js"></script>
</head>

<body ng-app="mainApp">
  <nav>
    <ul>
      <li ui-sref="appA">app A</li>
      <li ui-sref="appB">app B</li>
    </ul>
  </nav>
  <ui-view></ui-view>
<script>
angular.module('mainApp', ['ui.router', "oc.lazyLoad"])
  .config(function($stateProvider) {
    $stateProvider
      .state('appA', {
        url: '/appA',
        controller: 'appActrl',
        templateUrl: 'pageA.html',
        resolve: {
          loadMyService: ['$ocLazyLoad', function($ocLazyLoad) {
            return $ocLazyLoad.load('./appA.js');
          }]
        }
      })
      .state('appB', {url: '/appB', template: '<div>App B</div>'});
});
</script></body></html>
angular.module('appA', [])
.controller('appActrl', ['$scope', function($scope){
  $scope.text='App A';
}]);
<section>{{text}}</section>