Проблемы с угловым ngRoute

-1

Я потратил часы и часы на поиск и поиск в Google, чтобы узнать, почему мой ngRoute не работает, но не смог найти решение, поэтому я решил приехать сюда. Вот мой код ::Проблемы с угловым ngRoute

"app.js"

angular.module("sandwichApp",["cart", "ngRoute"]) 
    .config(['$routeProvider', function($routeProvider){ 

    $routeProvider 
    . 
    when("/",{ 
     templateUrl: "app/views/sandwichList.html", 
     controller: "SandwichListController" 
    }). 
    when("/sandwichList",{ 
     templateUrl: "app/views/sandwichList.html" 
    }).  
    when("/checkout",{ 
     templateUrl: "app/views/cart.html" 
    }).  
    otherwise({ 
     redirectTo: "/app/views/sandwichList.html" 

    }); 
}]); 
// for this particular code i have tried the version where the config() doesn't contain array "[]" but only the function and it also doesn't work 


"sandwichListController.js" 
var main = angular.module("sandwichApp", ["clientAppServiceModule"]); 
main.controller("SandwichListController", function($scope, ClientAppService, cart){ 

    $scope.original = { 
     sandwiches : [] 
    } 

//.... more code here. THERE IS NO PROBLEM WITH THIS CONTROLLER SO THE CODE IS NOT IMPORTANT. 
);

"index.html"

<!DOCTYPE html> 
<html ng-app="sandwichApp"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>title</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script> 
     <!--script src="https://cdn.jsdelivr.net/angularjs/1.5.5/angular-route.min.js"></script--> 
     <script src="app.js"></script> 
     <script src="app/services/clientAppService.js"></script> 
     <script src="app/controllers/sandwichListController.js"></script> 
     <script src="app/model/cart.js"></script> 
    </head> 
    <body ng-controller="SandwichListController"> 

     <div><strong>Heading & Cart</strong></div> 

<div ng-view></div> 

    </body> 
</html>

"sandwichList.html"

<div> 
    <b>Your Cart: </b> 
    {{totalItems}} items/{{totPrice | currency}} 
    <span><a href="/checkout">checkout</a></span> 
</div> 

<div> 
    <input type="text" ng-model="sandwichName" ng-change="filterSandwich()"/> 
</div> 

<div> 
    <h1>Sandwiches </h1> 
</div> 

    <div ng-repeat="sandwich in workingCopy.sandwiches"> 
     <h3 ng-click="addItemToCart(sandwich)"> 
      <strong>{{sandwich.Name}}</strong> 
      <span>{{sandwich.Price | currency}}</span> 
     </h3> 
</div>

Когда я загружаю «index.html», я ожидаю, что раздел «в противном случае» маршрутизации отобразит «sandwichList.html» в разделе <div ng-view></div>, но он не работает. Если он не может найти файл, он будет жаловаться, но он не жалуется на то, что файл находится в нужном месте. Но это не работает.

На странице sandwichList, если контроллеры не работают, он должен иметь возможность отображать <h1>Sandwiches </h1>.

Мой хром консоли не показывает никаких ошибок, так что я не знаю, что является причиной проблемы

источник

2016-05-12 Eddy Freeman

Я уверен, что вы это делаете, но вам нужно использовать веб-сервер с ng-route. – Clint

Я думаю, что это может быть потому, что вы случайно объявляя свое приложение дважды. При регистрации нового модуля в угловом режиме вы предоставляете ему второй параметр, который представляет собой массив зависимостей. Вы делаете это, когда указываете свои маршруты. Тем не менее, когда вы идете, чтобы создать свой контроллер, вы код это:

var main = angular.module("sandwichApp", ["clientAppServiceModule"]);

Угловые видят зависимости и предполагает, что это создать новое приложение. Когда он осознает, что есть одно имя с тем же именем, оно перезаписывает его, и вы теряете все настройки маршрута, которые вы настраиваете. Попробуйте передавая свой «clientAppServiceModule» в первоначальное определение приложения, то просто создать свой контроллер, делая это:

angular.module("sandwichApp").controller("SandwichListController", function($scope, ClientAppService, cart){ 

    $scope.original = { 
     sandwiches : [] 
    } 

//.... more code here. THERE IS NO PROBLEM WITH THIS CONTROLLER SO THE CODE IS NOT IMPORTANT. 
);

Позвольте мне знать, если у вас есть какие-либо вопросы, или если это не решить.

источник

2016-05-12 02:04:21 sourdoughdetzel

Спасибо за ваш ответ. Я переместил «clientAppServiceModule» в массив модулей [] файла app.js. Теперь я получаю эту ошибку в консоли «angular.js: 38 Неиспользуемая ошибка: [$ injector: modulerr] http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=sandwichApp&p1=Erro...ogleapis. com% 2Fajax% 2Flibs% 2Fangularjs% 2F1.4.5% 2Fangular.min.js% 3A19% 3A381) « –

вам нужно будет добавить файл clientAppService.js перед вашим файлом app.js, так как вы вводите его в основное приложение Теперь. – sourdoughdetzel

Я переместил clientAppService.js выше app.js, но ту же ошибку –

Проблемы с угловым ngRoute

ответ

Смежные вопросы