如何在DNN 8.0 SPA框架中的不同文件中设置angularjs？

我正在DNN8.0中开发新的SPA框架

我使用angularjs而不是默认的击倒

当我将模块设置代码放在view.html中时，它可以正常工作。但是如果我尝试将代码放在另一个文件（比如app.js）中，它就不起作用。有人见过这个吗

view.html的快照如下所示：

[JavaScript:{ jsname: "JQuery" }]
[JavaScript:{ path: "~/Resources/Shared/scripts/dnn.jquery.js"}]
[JavaScript:{ path: "~/DesktopModules/DNNSPA/Scripts/angular.js"}]
[JavaScript:{ path: "~/DesktopModules/MyApp/Scripts/angular-route.js"}]
[JavaScript:{ path: "~/DesktopModules/MyApp/ngApp/app.js"}]
[JavaScript:{ path: "~/DesktopModules/MyApp/ngApp/ngControllers/FirstController.js"}]

[CSS:{ path: "~/DesktopModules/MyApp/CSS/bootstrap.min.css"}]


<script type="text/javascript">
    var d = new Date();
    var moduleId = parseInt("[ModuleContext:ModuleId]");
    var portalId = parseInt("[ModuleContext:PortalId]");
    var sf = $.ServicesFramework(moduleId);
    var moduleName = "MyApp";
    if ("[ModuleContext:EditMode]" === 'True') {
        var editMode = true;
    }
    console.log(editMode);
    var currentDate = d;

    var app = angular
    .module('dnnapp', [
        'ngRoute'
    ])
    .config(
        function ($routeProvider) {
            $routeProvider
            .when('/', {
                templateUrl: '/DesktopModules/MyApp/partials/firstView.html',
                controller: 'firstController'
            });
        });

    app.controller('firstController', function ($scope, $http) {
        // controller code
    });

</script>

<div class="module-wrap" ng-view>
</div>

所有设置代码都在view.html中

但是，如果我将模块定义移动到app.js，将控制器定义移动到FirstController.js，它将不起作用

---

我见过其他人在不同的文件中使用它，我做错了什么？

SPA令牌，即：[ModuleContext:ModuleId]不会在您的.js文件中被替换。因此，您需要在页面上为angular模块做一些设置工作，并将所有其余部分移动到js文件中。这里有一个技巧：

在your View.html上，使用ng init方法为angular应用程序定义html元素：

<div id='dnnuclear-item-[ModuleContext:ModuleId]' ng-controller="ItemController" 
    ng-init="init([ModuleContext:ModuleId],'[ModuleContext:ModuleName]','[ModuleContext:EditMode]')"> 

  ... 

</div>

---

如果您需要向模块传递比几个变量更多的信息，我建议更改此方法。我在DNNHero.com教程中有更多关于这方面的内容

您应该尝试AngularDNN模块。这可能会节省你的时间。可以在这里找到：

---

我相信你的方法会奏效。但是我不需要将模块id用作控制器名称的一部分-页面上只有一个模块。问题是，当我把代码放在另一个js文件中时，为什么它会停止工作？你是否把SPA令牌放在js文件中？我的答复的第一部分提到了这个问题。这就是为什么我解释了如何使用控制器的init方法从View.htmlI传递它，最后使用Jquery传递moduleId。但关键是我们需要将moduleId传递给js文件。谢谢你的提示。这如何处理在同一页上有多个模块的问题？您仍在调用angular.modulednnuclear.ItemApp，[]，而不是angular.modulednnuclear.ItemApp MODULEID，[]，那么这是如何工作的呢？我可以；如果模块的所有JS文件中没有可用的SPA令牌，我想不出任何方法，虽然这在理论上可以回答这个问题，但在这里包括答案的基本部分，并提供链接供参考。

<script type="text/javascript">
    angular.element(document).ready(function () {
        var moduleContainer = document.getElementById('dnnuclear-item-[ModuleContext:ModuleId]');
        angular.bootstrap(moduleContainer, ["dnnuclear.ItemApp"]);
    });
</script>

var dnnuclear = dnnuclear || {};

dnnuclear.ItemApp = angular.module("dnnuclear.ItemApp", ['ngDialog']);

dnnuclear.ItemApp.controller("ItemController", function ($scope, $window, $log, ngDialog, dnnServiceClient) { 

... 

     $scope.init = function (moduleId, moduleName, editable) {
        $scope.ModuleId = moduleId;
        $scope.EditMode = editable;
        dnnServiceClient.init(moduleId, moduleName);
        $scope.getAll();
    }
}