define([
  'angular', 
  'uiRouter'
], function (angular) {
  
  var app = angular.module('app', ['ui.router']);
  
  app.config(function($stateProvider, $locationProvider, $controllerProvider) {
    app.$controllerProvider = $controllerProvider;
    var lazyPartialDeferred;
    
    $stateProvider
      .state('home', {
        url: "/",
        template: "<p>Hello {{name}}. Would you like to... <a href='lazy'>load lazy</a>?</p>",
        controller: 'mainCtrl'
      })
      .state('lazy', {
        url: "/lazy",
        templateProvider: function() { return lazyPartialDeferred.promise; },
        controller: 'lazyCtrl',
        resolve: {
          load: function($q, $templateCache) {
            var lazyCtrlDeferred = $q.defer();
            lazyPartialDeferred = $q.defer();
            require(['lazy'], function (lazy) {
              lazyCtrlDeferred.resolve();
              lazyPartialDeferred.resolve($templateCache.get('lazy.html'));
            });
            return lazyCtrlDeferred.promise;
          }
        }
      });
  
    $locationProvider.html5Mode(true);
  });
  
  app.controller('mainCtrl', function($scope) {
    $scope.name = 'World';
  });
  
});
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-main="main.js" data-require="requirejs@*" data-semver="2.1.9" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js"></script>
  </head>

  <body>
    <h2>Lazy-loading Example</h2>
    <div ui-view></div>
  </body>

</html>
/* Put your css in here */

[ui-view] {
  border: 1px solid red;
  min-height:100px;
}

require.config({
	paths: {
        angular: 'https://code.angularjs.org/1.2.16/angular',
        uiRouter: 'http://angular-ui.github.io/ui-router/release/angular-ui-router',
        app: 'app'
	},
	shim: {
		'angular': {
			exports: 'angular'
		},
		'ngRoute': ['angular'],
		'app': ['angular']
	}
});

require(['angular', 'app'], function(angular) {
	'use strict';
	angular.bootstrap(document, ['app']);
});
define(['angular', 'lazy-partials'], function (angular) {
  var app = angular.module('app');

  var lazyCtrl =  ['$scope', '$compile', '$templateCache', function ($scope, $compile, $templateCache) {
    $scope.data = 'my data';
  }];
  
  app.$controllerProvider.register('lazyCtrl', lazyCtrl);
});
// Imagine that this file was actually compiled with something like grunt-html2js
// So, what you actually started with was a bunch of .html files which were compiled into this one .js file...
define(['angular'], function (angular) {
  var $injector = angular.element(document).injector(),
      $templateCache = $injector.get('$templateCache');
  
  $templateCache.put('lazy.html', '<p>This is lazy content! and <strong>{{data}}</strong> <a href="#">go back</a></p>');
});