AngularJS + FabricJS + ASP.MVC答案

【问题标题】：AngularJS + FabricJS + ASP.MVCAngularJS + FabricJS + ASP.MVC
【发布时间】：2018-03-20 20:42:16
【问题描述】：

我创建项目 asp.mvc 并添加 angularjs 并添加 fabricjs https://codepen.io/michaeljcalkins/pen/Imupw

现在我在控制台中发现错误：错误：[$injector:unpr] 未知提供者：FabricProvider

我的 app.js：

var app = angular.module('myApp', ['ngRoute', 'ngResource']);
angular.module('example', [
    'common.fabric',
    'common.fabric.utilities',
    'common.fabric.constants'
]).controller('ExampleCtrl', ['$scope', 'Fabric', 'FabricConstants', 'Keypress', function ($scope, Fabric, FabricConstants, Keypress) {

    $scope.fabric = {};
    $scope.FabricConstants = FabricConstants;

    //
    // Creating Canvas Objects
    // ================================================================
    $scope.addShape = function (path) {
        $scope.fabric.addShape('http://fabricjs.com/assets/15.svg');
    };

    $scope.addImage = function (image) {
        $scope.fabric.addImage('http://stargate-sg1-solutions.com/blog/wp-content/uploads/2007/08/daniel-season-nine.jpg');
    };

    $scope.addImageUpload = function (data) {
        var obj = angular.fromJson(data);
        $scope.addImage(obj.filename);
    };

    //
    // Editing Canvas Size
    // ================================================================
    $scope.selectCanvas = function () {
        $scope.canvasCopy = {
            width: $scope.fabric.canvasOriginalWidth,
            height: $scope.fabric.canvasOriginalHeight
        };
    };

    $scope.setCanvasSize = function () {
        $scope.fabric.setCanvasSize($scope.canvasCopy.width, $scope.canvasCopy.height);
        $scope.fabric.setDirty(true);
        delete $scope.canvasCopy;
    };

    //
    // Init
    // ================================================================
    $scope.init = function () {
        $scope.fabric = new Fabric({
            JSONExportProperties: FabricConstants.JSONExportProperties,
            textDefaults: FabricConstants.textDefaults,
            shapeDefaults: FabricConstants.shapeDefaults,
            json: {}
        });
    };

    $scope.$on('canvas:created', $scope.init);

    Keypress.onSave(function () {
        $scope.updatePage();
    });
}]);

在我的项目中查找“FabricProvider”没有结果。

我将此项目加载到https://github.com/HelenSPR/TestAngularjsFabricjs

【问题讨论】：

您是否在 .net mvc 视图中添加了 fabric.js 在 angular 之前？
你为什么在你的页面中使用多个模块var app = angular.module('myApp', ['ngRoute', 'ngResource']);这从来没有在你的代码中使用
嗨，我先安装 angular，然后再安装 fabricjs。现在我删除这些项目并添加第一个fabricjs，然后添加角度。但是这个异常仍然存在。
我将此项目加载到github.com/HelenSPR/TestAngularjsFabricjs 非常感谢。
在您的布局页面中，您应该在捆绑包@Scripts.Render("~/bundles/angularapp") 之前包含捆绑包@Scripts.Render("~/bundles/fabric" )，因为app.js 依赖于包含在捆绑包~/bundles/fabric 中的fabric.js 的Fabric 依赖项

标签： angularjs asp.net-mvc fabricjs

【解决方案1】：

根据 github 中提供的代码，在您的 _Layout.cshtml 页面中，您应该包含如下顺序的脚本包

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/angular")
@Scripts.Render("~/bundles/fabric" )
@Scripts.Render("~/bundles/angularapp")

你应该从 _Layout 文件中删除重复的模块和控制器，如下所示

<body ng-app="example" ng-controller= "ExampleCtrl">

因为您也在 index.cshtml 中使用相同的模块和控制器。

在您的布局页面中，您应该在捆绑包@Scripts.Render("~/bundles/angularapp") 之前包含捆绑包@Scripts.Render("~/bundles/fabric" )，因为app.js 取决于捆绑包~/bundles/fabric 中包含的来自fabric.js 的Fabric 依赖项

【讨论】：

对不起，我还是错了。

【解决方案2】：

尼拉德里！我重新启动VS，然后misterke拿出来！

非常感谢！！

【讨论】：