Search code examples
angularjsrequirejsngrouteangular-route-segment

failing to use ngRoute with angularjs and requirejs

I’m trying to use angularjs and requires for creating basic site Unfortunately I am failing to use the angular routing, This is the errors that im getting:

Uncaught TypeError: Cannot read property 'module' of undefined angular-route.js:24(anonymous function) angular-route.js:24(anonymous function) angular-route.js:6
Uncaught Error: [$injector:modulerr] Failed to instantiate module mySite due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.26/$injector/nomod?p0=ngRoute

This is my code:

index.html:

<!DOCTYPE html>
<html>
	<head>
		
		<meta charset="UTF-8">
		<meta content="True" name="HandheldFriendly">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta name="viewport" content="width=device-width">

		<title>Mela Ferro | עיצוב פנים</title>
		<link rel="shortcut icon"  type="image/x-icon"  href="./Style/Images/favicon.ico">
	
		<script data-main="main" src="http://requirejs.org/docs/release/2.1.15/comments/require.js" ></script>

		<link rel="stylesheet" type="text/css" href="./style/main.css">
		<link rel="stylesheet" type="text/css" href="./style/tablet.css" media ="screen and (max-width: 900px">
	
		 
	</head>

	<body >
		<header id="header">
			<main-header/>
		</header>

		<main>
			<div class="main">
				<ul>  
			        <li>Item #1</li>  
			        <li>Item #2</li>  
			        <li>Item #3</li>  
			        <li>Item #4</li>  
			        <li>Item #5</li>  
    			</ul>  
			</div>
		</main>
		<footer>
			<main-footer/>
		</footer>
	</body>
</html>

main.js:

require.config ({
	paths: {
		'angular': 		['./resources/angular'],
		'angularRoute': ['.//resources/angular-route.min'],
		'jquery' : 		['./resources/jquery-1.11.1'],
		'app': 			['./app'],
		'jqueryui' : 	['./resources/jquery-ui'],
		'underscore': 	['./resources/underscore']
	},
	shim :{
		'angular':{
				exports: 'angular'
		},
		 'angularRoute': {
		 	dep:['angular']
		 },
		'jquery':{
			exports:'jquery'
		},
		'jqueryui':{
				exports:'jqueryui',
				dep:['jquery']
		},
		'underscore': {
	            exports: "_"
	        }
		}
	});

window.name = "NG_DEFER_BOOTSTRAP!";

//starting the app
require(['app'], function (app) {

  var $html = angular.element(document.getElementsByTagName('html')[0]);

    angular.element().ready(function() {
        angular.resumeBootstrap([app['name']]);
    });
});

app.js:

define(
	['angular',
	'app/directives/footers/mainFooter/mainFooterDirective',
	'app/directives/headers/mainHeader/mainHeaderDirective','angularRoute'
	]
	,function (angular,mainFooterDirective,mainHeaderDirective) {

		var app = angular.module('mySite',['ngRoute']);

		app.directive('mainFooter', mainFooterDirective); //will be set to main-footer/main:footer
		app.directive('mainHeader', mainHeaderDirective); //will be set to main-footer/main:footer
    	
    	angular.bootstrap(document, [app['name']]);


  return app;
});

looks like that the routes is loading before the module is created but I couldnt find a way to do a workaround and fix it

Solution

  • ok, so I found the next example: http://plnkr.co/edit/3UkSd2UXhlzOWymhLkzK?p=preview and changed my main,js to 

    require.config({
    paths: {
        'angular':      './resources/angular',
        'angular-route': './/resources/angular-route.min',
        'jquery' :      './resources/jquery-1.11.1',
        'jqueryui' :    './resources/jquery-ui',
         'underscore':   './resources/underscore'
    },
    shim: {
        "angular": {
            exports: "angular"
        },
        "angular-route": {
            deps: ["angular"]
        },
    'jquery':{
        exports:'jquery'
    },
    'jqueryui':{
            exports:'jqueryui',
            dep:['jquery']
    },
    'underscore': {
            exports: "_"
        }
    }
});



//starting the app
require(['angular','app'], function (app) {
	angular.element(document).ready(function () {
	  app.init();
	});

  });

    and now its working... Im not sure what was the issue and why it failed, but now it seems to be ok.