load fabric js in angular application

问题:

So i downloaded and installed fabricjs using bower inside of my angular application and i am having trouble loading it up.

I have the following on top of my app.js file. Everything else loads fine except fabric

angular
 .module('myApp', [
   'flow',
   'fabric',
   'ngAnimate',
   'ngCookies',
   'ngResource',
   'ngRoute',
   'ngSanitize',
   'ngTouch',
   'ui.bootstrap',
   'ui.router',
   'controllers.main',
])
 .config( function ($stateProvider, $httpProvider, flowFactoryProvider ) {

When i load the page i get the following error.

[$injector:modulerr] Failed to instantiate module fabric due to: [$injector:nomod] Module 'fabric' is not available! You either misspelled the module name or forgot to load it. 

I am loading it up in my index.html

<script src="bower_components/fabric/dist/fabric.min.js"></script>

Anyone have any success with loading fabric inside of their angular application?

回答1:

Even though this is old, I'll try to answer it for future searchers.

I've been using Fabric inside Angular with great success.

From what I can see in your code example, you are attempting to use the standard fabic.min.js file as a Angular Module. Angular only sees it as pure JS, that is why it generates an error saying it couldn't find it - because no Angular module called "fabric" was ever declared like:

angular.module('fabric', []);

If you compare one of the other modules you had listed, say ngCookies, you can see how one is setup.

It would be too much code to post here, so the easiest solution is to utilize or study some of the excellent work by Michael Calkins here:

https://github.com/michaeljcalkins/angular-fabric

He has everything wrapped up in directives and such which makes it easy to implement.

You can also play around with it live here: http://codepen.io/michaeljcalkins/pen/Imupw

Hope that helps someone.