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>');
});