index.html
<html>
<head>
<style>
.active {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<a ui-sref="about" ui-sref-active="active">About</a>
<ui-view></ui-view>
<script src="app/lib/require.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js
require.config({
baseUrl: 'app',
paths: {
'app': 'app',
'angular': 'lib/angular.min',
'router': 'lib/angular-ui-router.min'
},
shim: {
'angular': {exports: 'angular'},
'router': {deps: ['angular']},
'app': {deps: ['router']}
}
})
require(['app'], function() {
angular.bootstrap(document, ['app'])
})
app.js
define([], function() {
var app = angular.module('app', ['ui.router']);
app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
app.register = {
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
service: $provide.service
};
})
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('hello');
$stateProvider
.state("hello", {
url: "/hello",
controller: 'helloCtrl',
templateUrl: 'app/hello/view/hello.html',
resolve: {
loadCtrl: ["$q", function($q) {
var deferred = $q.defer();
require([
'hello/controller/hello.controller'
], function() { deferred.resolve(); });
return deferred.promise;
}]
}
})
}])
return app;
})
hello.controller.js
define(['app'],function(app){
var helloCtrl = ['$scope', function($scope){
$scope.name1 = 'hello world!';
}];
app.register.controller('helloCtrl', helloCtrl)
})