угловая маршрутизация, не работающая в Visual Studio 2015

Кажется, что, задав этот вопрос, я просто избиваю мертвую лошадь, но я прошел через все посты, которые мог найти, и до сих пор не мог найти ответа. Я (и даже коллега) провел бесчисленные часы, пытаясь решить то, что кажется относительно базовой концепцией. Таким образом, я могу, пожалуйста, получить некоторую помощь с моим angularjs маршрутизацииугловая маршрутизация, не работающая в Visual Studio 2015

index.html:

<!DOCTYPE html> 
<html lang="en" ng-app="foodApp"> 

<head> 
    <meta charset="utf-8" /> 
    <title>What Do I Eat</title> 

    <link href="/app/css/app.css" rel="stylesheet" /> 
    <link href="/Content/bootstrap.min.css" rel="stylesheet" /> 

    <script src="/Scripts/jquery-1.9.1.min.js"></script> 
    <script src="/Scripts/bootstrap.min.js"></script> 
    <script src="/Scripts/angular.js"></script> 
    <script src="/Scripts/angular-resource.min.js"></script> 
    <script src="/Scripts/angular-route.min.js"></script> 
    <script src="/app/js/app.js"></script> 

    <script src="/app/js/controllers/ExistingRestaurantController.js"></script> 
    <script src="/app/js/controllers/NewExperienceController.js"></script> 
    <script src="/app/js/controllers/NewRestaurantController.js"></script> 
    <script src="/app/js/controllers/indexController.js"></script> 
    <script src="/app/js/services/RestaurantData.Service.js"></script> 
</head> 

<body> 
    <header class="container-fluid"> 
     <h1>What Do I Eat</h1> 
    </header> 
    <div class="container-fluid"> 
     <div class="navbar"> 
      <div class="navbar-inner"> 
       <ul class="nav"> 
        <li><a href="#/myRest">My Restaurants</a></li> 
        <li><a href="#/addRest">Add Restaurant</a></li> 
        <li><a href="#/addExp">Add Experience</a></li> 
       </ul> 
      </div> 
     </div> 

     <ng-view></ng-view> 

    </div> 
    <footer class="container-fluid"> 
     whatever i want 
    </footer> 
</body> 
</html>

app.js:

'use strict'; 

var foodApp = angular.module('foodApp', ['ngResource', 'ngRoute']); 

foodApp.config(['$routeProvider', 
    function ($routeProvider) { 
     $routeProvider 
      .when('/myRest', 
      { 
       templateUrl: '/templates/ExistingRestaurant.html', 
       controller: 'ExistingRestaurantController' 
      }) 
      .when('/addExp', 
      { 
       templateUrl: '/templates/NewExperience.html', 
       controller: 'NewExperienceController' 
      }) 
      .when('/addRest', 
      { 
       templateUrl: '/templates/NewRestaurant.html', 
       controller: 'NewRestaurantController' 
      }); 
    } 
]);

ExistingRetaurantController.js

'use strict'; 

foodApp.controller('ExistingRestaurantController', 
    function ExistingRestaurantController($scope) { 

     $scope.restaurant = { 
      name: 'Cheesecake Factory', 
      food: 'Cheesecake', 
      price: 6.95 
     } 
    } 
);

ExistingRestaurant. html:

<div class="container-fluid"> 
    <h1>Existing Page!</h1> 
</div>

источник

2017-01-31 Stryderr

Любая ошибка в консоли? – Developer

Не должно иметь ничего общего с Visual Studio. Вы работаете с инфраструктурой .NET MVC? Если это так, он использует маршрутизацию из файла 'RouteConfig.cs'. По моему опыту, угловая маршрутизация и маршрутизация .NET MVC не очень хорошо сочетаются друг с другом - хотя я бы предположил, что любые два маршрутных двигателя, выпущенные друг против друга, будут иметь аналогичные проблемы – mhodges

Нет ошибок в консоли – Stryderr

Я думаю, что проблема заключается в структуре проекта. Index.html представляется вложенным в приложении. Я думал, что самым простым решением было переместить index.html в корень проекта. Таким образом, со структурой папок:

Я был в состоянии получать работает следующим образом ..

В Index.html, я изменил ссылки, чтобы быть #!/ (хэш-удар):

<!DOCTYPE html> 
<html lang="en" ng-app="foodApp"> 

<head> 
    <meta charset="utf-8" /> 
    <title>What Do I Eat</title> 

    <script src="/Scripts/angular.js"></script> 
    <script src="/Scripts/angular-resource.min.js"></script> 
    <script src="/Scripts/angular-route.min.js"></script> 
    <script src="/app/js/app.js"></script> 

    <script src="/app/js/controllers/ExistingRestaurantController.js"></script> 
    <script src="/app/js/controllers/NewExperienceController.js"></script> 
    <script src="/app/js/controllers/NewRestaurantController.js"></script> 
</head> 

<body> 
    <ul> 
     <li><a href="#!/myRest">My Restaurants</a></li> 
     <li><a href="#!/addRest">Add Restaurant</a></li> 
     <li><a href="#!/addExp">Add Experience</a></li> 
    </ul> 

    <ng-view></ng-view> 

</body> 
</html>

Тогда в app.js Я добавил $locationProvider и установить хэш-префикс !. (я не знаю, почему это называется hashPrefix, потому что я всегда думаю, что это суффикс, учитывая, что она приходит после хэша, но я могу жить с этим.)

'use strict'; 

var foodApp = angular.module('foodApp', ['ngResource', 'ngRoute']); 

foodApp.config(['$routeProvider', '$locationProvider', 
    function ($routeProvider, $locationProvider) { 

     $locationProvider.hashPrefix("!"); 

     $routeProvider 
      .when('/myRest', 
      { 
       templateUrl: '/app/templates/ExistingRestaurant.html', 
       controller: 'ExistingRestaurantController' 
      }) 
      .when('/addExp', 
      { 
       templateUrl: '/app/templates/NewExperience.html', 
       controller: 'NewExperienceController' 
      }) 
      .when('/addRest', 
      { 
       templateUrl: '/app/templates/NewRestaurant.html', 
       controller: 'NewRestaurantController' 
      }); 
    } 
]);

Ваш старт путь становится:

http://localhost:63317/index.html

и изменения в следующие при нажатии ссылки:

http://localhost:63317/index.html#!/myRest 
http://localhost:63317/index.html#!/addRest 
http://localhost:63317/index.html#!/addExp

источник

2017-01-31 19:46:11

Вы также можете установить '$ locationProvider.hashPrefix ('');' (пустая строка) и сохранить свои ссылки как '# /', здесь есть еще один поток: http://stackoverflow.com/questions/41328840/ angular-route-extra-in-url –

Я пробовал все и ничего не работал, однако нашел ответ и разместил его. Спасибо за твою помощь! – Stryderr

Я попытался снова и, и $ locationProvider.hashPrefix (''); это то, что на самом деле работало для версии 1.6.1. еще раз спасибо! – Stryderr

Ну после 4 дней поисков, я наконец понял, мой собственный ответ. Я использовал угловую версию 1.6.1. В тот момент, когда я вернул его в 1.2.1, все сработало нормально. Я продолжу исследования, чтобы выяснить лучшие методы маршрутизации.

источник

2017-02-02 02:03:29 Stryderr

Angular> 1.6.x значительно отличается от <1.5.x, поэтому, вероятно, угловой 1.5 также будет работать для вас (1.2 довольно старый) – devqon

Когда я разместил это, я еще не пробовал использовать версии. В настоящее время я пытаюсь найти решение для> 1.6.x. У меня есть несколько потенциальных клиентов, и я попытаюсь их совершить позже этим вечером. Будет держать этот поток обновленным, как я обнаружил. – Stryderr

appModule.config (['$ locationProvider', function ($ locationProvider) { $ locationProvider.hashPrefix (''); }]); – Stryderr

Попробуйте перевернуть угловую версию до тех пор, пока она не будет работать.

источник

2017-02-02 14:40:36

точно, что я сделал .. и отлично работал, спасибо! – Stryderr

угловая маршрутизация, не работающая в Visual Studio 2015

ответ

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