asp.net mvc应用程序中的angularjs“ng-view” - 路由

Question

我目前正在开发一个使用带有 mvc 和 angularjs 的 asp.net 的 Web 应用程序。问题是，要在 cshtml 站点中获取带有“ng-view”的 angularjs。 我之前没有使用过 angularjs 和 mvc，所以希望你能帮助我:-)

这是我的问题：

• Angularjs 与小测试 {{1+2}} 一起使用，
• 但它没有向我显示来自其他 cshtml 网站的路由。

Profile.cshtml

{{1+2}}
<div ng-view></div>

更多问题：没有body oder html标签，因为我在_layout.cshtml中定义了它。在这个站点中，我还在 BundleConfig.cs 中集成了 angularjs 的脚本。 Angularjs 仍然可以通过 {{1+2}} 测试在 Profile.cshmtl 上工作。

Profile.cshtml 应显示 _PProfiles.cshtml 站点，其中包含以下代码：

<input type="text" ng-model="profileFilter" placeholder="Suchen..." />
    <table>
        <thead>
            <tr>
                <th colspan="4">Employee Table</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="employee in employeeList | filter: searchFilter">
                <td><a href="#/_PProfiles/{{employee.Identifier}}">{{employee.firstName}} {{employee.lastName}}</a></td>
                <td>{{employee.emailAdress}}</td>
                <td>{{employee.Org1}}</td>
                <td>{{employee.Org2}}</td>
                <td>{{employee.Org3}}</td>
            </tr>
        </tbody>
    </table>

app.js（angularjs 脚本）应该这样路由： （当我在输入标签中输入内容时，还有一个网页应该显示——> searchFilter）

(function () {
    'use strict';

    angular.module('Headcount', [
    'Headcount.controller',
    'Headcount.service',
    'ngRoute'
    ]).

    config(['$routeProvider', function ($routeProvider) {

        $routeProvider.

          when("/_PProfiles", {
              templateUrl: "/Home/_PProfiles.cshtml",
              controller: "tableController"
          }).
          when("/_PProfiles/:id", {
              templateUrl: "/Home/_PEmployees.cshtml", 
              controller: "employeeController"
          }).
          otherwise({ redirectTo: '/Profiles' });
    }]);

})();

Profile.cshtml 站点在 Home:Controller 中实现，并在我运行应用程序时显示。 其他站点 _PProfile.cshtml 未实现。

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace myApplikation.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Profile()
        {
            ViewBag.Message = "Your profile page.";
            return View();
        }

        public ActionResult Departments()
        {
            ViewBag.Message = "Your departments page.";

            return View();
        }

    }
}

这一切都可以在没有 mvc 的普通 asp.net 应用程序中运行。 我认为问题可能出在 mvc 路由中，因为它不允许 angularjs 路由。

编辑：该问题已解决（它取决于与 mvc 视图的错误集成），但 ng-view 仍然不显示任何内容。 注意：我正在使用 Angular 1.5.9。对于更高版本，ng-view 不能在没有 mvc 控制器的情况下工作。

那么有什么建议可以解决这个问题吗？

编辑 09.07.18 在这里，您可以在浏览器控制台中看到输出。

Image_ng-view&ng-controller

ng-view 被注释并且不显示任何内容。上面的元素显示一条带有

的消息

$scope.Message = "测试它是否有效"

这是一个测试，如果控制器工作。

当我从“tableController”中确定 {{employeeList}} 的范围时，它也可以工作。 但不是ng-view！ Image_ng-controller

Answer 1

这是 ng-view 的一个工作示例：

https://next.plnkr.co/plunk/Pp0ACPzJwc9x85XwPAVU

根据您的问题，angualrJs 不适用于 MVC 控制器。 所以更好的方法是使用 angular 和 asp.net webApi 控制器。您需要摆脱 ASP.net MVC 控制器、ASP.net MVC 路由和 ASP.net MVC 视图（即 .cshtml 文件）。

https://www.codeproject.com/Articles/826307/AngularJS-With-MVC-Web-API ：这将帮助您组织 Angular 应用程序。

我会建议你先将 .cshtml 文件转换为 .html。保存在 app 文件夹中，并将初始文件加载到 index.html。只需使用角度路由来处理您的 html 文件的呈现。