angularjs を使用しようとしており、基本的なサイトを作成するために必要です。残念ながら、角度ルーティングを使用できません。これは、次のエラーです。
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
これは私のコードです:
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;
});
モジュールが作成される前にルートがロードされているように見えますが、回避策を実行して修正する方法を見つけることができませんでした