0
У меня есть этот сайт, который маршрутизирует мои страницы с 4 html-файлами, и он отлично работает, но когда я пытаюсь добавить или удалить новый, он просто показывает пустой экран только с моей навигационной панелью. Ошибки я пойманная: Ошибки: $ Инжектор: modulerr Module ErrorДобавление или удаление нового маршрута на routeProvider, он ничего не загружает в AngularJS
Будучи Noobie в Угловом я видел различные решения, которые имеют дело с ngRoute, но тщетно.
Я хочу добавить больше html-файлов для остальных проектов, но я не могу.
Я использую версию 1.2.15 и вызываю файлы локально. Ниже приведена Угловая сценария, которую я использую, а также добавлен код для просмотра проектов.
var app = angular.module('myapp', ['ngRoute','ngAnimate']);
app.controller('MainCtrl', function($scope, NextBackBasicService, $location) {
$scope.message = $location.path();
});
app.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'home.html',
controller: 'MainCtrl'
}).
when('/example1', {
templateUrl: 'example.html',
controller: 'MainCtrl'
}).
when('/example2', {
templateUrl: 'example2.html',
controller: 'MainCtrl'
}).
when('/example3', {
templateUrl: 'example3.html',
controller: 'MainCtrl'
}).
when('/example4', {
templateUrl: 'example4.html',
controller: 'MainCtrl'
});
$routeProvider.otherwise({
redirectTo: '/route'
});
});
app.run(function($rootScope, NextBackBasicService){
$rootScope.goNext = function() {
NextBackBasicService.goNext();
};
$rootScope.goBack = function() {
NextBackBasicService.goBack();
};
});
app.factory('NextBackBasicService', function($route, $location) {
//array for keeping defined routes
var routes = [];
angular.forEach($route.routes, function(config, route) {
//not to add same route twice
if (angular.isUndefined(config.redirectTo)) {
routes.push(route);
}
});
return {
goNext: function() {
var nextIndex = routes.indexOf($location.path()) + 1;
if (nextIndex === routes.length) {
$location.path(routes[0]);
} else {
$location.path(routes[nextIndex]);
}
},
goBack: function() {
//window.history.back();
var backIndex = routes.indexOf($location.path()) - 1;
if (backIndex === -1) {
$location.path(routes[routes.length - 1]);
} else {
$location.path(routes[backIndex]);
}
}
};
});
А вот мой index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8" />
<title>My Title</title>
<!--<script data-require="[email protected]" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
<script src="https://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>-->
<!--<script data-require="[email protected]*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0-rc.3/angular-route.js"></script>-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
<script data-require="[email protected]*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700&subset=latin,greek,greek-ext' rel='stylesheet' type='text/css'>
<!--Loads Angular
<script src="https://code.angularjs.org/1.2.15/angular.min.js" data-semver="1.2.15"></script>
<script src="https://code.angularjs.org/1.2.15/angular-route.min.js" data-semver="1.2.15"></script>
<script src="https://code.angularjs.org/1.2.15/angular-animate.min.js"></script>-->
<script src="js/angular.min.js" data-semver="1.2.15"></script>
<script src="js/angular-route.min.js" data-semver="1.2.15"></script>
<script src="js/angular-animate.min.js"></script>
<script src="app.js"></script>
<!--jQuery-->
<script src="js/jquery.js" type="text/javascript">
<!--Bootstrap-->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script>
$(document).ready(function() {
$(".burger").click(function(){
$(this).toggleClass("active");
});
});
</script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container mynavigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!--<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>-->
<button type="button" class="burger navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span>
</button>
<a class="pull-left" href="#">
<img class="logodimensions" src="images/svg/logo.svg" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a class="animlinks" href="#">WORK</a>
</li>
<li>
<a class="animlinks" href="#">CONTACT/ABOUT</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="grids">
<div ng-controller="MainCtrl">
<ng-view></ng-view>
</div>
</div>
</body>
</html>
И ниже является домом, где маршрутизация происходит между проектами.
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example1">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example2">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example3">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example4">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
</div>
</div>
Опубликовать полную ошибку , – matmo
Привет, matmo, ошибка в консоли следующая: angular.min.js: 32 Ошибка нечистоты: [$ injector: modulerr] http://errors.angularjs.org/1.2.15/$injector/modulerr ? p0 = r255 & p1 = ReferenceE ... 0at% 20Uc% 20 (http% 3A% 2F% 2Flocalhost% 2Fr255% 2Fjs% 2Fangular.min.js% 3A17% 3A215) – Georgie
Не удалось создать модуль r255 из-за: ReferenceError: when is not по адресу http: //localhost/r255/app.js: 29: 5 в Object.d [as invoke] (http: //localhost/r255/js/angular.min.js: 33: 335) at http: //localhost/r255/js/angular.min.js: 32: 196 в Array.forEach (native) at r (http: //localhost/r255/js/angular.min.js: 7: 280) по адресу e (http: //localhost/r255/js/angular.min. js: 32: 9) на Zb (http: //localhost/r255/js/angular.min.js: 35: 98) в c (http: //localhost/r255/js/angular.min.js: 17: 431) на Yb (http: //localhost/r255/js/angular.min.js: 18: 140) на Uc (http: //localhost/r255/js/angular.min.js: 17: 215 – Georgie