mihaihuluta/app.js

## app.js
define(['angular',
    'angularResource',
    'controllers/controllers',
    'services/services',
    'filters/filters',
    'directives/directives'],
    function (angular) {
        return angular.module('myapp', ['ngResource',
            'myapp.controllers',
            'myapp.services',
            'myapp.filters',
            'myapp.directives']);
    });

## authenticationController.js
'use strict';
define(function () {
    var controller = function($scope, authenticationService) {
        authenticationService.signin();
    };
    controller.$inject = ['$scope', 'authenticationService'];
    return controller;
});

## authenticationService.js
'use strict';
define(['angular'], function () {
    var service = function ($http) {
        var signin = function () {
            alert('Signin service called!');
        };
    };
    service.$inject = ['$http'];
    return service;
});

## bootstrap.js
define(['angular', 'domReady', 'app'], function (angular, domReady) {
    domReady(function() {
        angular.bootstrap(document, ['myapp']);
    });
} );

## controllers.js
'use strict';
define(['angular', 'controllers/authenticationController'], function (angular, authenticationController) {
    var controllers = angular.module('myapp.controllers', ['myapp.services']);
    controllers.controller('authenticationController', authenticationController);
    return controllers;
});

## index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Project Setup</title>
    <meta charset="utf-8"/>
    <link href="scripts/lib/Bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="scripts/lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" />
</head>
    <body>
        <div ng-controller="authenticationController">THIS WILL NOT WORK. THE REASON (I ASSUME)
        IS THE FACT THAT THE CONTROLLER IS NOT IN THE RIGHT SCOPE.</div>
        <div ng-view></div>
        <script type="text/javascript" data-main="scripts/main" src="scripts/lib/require/require.js"></script>
    </body>
</html>

## main.js
'use strict';

require.config({
    paths: {
        jquery: 'lib/jquery/jquery-1.9.1',
        twitter: 'lib/bootstrap/js/bootstrap',
        domReady: 'lib/require/domReady',
        angular: 'lib/angular/angular',
        angularResource: 'lib/angular/angular-resource'
    },
    shim: {
        twitter: { deps: ['jquery'] },
        angular: {
            deps: ['jquery', 'twitter'], exports: 'angular'
        },
        angularResource: { deps: ['angular'], exports: 'ngResource' },
        priority: ['angular']
    }
});

require(['angular',
    'app',
    'bootstrap'],
    function (angular, app) {
        app.config(['$routeProvider',
           function ($routeProvider) {
                //Define the routes in this place.
            }]);
    });

## services.js
'use strict';
define(['angular', 'angularResource', 'services/authenticationService'],
   function (angular, authenticationService) {
 	    debugger;
 	    var services = angular.module('myapp.services', ['ngResource']);
 	    services.factory('authenticationService', [authenticationService]);
 	    return services;
 	});
	define(['angular',
	'angularResource',
	'controllers/controllers',
	'services/services',
	'filters/filters',
	'directives/directives'],
	function (angular) {
	return angular.module('myapp', ['ngResource',
	'myapp.controllers',
	'myapp.services',
	'myapp.filters',
	'myapp.directives']);
	});
	'use strict';
	define(function () {
	var controller = function($scope, authenticationService) {
	authenticationService.signin();
	};
	controller.$inject = ['$scope', 'authenticationService'];
	return controller;
	});
	'use strict';
	define(['angular'], function () {
	var service = function ($http) {
	var signin = function () {
	alert('Signin service called!');
	};
	};
	service.$inject = ['$http'];
	return service;
	});
	define(['angular', 'domReady', 'app'], function (angular, domReady) {
	domReady(function() {
	angular.bootstrap(document, ['myapp']);
	});
	} );
	'use strict';
	define(['angular', 'controllers/authenticationController'], function (angular, authenticationController) {
	var controllers = angular.module('myapp.controllers', ['myapp.services']);
	controllers.controller('authenticationController', authenticationController);
	return controllers;
	});
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>Test Project Setup</title>
	<meta charset="utf-8"/>
	<link href="scripts/lib/Bootstrap/css/bootstrap.css" rel="stylesheet" />
	<link href="scripts/lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" />
	</head>
	<body>
	<div ng-controller="authenticationController">THIS WILL NOT WORK. THE REASON (I ASSUME)
	IS THE FACT THAT THE CONTROLLER IS NOT IN THE RIGHT SCOPE.</div>
	<div ng-view></div>
	<script type="text/javascript" data-main="scripts/main" src="scripts/lib/require/require.js"></script>
	</body>
	</html>
	'use strict';

	require.config({
	paths: {
	jquery: 'lib/jquery/jquery-1.9.1',
	twitter: 'lib/bootstrap/js/bootstrap',
	domReady: 'lib/require/domReady',
	angular: 'lib/angular/angular',
	angularResource: 'lib/angular/angular-resource'
	},
	shim: {
	twitter: { deps: ['jquery'] },
	angular: {
	deps: ['jquery', 'twitter'], exports: 'angular'
	},
	angularResource: { deps: ['angular'], exports: 'ngResource' },
	priority: ['angular']
	}
	});

	require(['angular',
	'app',
	'bootstrap'],
	function (angular, app) {
	app.config(['$routeProvider',
	function ($routeProvider) {
	//Define the routes in this place.
	}]);
	});
	'use strict';
	define(['angular', 'angularResource', 'services/authenticationService'],
	function (angular, authenticationService) {
	debugger;
	var services = angular.module('myapp.services', ['ngResource']);
	services.factory('authenticationService', [authenticationService]);
	return services;
	});