Last active
August 29, 2015 14:04
-
-
Save icfantv/da048deed2bb89b988cb to your computer and use it in GitHub Desktop.
Using AngularJS with RequireJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
define(['authorization'], function () { | |
'use strict'; | |
angular.module('app-controllers', []) | |
.controller('MainController', | |
['$scope', '$timeout', 'AuthorizationService', | |
function ($scope, $timeout, authorizationService) { | |
// stuff | |
} | |
]) | |
.controller('NavigationController', | |
['$scope', '$location', 'AuthConstants', | |
function ($scope, $location, authConstants) { | |
// stuff | |
}]); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
define(['app-controllers', 'authorization', 'dashboard', 'module1', 'module2'], function () { | |
'use strict'; | |
return angular.module('my-ui', | |
['ngRoute', 'app-controllers', 'authorization', 'dashboard', 'module1', 'module2']) | |
.config(['$routeProvider', function ($routeProvider) { | |
$routeProvider | |
.when('/', | |
{ | |
controller: 'DashboardController', | |
templateUrl: 'app/components/dashboard/views/dashboard.html' | |
}); | |
}]) | |
.config(['$httpProvider', function ($httpProvider) { | |
$httpProvider.interceptors.push('AuthorizationInterceptor'); | |
}]) | |
.run(['$http', function ($http) { | |
$http.defaults.headers.common.Accept = 'application/json'; | |
}]); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
define(function () { | |
'use strict'; | |
angular.module('dashboard-controllers', []) | |
.controller('DashboardController', | |
['$scope', '$location', 'AuthConstants', | |
function ($scope, $location, authConstants) { | |
$scope.authConstants = authConstants; | |
}]); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
define(function () { | |
'use strict'; | |
angular.module('dashboard-services', []) | |
.service('DashboardService', function () { | |
// stuff here | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- this is your dashboard template, do note that | |
there's no need to specify the ng-controller --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
define(['dashboard-controllers', 'dashboard-services'], | |
function () { | |
'use strict'; | |
var viewPath = 'app/components/dashboard/views/'; | |
angular.module('dashboard', ['ngRoute', 'dashboard-controllers', 'dashboard-services']) | |
.config(['$routeProvider', function ($routeProvider) { | |
$routeProvider | |
.when('/dashboard', { | |
controller: 'DashboardController', | |
templateUrl: viewPath + 'dashboard.html' | |
}) | |
.otherwise({ | |
redirectTo: '/dashboard' | |
}); | |
}]) | |
.service('DashboardService', function () { | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<title>My Web Application</title> | |
<!-- put your stuff here --> | |
</head> | |
<body data-ng-controller="MainController"> | |
<!-- put your stuff here --> | |
<script type="text/javascript" src="js/require.js" data-main="js/main.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
require.config({ | |
baseURI: 'js', | |
paths: { | |
'angular': 'angular.min', | |
'angular-resource': 'angular-resource.min', | |
'angular-route': 'angular-route.min', | |
'app': '../app/app', | |
'app-controllers': '../app/components/app-controllers', | |
'authorization': '../app/components/authorization/authorization', | |
'authorization-constants': '../app/components/authorization/authorization-constants', | |
'authorization-controllers': '../app/components/authorization/authorization-controllers', | |
'authorization-services': '../app/components/authorization/authorization-services', | |
'dashboard': '../app/components/dashboard/dashboard', | |
'dashboard-controllers': '../app/components/dashboard/dashboard-controllers', | |
'dashboard-services': '../app/components/dashboard/dashboard-services', | |
'jquery': 'jquery.min', | |
'module1': '../app/components/module1/module1', | |
'module1-controllers': '../app/components/module1/module1-controllers', | |
'module1-services': '../app/components/module1/module1-services', | |
'module2': '../app/components/module2/module2', | |
'module2-controllers': '../app/components/module2/module2-controllers', | |
'module2-services': '../app/components/module2/module2-services', | |
'underscore': 'underscore-min' | |
}, | |
shim: { | |
'angular': { | |
exports: 'angular', | |
deps: ['underscore', 'jquery'] | |
}, | |
'angular-resource': { | |
deps: ['angular'] | |
}, | |
'angular-route': { | |
deps: ['angular'] | |
}, | |
'app': { | |
deps: ['angular-route'] | |
}, | |
'dashboard': { | |
deps: ['angular-route'] | |
}, | |
'module1': { | |
deps: ['angular-resource', 'angular-route'] | |
}, | |
'module2': { | |
deps: ['angular-resource', 'angular-route'] | |
} | |
} | |
}); | |
require(['app'], | |
function (app) { | |
angular.element(document).ready(function () { | |
angular.bootstrap(document, [app.name]); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment