ngRoute 控制器在 ASP.NET MVC 中形成局部视图答案

【问题标题】：ngRoute controller form partial view in ASP.NET MVCngRoute 控制器在 ASP.NET MVC 中形成局部视图
【发布时间】：2016-05-10 15:55:18
【问题描述】：

在我的整个应用程序中设置 ngRoute 会产生问题。许多视图中使用的控制器依赖于从 ASP.NET 控制器中的数据库中获取的脚本。这是一个例子：

角度应用

var app = angular.module("app", ["ngRoute"])
    .config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) {
        $routeProvider
            .when("/Template/:id", {
                templateUrl: function(arg) { return "/User/Template/Details/" + arg.id },
                controller: "FormController"
            });                
        $locationProvider.html5Mode(false).hashPrefix("!");
    }]);

Razor 视图 Details.cshtml：

@{
    Layout = null;
}
<head>
    <script type="text/javascript">
        alert('triggered');
        angular.module("app").controller("FormController", ["$scope", function ($scope) {
            alert("not triggered");
            $scope.xyz = 1;
        }]);
    </script>
</head>
<div id="template-details" class="col-xs-12" ng-controller="FormController" ng-cloak>
    <span>{{xyz}}</span>
</div>

它加载视图很好，除了它不启动控制器（使用 ViewBag 代码）。脚本块执行得很好（用第一个 alert() 测试）。

【问题讨论】：

检查浏览器控制台是否有任何错误。
它说FormController不是一个函数并且未定义

标签： c# asp.net angularjs asp.net-mvc asp.net-mvc-4

【解决方案1】：

当您收到controller is undefined 时要记住几件事：

在调用 FormController 脚本之前，确保您的 Angular App 已加载
确保您的 FormController div 在 ng-app="app" div 内。
确保在angular 之后加载ng-route。

我已经根据您提供的内容创建了一个JsFiddle，它工作正常。

【讨论】：

嗨，Zaki，感谢您的回答。但是，您在 .js 文件中定义了控制器，但我想在 .html 视图中加载控制器。此外，控制器内容是使用 ASP.NET MVC 控制器从数据库动态生成的。至于你要记住的事情。在 AngularJS 中路由不是应用程序只启动一次的重点吗？所以我认为它是之前加载的。控制器肯定在应用程序内部。如何检查我是否在正确的时间加载 ngRoute？因为我已经在应用程序启动中设置了配置（我认为这很好）
从哪里加载内容无关紧要，控制器保存在哪里也无关紧要 js/html - 尽管从可维护性的角度来看，它应该分开。至于 mvc 中的 ngRoute 使用脚本部分标签来确保它之前加载。