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.
Related
I recently brought this angular library to my project:
https://github.com/a5hik/angular-multi-select-tree
Everything works great with it besides my unit testing. I am getting this error when running my tests:
Module 'multi-select-tree' 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.
Which puzzles me as I have added it to my chutzpah.json references (and confirmed the paths are correct many times) like so:
{ "Path": "../Scripts/Lib/ng-multi-select-tree/ng-multi-select-tree.js" },
{ "Path": "../Scripts/Lib/ng-multi-select-tree/ng-multi-select-tree.tpl.js" },
And have included it in my main app.js file. The commented out code allows for Chutzpah to find the library, however this breaks all functionality of it:
// work around for Chutzpah test discovery
//angular.module('multi-select-tree', []);
var authoring = angular.module('authoring', ['ms-content', 'portalCommon', 'ngFileUpload', 'ckeditor', 'ui.bootstrap', 'AdalAngular', 'ui.sortable', 'nvd3', 'multi-select-tree']).run(['$rootScope', function ($rootScope) {}]);
The thing I am noticing is how this library instantiates the module like so:
(function () {
'use strict';
var mainModule = angular.module('multi-select-tree');
They seem to instantiate the module and then set it to a variable. Coworkers of mine are implying that this may be the problem. Any ideas as to why Chutzpah is having a hard time finding this particular module?
This ended up having nothing to do with how my module was initialized. It turns out Chutzpah does like lambdas ('=>').
I already use Angular JS 1 in my projects and always works.
But I recieved one project that is using python and django and some pages are using angular, the page that I need to work have no angular code, then I put the call for the main script:
<script src="/static/angular/1.5.5/angular.min.js"></script>
And I get the following error:
Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=public&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.5%2F%24injector%2Fnomod%3Fp0%3Dpublic%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A6%3A412%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A25%3A235%0A%20%20%20%20at%20b%20(http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A24%3A282)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A25%3A20%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A39%3A374%0A%20%20%20%20at%20q%20(http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A7%3A355)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A39%3A222)%0A%20%20%20%20at%20bb%20(http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A43%3A246)%0A%20%20%20%20at%20c%20(http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A21%3A19)%0A%20%20%20%20at%20yc%20(http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A21%3A332)
Note: I have created nothing yet, nor app.js neither controller.js
I changed for the angular no minified and the error is more especific:
Error: [$injector:nomod] Module 'public' 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
Thanks for any suggestion
I discovered what happened, someone write in a hide pag a ng-controller="public". for this, angular was saying no have this controller.
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'
]
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.
//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.