<!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>