Javascript 角度布线在Visual Studio 2015中不起作用_Javascript_Html_Angularjs_Routes

Javascript 角度布线在Visual Studio 2015中不起作用

javascript html angularjs routes

Javascript 角度布线在Visual Studio 2015中不起作用,javascript,html,angularjs,routes,Javascript,Html,Angularjs,Routes,问这个问题似乎是白费力气，但我已经浏览了所有我能找到的帖子，仍然找不到答案。我（甚至是一位同事）花了无数个小时试图解决一个看似相对基本的概念。那么，我可以在angularjs路由方面得到一些帮助吗 index.html： <!DOCTYPE html> <html lang="en" ng-app="foodApp"> <head> <meta charset="utf-8" /> <title>What Do I E

问这个问题似乎是白费力气，但我已经浏览了所有我能找到的帖子，仍然找不到答案。我（甚至是一位同事）花了无数个小时试图解决一个看似相对基本的概念。那么，我可以在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>

现有RetainantController.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>


现有页面！

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

我能按如下方式开始工作

在Index.html中，我将链接更改为

#/（散列爆炸）：
然后，开始路径变为：
http://localhost:63317/index.html

并在单击链接时更改为以下内容：
http://localhost:63317/index.html#!/myRest
http://localhost:63317/index.html#!/addRest
http://localhost:63317/index.html#!/addExp

经过4天的搜索，我终于找到了自己的答案。我使用的是angular版本1.6.1。当我将它回滚到1.2.1时，一切都很好。我将继续研究，找出最佳的路由实践
 尝试将角度版本向后滚动，直到其正常工作。
console中出现任何错误？应与Visual Studio无关。您正在使用.NETMVC框架吗？如果是，则使用RouteConfig.cs
文件中的路由。根据我的经验，angular routing和.NET MVC routing并不能很好地结合在一起——尽管我可以想象任何两个相互对立的路由引擎都会有类似的问题，但没有错误console@mhodges不，我是从一个空白网站开始的。我添加VS 2015是为了参考Web服务器，因为这是许多其他密切相关问题的主题。请尝试在url中明确指定index.html
——如果您还没有，只是认为如果没有设置默认路由，VS默认不会将其放入。您还可以设置$locationProvider.hashPrefix（“”）（空字符串）并将您的链接保留为#/，这里还有另一条线索：我在那里尝试了所有方法，但没有任何效果，但是，我确实找到了我的答案并发布了它。谢谢你的帮助！我再试了一次，然后，$locationProvider.hashPrefix（“”）；是版本1.6.1的实际工作原理。再次感谢你！是的，我意识到这是一个与版本1.6相关的问题，它抓住了一些人——包括我！很高兴它已经被分类了。正是我所做的。。而且做得很好，谢谢！Angular>1.6.x与我发布这篇文章时有很大的不同，我还没有尝试运行过这些版本。我目前正试图找到>1.6.x的解决方案。我有几条线索，今晚晚些时候再尝试。将在我发现.appModule.config（['$locationProvider'，function（$locationProvider）{$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