Skip to content

Instantly share code, notes, and snippets.

@icfantv

icfantv/app-controllers.js

Last active August 29, 2015 14:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save icfantv/da048deed2bb89b988cb to your computer and use it in GitHub Desktop.
Save icfantv/da048deed2bb89b988cb to your computer and use it in GitHub Desktop.
Download ZIP
Using AngularJS with RequireJS
Raw
app-controllers.js
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
}]);
});
Raw
app.js
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';
}]);
});
Raw
dashboard-controllers.js
define(function () {
'use strict';
angular.module('dashboard-controllers', [])
.controller('DashboardController',
['$scope', '$location', 'AuthConstants',
function ($scope, $location, authConstants) {
$scope.authConstants = authConstants;
}]);
});
Raw
dashboard-services.js
define(function () {
'use strict';
angular.module('dashboard-services', [])
.service('DashboardService', function () {
// stuff here
});
});
Raw
dashboard.html
<!-- this is your dashboard template, do note that
there's no need to specify the ng-controller -->
Raw
dashboard.js
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 () {
});
});
Raw
index.html
<!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>
Raw
main.js
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