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.
Related
I've been trying to understand how to set up Stripe for my app but am having problems with the implementation of the module. Normally when using a module i would require it in the top of the file to be able to use it but when i do it in the paymentCtrl file it doesn't work and i get the two errors below: where am i supposed to declare it for me to be able to use it? Well as you see i'm quite new to this and would like to understand how to structure this so that the payments work.
errors:
require is not defined
at paymentCtrl.js:1
and
Failed to instantiate module paymentController due to:
Error: [$injector:nomod] Module 'paymentController' 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.
paymentCtrl:
var stripe = require('stripe')('sk_test_....');
angular.module('paymentController', [])
.controller('paymentCtrl', function($scope) {
});
app.js:
angular.module('userApp', ['appRoutes', 'userControllers', 'userServices', 'ngAnimate', 'mainController', 'authServices', 'managementController', 'paymentController'])
.config(function($httpProvider) {
$httpProvider.interceptors.push('AuthInterceptors');
});
Stripe's Node.js library is meant to be used in server-side code. You should not embed it in client-side code, as doing so would reveal your secret API key.
In your client-side code, you can use Checkout or Elements to collect and tokenize payment information.
I'm trying to get angularjs working with jquery datatables, i'm using the samples found here:
https://l-lin.github.io/angular-datatables/#/angularWay
I've included the required scripts, but when I update my module to include datatables I get an error:
var testModule = angular.module("testModule", ['ngResource', 'ngRoute', 'ngSanitize', 'datatables']);
I get the following error:
Uncaught Error: [$injector:modulerr]
This error occurs when a module fails to load due to some exception. The error message above should provide additional context.
A common reason why the module fails to load is that you've forgotten to include the file with the defined module or that the file couldn't be loaded.
removing the 'datatables' from there and it works but without datatables. I've included the below scripts in the following order:
jquery.min.js
jquery.dataTables.min.js
angular.min.js
angular-datatables.js
test-module.js
In the examples I don't see anything to indicate where the datatables would come from it not from the angular-datatables.js file.
it looks like "datatables" module may not have been registered. How are you loading you JS files ?
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'
]
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.
//index.html
<html ng-app="app">
//app.js
angular.module('app', 'test-module')
If I don't register the test-module in any of my scripts like below:
angular.module('test-module', [])
I will get errors below in brower and the whole website will not be loaded:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module test-module due to:
Error: [$injector:nomod] Module 'test-module' 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.
Q: How to ensure the website page will be loaded even through there are any unknown modules loaded errors ?
I think you should look on this problem from other side.
If you use test-module (module for testing) you in development process. You could configure your backend for work in several environments. For example dev, test and prod. You can handle sub domain and decide on backend which modules need to be loaded. dev.yourdomain.com (for dev environment), yourdomain.com (for production environment) and test.yourdomain.com (for tasting).
You can generate such script:
<script type="text/javascript">
var MyModules = ['test-module'];
</script>
And handle it so:
angular.module.apply(angular, 'app', MyModules);
I found solution to you answer :)
Angular have array of requires for each module, so you can easily push some requires if you want to use this module.
In your case you can do this
//index.html
<html ng-app="app">
//app.js
angular.module('app', [])
//test-module.js
angular.module('test-module', [])
angular.module('app').requires.push('test-module');
So if you load test-module.js to your browser, you automatically inject dependency to your app.