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

Question

似乎通过提出这个问题，我只是在击败一匹死马，但我浏览了所有可以找到但仍然找不到答案的帖子。 我（甚至是同事）花费了无数的时间来尝试解决似乎是一个相对基本的概念。 所以，请问我的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'
            });
    }
]);

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>

Answer 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，因为我总是认为它是后缀，因为它在哈希之后，但我可以接受。）

'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

Answer 2

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

Answer 3

尝试将您的角度版本回滚直到它起作用。

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

问题描述

3 个解决方案

解决方案1
2 2017-01-31 19:46:11

解决方案2
2 2017-02-02 02:03:29

解决方案3
0 2017-02-02 14:40:36

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

问题描述

3 个解决方案

解决方案1 2 2017-01-31 19:46:11

解决方案2 2 2017-02-02 02:03:29

解决方案3 0 2017-02-02 14:40:36

解决方案1
2 2017-01-31 19:46:11

解决方案2
2 2017-02-02 02:03:29

解决方案3
0 2017-02-02 14:40:36