2017-10-09 6 views
0

créer projet asp.mvc et ajouter AngularJS et ajouter fabricjs https://codepen.io/michaeljcalkins/pen/ImupwAngulaJS + FabricJS + ASP.MVC

Maintenant, je surprends erreur dans la console: Erreur: [injecteur $: UNPR] fournisseur inconnu: FabricProvider < - Tissu < - ExampleCtrl

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

}]); 

Recherche de "FabricProvider" dans mon projet n'a pas de résultat. S'il vous plaît, aidez.

que je charge ce projet https://github.com/HelenSPR/TestAngularjsFabricjs

Merci beaucoup.

+0

avez-vous ajouté fabric.js dans votre vue .net mvc avant angulaire? – Niladri

+0

pourquoi utilisez-vous plusieurs modules dans votre page 'var app = angular.module ('myApp', ['ngRoute', 'ngResource']);' ceci n'est jamais utilisé dans votre code – Niladri

+0

Salut, j'installe angulaire d'abord, puis fabricjs. Maintenant, je supprime ces éléments et ajoute d'abord fabricjs, puis angulaire. Mais cette exception persiste. – HelenSpr

Répondre

0

Selon le code fourni dans github, dans votre page _Layout.cshtml vous devez inclure les faisceaux de script comme ci-dessous pour

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

et vous devez retirer le module double et contrôleur à partir du fichier _Layout comme ci-dessous

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

parce que vous utilisez le même module et contrôleur Index.cshtml également.

Dans votre page de mise en page, vous devez inclure le faisceau @Scripts.Render("~/bundles/fabric") avant le faisceau @Scripts.Render("~/bundles/angularapp") comme app.js dépend de la dépendance du tissu de fabric.js qui est inclus dans le paquet ~/bundles/fabric

+0

Désolé, j'ai encore des erreurs. – HelenSpr

0

Niladri! Je redémarre VS et misteke sortez!

Merci beaucoup!