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

Question

我正在 DNN 8.0 中使用其新的 SPA 框架進行開發。

我使用 angularjs 而不是默認的 KnockOut。

當我將模塊設置代碼放在 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，則它不起作用。

我見過其他人讓它在不同的文件中工作，我在這里做錯了什么？

Answer 1

SPA 令牌，即：[ModuleContext:ModuleId] 不會在您的 .js 文件中被替換。 因此，您需要為頁面上的 angular 模塊做一些設置工作，並將所有其余部分移動到 js 文件中。 這是一種技術：

在您的 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>

同樣在您的 View.html 上，引導您的 angular 應用程序：

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

然后在您的 .js 文件中，使用 init 方法實現定義 angular 模塊和控制器：

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();
    }
}

如果您需要向模塊傳遞比幾個變量更多的信息，我建議更改此方法。 我在 DNNHero.com 教程Advanced Angular Concepts 中有更多關於此的內容。

Answer 2

您應該嘗試 AngularDNN 模塊。 它可能會節省您的時間。 可以在這里找到： http : //store.dnnsoftware.com/home/product-details/angulardnn