AngulaJS + FabricJS + ASP.MVC

내가 프로젝트 asp.mvc을 만들고 AngularJS와를 추가하고 fabricjs https://codepen.io/michaeljcalkins/pen/Imupw AngulaJS + FabricJS + ASP.MVC

지금은 콘솔에서 오류를 잡을를 추가 : 오류 : [$ 주입기 : unpr] 알 수없는 제공 : FabricProvider < - 직물 < - ExampleCtrl

내 app.js : 내 프로젝트에서 "FabricProvider"의

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

}]);

찾기는 어떤 결과가 없습니다. 도와주세요.

나는 https://github.com/HelenSPR/TestAngularjsFabricjs

감사 많은이 프로젝트를로드합니다.

출처

2017-10-09 HelenSpr

각도로보기 전에 .net mvc보기에서 fabric.js를 추가 했습니까? – Niladri

왜 당신의 코드에서 다중 모듈을 사용하고 있는가? var app = angular.module ('myApp', [ 'ngRoute', 'ngResource']); 이것은 코드에서 결코 사용되지 않는다 – Niladri

안녕하세요, fabricjs. 이제이 항목을 제거하고 첫 번째 fabricjs를 추가 한 다음 각도를 추가합니다. 그러나이 예외는 계속됩니다. – HelenSpr

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에서도 동일한 모듈과 컨트롤러를 사용하고 있기 때문입니다. 레이아웃 페이지에서

당신은 번들 ~/bundles/fabric

출처

2017-10-10 08:58:54 Niladri

죄송합니다, 아직도 실수가 있습니다. – HelenSpr

Niladri에 포함되어 fabric.js에서 app.js로 @Scripts.Render("~/bundles/angularapp")는 패브릭 의존성에 따라 묶음 전에 번들 @Scripts.Render("~/bundles/fabric")을 포함해야한다! VS를 다시 시작하고 실수로 벗어납니다!

감사합니다.

출처

2017-10-11 07:24:33 HelenSpr

AngulaJS + FabricJS + ASP.MVC

답변

관련 문제