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:
Unexpected token.
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:
angular.module('paymentController', [])
var stripe = require('stripe')('sk_test_....');
.controller('paymentCtrl', function($scope) {
});
app.js:
angular.module('userApp', ['appRoutes', 'userControllers', 'userServices', 'ngAnimate', 'mainController', 'authServices', 'managementController', 'paymentController'])
.config(function($httpProvider) {
$httpProvider.interceptors.push('AuthInterceptors');
});
try to move line:
var stripe = require('stripe')('sk_test_....');
above line:
angular.module('paymentController', [])
Related
I have a question about Ionic services. As you know, Ionic framework comes with a built in www directory which contains the js directory, which contains the services.js file. My first service works. I attempted to write another service in the same, services.js file and as it turns out, I got an error: Uncaught "SyntaxError: Unexpected token . http://localhost:8100/js/services.js Line: 57" in addition to "(index):28 Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.services due to:
Error: [$injector:nomod] Module 'starter.services' 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." Anyway, here's my code, take a look and let me know what I can do differently. Also, if you need more snippets, let me know!
//services.js
//the first factory, API works
angular.module('starter.services', [])
.factory('API', function($http) {
var apiFooUrl = 'http://localhost:3000/api/do/thing'
return {
all: function(){
return $http.get(apiFooUrl + 's')
},
show: function(thingID){
console.log("stock service get running", thingID);
return $http.get(apiFooUrl + '/' + thingID)
}
};
});
//this is the one that returns the error
.factory('Users', function($http) {
var apiUrl = 'http://localhost:3000/api/users/'
return {
index: function(){
return $http.get(apiUrl)
}
show: function(id){
return $http.get(apiUrl + id)
}
}
})
Edited for more info:
So in response to David L's comment:
I've injected it into my GlobalCtrl like so:
.controller('GlobalCtrl', function(Users, $rootScope, $state, $window,
Things, $scope){
$scope.newUser = {}
$scope.user = {}
//show all Users
Users.index().success(function(results){
$scope.users = results
})
})
It'll also be injected into a DetailCtrl as well.
In app.js, the services are injected like so:
angular.module('starter', ['ionic', 'starter.controllers',
'starter.services'])
There's a lot more that needs to go on eventually so I want to make sure I have it right, now.
Have I included the starter.controllers properly? Do I have to include more than one if I have multiples?
They are indeed included in the index.html file.
you have added service after closing the module,
removing the semicolon will solve this problem
}) //here reomved the semicolon
//this is the one that returns the error
.factory('Users', function($http) {
Just learning Angular and I'm encountering a few issues with module resolution. In js/directives/directives.js I have the following directive scoped to a directives module:
angular.module("directives").directive("selectList", function() {
return {
restrict: 'E',
link: function() {
// do stuff
}
}
});
On my webpage:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script>
angular.module("editUserApp", ["directives"])
.controller("editUserController", ['$http', '$scope', function($http, $scope) {
// do stuff here
}]
);
</script>
The error I'm getting is as follows:
Error: [$injector:modulerr] Failed to instantiate module editUserApp due to:
[$injector:modulerr] Failed to instantiate module directives due to:
[$injector:nomod] Module 'directives' 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.
Now, obviously, editUserApp cannot know where directives is, all by itself, so how do I tell it to fetch the directives.js file? Do I have to include it in a script tag (which doesn't seem very scalable)?
I need some way to import directives to my angular app. How can I do this?
You need to include your js/directives/directives.js file into your html and remove the directives dependency on your App module.
your code should be :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script>
angular.module("editUserApp", [])
.controller("editUserController", ['$http','directives', '$scope', function($http, $scope,directives) {
// do stuff here
}]
);
</script>
You need
angular.module("directives" ,[])
in your first block
angular.module("directives")
tries to find an existing module called directives
If you are looking for a way to import these files on a as needed basis, you might want to look at http://requirejs.org/ or http://browserify.org/ or similar tools.
Today I went to the brink of insanity.
My goal is simply to include a plugin ngCordova (in this example: cordova-plugin-device). And with a little work.
My starting point is a project Ionic tabs, nothing more.
Following the advice I received I first go to the website ngCordova, and I build a custom-ng cordova.js containing only what I need (by device).
I integrates into your project location: /www/lib/ngCordova/dist/ng-cordova.js.
I change my index.html as follows:
...
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>...
I made a dependency injection in my application module like this:
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova'])
And finally, I modify the controller "DashCtrl" to integrate the plugin:
.controller('DashCtrl', function($ionicPlatform, $scope, $cordovaDevice) {
$ionicPlatform.ready(function() {
$scope.$apply(function() {
// sometimes binding does not work! :/
// getting device infor from $cordovaDevice
var device = $cordovaDevice.getDevice();
$scope.manufacturer = device.manufacturer;
$scope.model = device.model;
$scope.platform = device.platform;
$scope.uuid = device.uuid;
});
});
})
And I get this error in my browser (under Ripple):
Uncaught Error: [$ injector: modulerr] Failed to instantiate starter unit due to:
Error: [$ injector: modulerr] Failed to instantiate ngCordova Module due to:
Error: [$ injector: modulerr] Failed to instantiate ngCordova.plugins Module due to:
Error: [$ injector: modulerr] Failed to instantiate the module device due to:
Error: [$ injector: nomod] Module 'device' is not available! Either you misspelled the name or it forgot to load module. If a unit Registering assurer That You Specify the dependencies as the second argument.
The strange thing is that, even without touching anything in my code, if I do a:
bower install ngCordova --save
It downloads the full version of ngCordova, and there, everything works perfectly.
I really do not see where is my mistake. I hope that someone among you will help me to understand.
Thank you for the time you took to read my message and the time you take to answer (and sorry for my broken English).
It is a bug in the build system.
Open ngCordova.js file and change
angular.module('ngCordova.plugins', [
'device'
]);
to
angular.module('ngCordova.plugins', [
'ngCordova.plugins.device'
]);
have you include plugin by : cordova plugin add cordova-plugin-device ?
you can try to use full ng-cordova.js just for check?
MoreOver, it's a go practice to not write on $scope from controller.
use "controller as <alias>" to define alias, and register your var like this :`.
controller('DashCtrl', function($ionicPlatform, $scope, $cordovaDevice) {
var self = this;
$ionicPlatform.ready(function() {
// sometimes binding does not work! :/
// getting device infor from $cordovaDevice
var device = $cordovaDevice.getDevice();
self.manufacturer = device.manufacturer;
self.model = device.model;
self.platform = device.platform;
self.uuid = device.uuid;
});
})`
and use it on html with <alias>.myVarOrFucntion
In my module i have some dependiences:
var app = angular.module('action', ['xeditable']);
Angular-xeditable is a bundle of AngularJS directives that allows you to create editable elements. more: http://vitalets.github.io/angular-xeditable/
End no i my Jasmine test i want to mock all this module.
I was trying like this:
var mocks;
beforeEach(function() {
mocks = jasmine.createSpyObj("mocks", ["xeditable"]);
module("action", function($provide){
$provide.value('xeditable', mocks.xeditable)
});
});
but i still get:
Error: [$injector:nomod] Module 'xeditable' is not available!
I know that there were a lot of questions about it but do not know how to deal, very please help :)
i solved it, just added another beforeEach before load module, like that:
beforeEach(function () {
//mock the xeditable lib:
angular.module("xeditable", []);
});
beforeEach(function() {
module("action");
});
I have problem with adding Angulartics.
In my app.js I just added that two dependencies (Angulartics and the last one) you can see:
var smsApp = angular.module('smsApp', [
'ngRoute',
'smsControllers',
'smsFilters',
'google-maps',
'pascalprecht.translate',
'angulartics',
'angulartics.google.analytics',
]);
and then in my index.html I added: <script src="./js/angulartics.js">
<script src="./js/angulartics-ga.js"> ---- paths to these files are ok
but when I want to create that module with:
var injector = angular.injector(['smsApp', 'ng']);
I got this error:
Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.2.15/$injector/unpr?p0=%24rootElementProvider%20%3C-%20%24rootElement%20%3C-%20%24location
Without Angulartics it goes well! Please help me :) thanks
I'm following this tutorial.
Assuming you're reading the docs here: https://github.com/angulartics/angulartics
You need to install the angularitics.google.analytics plugin by running 'bower install angulartics-google-analytics --save'
Why are you using injector?
If you're using injector, you're not using the regular AngularJS bootstrapping code, so $rootElement is not defined.
You could mock the object:
<script src="/path/to/angular-mock.js">
...
var injector = angular.injector(['smsApp', 'ngMock', 'ng']);
Or define it in your app explicitely
smsApp.config(['$provide', function($provide) {
// Should match the element that contains your ng-app="smsApp" attribute
$provide.value('$rootElement', angular.element(document.body));
}]);