个人中心
gpt4 book ai didi

javascript - Angular 路由在 Visual Studio 2015 中不起作用

转载 作者：行者123 更新时间：2023-11-29 17:52:37 24 4
gpt4 key购买 nike

问这个问题好像是在打死马，但是我把能找到的帖子都翻遍了，还是没找到答案。我(甚至是我的同事)花了无数小时试图解决这个看似相对基本的概念。那么，我可以得到一些关于我的 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>

应用程序.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
        }
    }
);

现有餐厅.html:

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

最佳答案

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

enter image description here

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

在 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

关于javascript - Angular 路由在 Visual Studio 2015 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41962703/

24 4 0
文章推荐： android - fragment 未添加到后台堆栈
文章推荐： android - 如何在 Android 的另一个布局 xml 文件中创建按钮对象
文章推荐： javascript - 在 Javascript 中跨不同范围访问变量
文章推荐： android - DDMS 数据文件夹的小问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com