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?
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.
Related
I am working on a project with specific authentification that is already working in Ionic. I have to implement the same for the admin panel that will be available only for web devices, so I already installed all the dependencies, configured the app and did already the HTML/CSS stuff in ZURB Foundation for Apps 1.1.
Now I am stuck on the implementation of the controllers and services.
I read the official documentation and there is not much explanation for the custom controllers and services, so I found few texts on the web that explain the structure of the Foundation for Apps. I found also a sample app with the structure that is explained here: ORGANIZING ANGULAR FILES IN ZURB FOUNDATION FOR APPS and copied the sample files for each page from here: Foundation for Apps Template
So I put inside my app the About, Contact, Home and Shared folders inside the assets/js folder.
So the Shared folder for example contains controllers.js file with the following code:
(function () {
'use strict';
var controllers;
AppCtrl.$inject = ['$scope'];
function AppCtrl($scope) {
// This is a shared controller because its the application parent controller
}
controllers = {
AppCtrl: AppCtrl
};
angular.module('SharedModule').controller(controllers);
})
The module.js file contains this:
(function () {
'use strict';
angular.module('SharedModule', [ /* Dependencies to be shared everywhere */ ]);
})
The app.js file has the almost the same code as the generated file, except the custom modules are specified:
(function() {
'use strict';
angular.module('application', [
'ui.router',
'ngAnimate',
//foundation
'foundation',
'foundation.dynamicRouting',
'foundation.dynamicRouting.animations',
// My modules
'SharedModule',
'ContactModule',
'AboutModule',
'HomeModule'
])
.config(config)
.run(run)
;
config.$inject = ['$urlRouterProvider', '$locationProvider'];
function config($urlProvider, $locationProvider) {
$urlProvider.otherwise('/');
$locationProvider.html5Mode({
enabled:false,
requireBase: false
});
$locationProvider.hashPrefix('!');
}
function run() {
FastClick.attach(document.body);
}
})();
So now, when I run the application I get the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module
application due to: Error: [$injector:modulerr] Failed to instantiate
module HomeModule due to: Error: [$injector:nomod] Module 'HomeModule'
is not available! You either misspelled the module name or forgot to
load it. If registering a module ensure that you specify the
dependencies as the second argument.
Any help would be appreciated, thanks.
I fixed the problem.
I tried to remove the modules one by one to test if there is a problem with individual modules, but the same error was thrown, so I checked the individual files as well, but the files look the same as in the sample app. Then, I checked if the dependencies are called, but since they are not called inside the index file like in a regular AngularJS app, I compared the gulpfile.js and came with the solution:
Inside the appJS array I had to include the paths for the .js files, so that part of the gulpfile.js looks like this now:
appJS: [
'client/assets/js/app.js',
// Load my modules
'client/assets/js/*/module.js',
'client/assets/js/*/controllers.js',
'client/assets/js/*/factories.js',
'client/assets/js/*/services.js',
'client/assets/js/*/directives.js'
]
I have an AngularJS module:
angular.module("app", ['ui.bootstrap', 'ngRoute', 'ngGridPanel']).config(function($routeProvider) {
As you can see it has ngGridPanel included via dependency injection.
Here is the definition of ngGridPanel's module/directive:
angular.module('ngGridPanel', ['ngAnimate']).directive('gridPanel', ['$animate', '$compile', '$window', '$document', '$timeout', function ($animate, $compile, $window, $document, $timeout) {
As you can see, it refers to ngAnimate.
The problem I am having is that once I inject ngGridPanel into my app, every element in my app is suddenly attempting to be animated.
Now, as described in this Angular.js GitHub issue, ngAnimate will assume everything should be animated. Once I realized this is the expected behaviour, I realized that I never included ngAnimate into my app module in the first place.
So why would it be affecting my entire application? Shouldn't it only take effect in the directive that belongs to the ngGridPanel module?
So how is ngAnimate affecting the parent module scope? Is this normal?
Side-note: At this point I haven't even utilized the ngGridPanel directive at all. I have merely injected it into my app.
Side-note 2: Once I implemented a class name filter ($animateProvider.classNameFilter(/enable-animate/);) in my app, animations stopped on all my elements but remained working in the ngGridPanel directive without having to add the enable-animate class anywhere.
If you depend on ngGridPanel and ngGridPanel depends on ngAnimate, then you depend on ngAnimate as well.
It is the exact same to you as if you had defined your app with
angular.module("app", ['ui.bootstrap', 'ngRoute', 'ngGridPanel', 'ngAnimate'])
.
As for your Side-note 2, it seems likely that they have configured it to use something like .classNameFilter() as well so that animations wouldn't break if the user of their library decided to configure it differently, such as you did. I don't know too much about ngAnimate so that's just a hunch.
I really enjoy the use of AMD to manage dependencies.
Now I'm getting started with Angular, in that case things become more complicated, because in one file we refer to a certain object that we admit to have already been created and this requires to make the script tags all organized and so on.
Another thing I noticed is that as the app grows there will be many script tags and more things to grant to be in order. I found ways to make AMD work with Angular.js, but I really didn't like it because it didn't seem natural.
What are the best practices to manage dependencies in Angular JS, making it easier to maintain the app as it grows?
I'd suggest Require.js which does implement AMD. There's a great example of how to configure your main.js (the entry point for a require.js application) and test-main.js (entry point for karma tests) here: https://github.com/tnajdek/angular-requirejs-seed.
Notes:
make sure to use paths and shim for dependent modules that you want to expose to your application but that are not available as require.js modules.
make sure you keep in mind the distinction between angular.js's concept of modules and require.js modules. Require.js modules are about describing file dependencies and loading in the correct fashion. Angular modules are about enabling dependency injection, once this loading is done correctly. You'll end up with code that looks like this example:
example app.js
define([
'angular', //as defined in the requirejs shim config
'filters', //as defined in the filters.js
'services', //as defined in services.js
'directives', //in directives.js
'controllers', //in controllers.js
'angularRoute',//as defined in the requirejs config
],function(angular,filters,services,directives,controllers,angularRoute){
'use strict';
//angular.js module definition syntax: Declare app level module which depends on filters,services,controllers,directives, and angular globals
var angularappModule = angular.module('angularapp', [
'ngRoute',
'angularapp.filters',
'angularapp.services',
'angularapp.directives',
'angularapp.controllers'
]);
angularappModule.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/angularapp', {templateUrl: 'partials/angularapp.html', controller: 'angularappCtrl'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/angularapp'});
}]);
return angularappModule;
});
I am building a large Angular Application. I am trying to lazy load dependencies.
So my application module in app.js looks like
testApp = angular.module('SellerDashboard', [
'ui.bootstrap',
'ngRoute',
'chieffancypants.loadingBar',
'ngAnimate',
'route-segment',
'view-segment',
'Feature1.Index',
'Feature1.My_Listings',
'Feature1.My_Listings.Directives',
'Feature2.Debug',
'Feature2.Index',
'Feature3.Index',
'Feature3.Landing'
]);
Each of these modules have sub modules which has further dependencies.Each of the modules are in seperatefiles .An example file is as follows
var featureApp = angular.module('Feature1.My_Listings', ['Feature1.Services', 'Common.Services', 'CommonDebug.Services','angular-intro']);
listing_app.controller('my_listing', ['$scope', 'fkPaginator', '$routeParams', 'fkLogger', '$q','fkLoaderManager',function ($scope,fkPaginator, $routeParams, fkLogger, $q,fkLoaderManager) { //do somesthing})]);
So my app.js has no direct dependency on 'Feature1.Services' modules. It has dependency of Feature1.My_Listings module (which defines the controllers) which has further dependency on services modules.
[Feature1.Services defines the services has further dependency on other providers its requires]
Now,I do not want my Feature1.My_Listings to be loaded until I go the page that actually require some controller defined in 'Feature1.Services' .So if I am in "My_Listings" page I do not want to load fFeature2 and Feature 3 modules.
Implement lazy loading . The above link shows how to use resolve while changing routes.But then it also makes it mandatory to have all files under one module which is the app module and all controllers to be defined as app.controller("bla bla") using app as the global variable. But in my case I want to lazy load modules and include them dynamically based on the routes.
How do I go about it ?? It would be nice if somebody could help regarding how this can be achieved using requirejs.
So for a very large app is the above way correct for defining controllers,services ,etc or breaking them in to smaller modules like I did is the proper way ??
after following the instructions here
https://github.com/fraywing/textAngular/
1) added the script tag with textagnular js file.
2)In my app definition which was
var myApp_ = angular.module('myApp', [ 'ui.bootstrap', 'ngResource']);
I changed it to
var myApp_ = angular.module('myApp', [ 'ui.bootstrap', 'ngResource' , 'textAngular']);
I get
Uncaught Error: [$injector:modulerr] > Failed to instantiate module textAngular.
This error occurs when a module fails to load due to some exception.
What else am I missing?
It has some additional requirements. angular sanitize module, which is separate file.
You may download it from here
Include (textAngularSetup.js along with textAngular.js) or just textAngular.min.js
(textAngularSetup.js is included inside textAngular.min.js)
Check https://github.com/fraywing/textAngular/#requirements
If you use the minified version of textAngular that already links to it's sanitation module and you don't need to include a extra link (at least for the version I got via the bower packet manager).
Make sure that you include de textAngular-xxx.js below the include of angular.js in your html.