0

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

Shaul Atiya
  • 11
  • 3

1 Answers1

1

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.

Shaul Atiya
  • 11
  • 3