角度路由在 Visual Studio 2015 中不起作用答案

【问题标题】：angular routing not working in Visual Studio 2015角度路由在 Visual Studio 2015 中不起作用
【发布时间】：2017-06-17 04:36:33
【问题描述】：

似乎问这个问题，我只是在打死马，但我已经浏览了所有我能找到的帖子，但仍然找不到答案。我（甚至是我的一位同事）花费了无数个小时试图解决一个看似相对基本的概念。那么，我可以在我的 angularjs 路由方面获得一些帮助吗

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'
            });
    }
]);

现有的RetaurantController.js

'use strict';

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

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

现有餐厅.html：

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

【问题讨论】：

控制台有错误吗？
应该与 Visual Studio 无关。您正在使用 .NET MVC 框架吗？如果是这样，它使用来自RouteConfig.cs 文件的路由。根据我的经验，角度路由和 .NET MVC 路由不能很好地结合在一起——尽管我想任何两个相互竞争的路由引擎都会有类似的问题
控制台没有错误
@mhodges 不，我从一个空白站点开始。我添加了 VS 2015 作为对 WebServer 的参考，因为这是许多其他密切相关问题的主题。
尝试在 url 中明确指定 index.html - 如果您还没有，只是认为如果没有设置默认路由，VS 不会默认将其放入。

标签： javascript html angularjs routes

【解决方案1】：

我认为问题在于项目结构。 Index.html 似乎嵌套在应用程序中。我认为最简单的解决方法是将 index.html 移动到项目的根目录。因此，文件夹结构为：

我能够按如下方式开始工作..

在 Index.html 中，我将链接更改为 #!/ (hash-bang)：

<!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，因为我一直认为它是一个后缀，因为它在 hash 之后，但我可以接受它。）

'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

【讨论】：

您也可以设置$locationProvider.hashPrefix('');（空字符串）并将您的链接保持为#/，这里还有另一个主题：stackoverflow.com/questions/41328840/angular-route-extra-in-url
我在那里尝试了一切，但没有任何效果，但是，我确实找到了答案并将其发布。感谢您的所有帮助！
我又试了一次，$locationProvider.hashPrefix('');是 1.6.1 版的实际工作。再次感谢您！
是的，我后来意识到这是一个与 1.6 版相关的问题，它已经引起了一些人的注意 - 包括我！很高兴它无论如何都排序了。

【解决方案2】：

经过 4 天的搜索，我终于找到了自己的答案。我使用的是角度版本 1.6.1。当我将它回滚到 1.2.1 时，一切正常。我将继续研究以找出最佳路由实践。

【讨论】：

Angular >1.6.x 与
当我发布这个时，我还没有尝试过运行这些版本。我目前正在尝试为 >1.6.x 寻找解决方案。我有一些线索，今晚晚些时候将尝试它们。会在我发现时保持更新。
appModule.config(['$locationProvider', function($locationProvider) { $locationProvider.hashPrefix(''); }]);

【解决方案3】：

尝试回滚您的 Angular 版本，直到它工作为止。

【讨论】：

正是我所做的......并且工作完美，谢谢！