在 webapi 应用程序中使用 Angular 路由答案

【问题标题】：Using Angular route in webapi application在 webapi 应用程序中使用 Angular 路由
【发布时间】：2016-12-11 23:44:30
【问题描述】：

我不确定如何在 web api 应用程序中实现正确的 Angular 路由。我可以使用这种方法打开页面：http://localhost:52876/HTML/app/borrower.html

Angular 控制器加载良好，所有功能都来自 Angular 端。

现在，我希望能够使用 ng-route 以更好的视图打开视图，例如，http://localhost:52876/HTML/app/borrower.html 将变为 http://localhost:52876/borrower。

我在我的 Angular 应用程序中使用的 html 文件中包含了 ng-route.js 文件。

在 app.js 中我也有这个：

'use strict';

var modules = [
    'app.controllers',
    'LoanAdminApplicationController',
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute',
    'ui.router',
    'LocalStorageModule',
    'angular-loading-bar'
];

var app = angular.module('app', modules);


app.config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.when("/home", {
        controller: "homeController",
        templateUrl: "/app/views/home.html"
    });

    $routeProvider.when("/login", {
        controller: "loginController",
        templateUrl: "/HTML/login.html"
    });

    $routeProvider.when("/signup", {
        controller: "signupController",
        templateUrl: "/app/views/signup.html"
    });

    $routeProvider.when("/register", {
        controller: "signupController",
        templateUrl: "/app/views/register.html"
    });

    $routeProvider.when("/refresh", {
        controller: "refreshController",
        templateUrl: "/app/views/refresh.html"
    });

    $routeProvider.when("/tokens", {
        controller: "tokensManagerController",
        templateUrl: "/app/views/tokens.html"
    });

    $routeProvider.when("/borrower", {
        controller: "borrowerController",
        templateUrl: "/HTML/app/borrower.html"
    });

    $routeProvider.otherwise({ redirectTo: "/home" });

});

html 标记（我删除了内容）：

<!DOCTYPE html>
<html ng-app="app">
<head>
</head>
<body ng-controller="BorrowerQuickQuoteApplication">


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/modernizr.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="/assets/js/bootstrap.min.js"></script>
    <script src="/Scripts/angular.js"></script>
    <script src="/Scripts/angular-cookies.min.js"></script>
    <script src="/Scripts/angular-resource.min.js"></script>
    <script src="/Scripts/angular-sanitize.min.js"></script>
    <script src="/Scripts/angular-route.min.js"></script>
    <script src="/Scripts/angular-ui-router.min.js"></script>
<script src="/Angular/controllers.js"></script>
    <script src="/Angular/LoanApplicationController.js"></script>
    <script src="/Angular/services.js"></script>
    <script src="/Scripts/angular-local-storage.min.js"></script>
<script src="/Scripts/loading-bar.min.js"></script>

<script src="/Angular/app.js"></script>
</body>
</html>

知道我需要做什么才能使其正常工作吗？

我应该修改 RouteConfig.cs 文件还是还需要做其他事情？

【问题讨论】：

您的应用程序在路由中有什么错误？
没有显示错误，如果你愿意我可以分享teamviewer
我认为您点击了菜单，但路径不正确
我在 html 文件中根本没有使用 ng-view，这是必需的吗？ @辛格
请在您的索引 html 中包含 ng-view，这是必需的

标签： angularjs asp.net-web-api ngroute angularjs-ng-route

【解决方案1】：

例如，您不会使用文件名进行导航，因为这是角度路线工作

  $routeProvider.when("/borrower", {
        controller: "borrowerController",
        templateUrl: "/HTML/app/borrower.html"
    });

当你去localhost:8080/yourapp/borrower

并且您需要在 index.html 中使用 ng-view

这样

<div ng-view></div>

您的页面将显示在此处。

路由器会看到您正在请求借款人，并将您带到/HTML/app/borrower.html 您正在使用 html 五模式，这意味着您需要服务器端路由，以便它每次都可以落入 index.html，因此您的 url 可以没有哈希。

【讨论】：

你有几分钟时间看teamviewer吗？感谢您的回答
710 045 275 / 5630