I am trying to implement AdMob to an app. I have installed cordova-plugin-admob and am trying to load $cordovaAdMob into controller as stated in official documentation Cordova AdMob, but I get unknown provider error. I figured that maybe it doesn't work in browser, but same happens if I run it on mobile.
If needed, here is controller code, but it's AdMob empty since I haven't passed even that first issue.
.controller('newsCtrl', ['$state', 'Injection', '$scope', '$http', 'SERVER', 'thumbSERVER', '$cordovaAdMob',
function ($state, Injection, $scope, $http, SERVER, thumbSERVER, $cordovaAdMob) {
Injection.ResourceFactory.getResource($http, SERVER, 'news')
.then(function (response) {
$scope.news = response.data.news;
}, function (error) {
});
$scope.thumbnailPath = thumbSERVER;
}])
EDIT:
cordova.js is added automatically when creating new platform (I have installed android) and it is referenced in index.html by default. If I inject it, I get error
Error: [$injector:nomod] Module 'ngCordova' is not available!
I have ended up using the AdMob from this link, and following the "Quick start" section and conforming it to my needs, instead of "Installation" section which is obvieusly missing something
Related
I am attempting to upgrade a large angular.js app (1.5.9) to the latest version of Angular.
I am in the process of turning the app into a hybrid AngularJs/Angular app and have reached this step in the guide:
https://angular.io/guide/upgrade#bootstrapping-hybrid-applications
So far I have changed from using gulp to webpack 4 and the app is working the same as before.
The issue I am having is, when I switch from using the ng-app directive in my index.html to bootstrapping in Javascript the app fails to start, throwing this error:
Uncaught Error: [$injector:unpr] Unknown provider: StateServiceProvider <- StateService
This is coming from my app.js file which looks like this:
angular.module('app-engine', [
'app-engine.state',
'app-engine.api',
// other modules
])
.factory('bestInterceptor', bestInterceptor)
// other configs which aren't throwing Unknown provider errors
.run(startUp);
bestInterceptor.$inject = ['StateBootstrappingService'];
function bestInterceptor(StateBootstrappingService) {
return {
request: config => {
if (!StateBootstrappingService.isBestSsoOn()) {
config.headers['x-impersonated-user'] = StateBootstrappingService.getUserName();
}
return config;
}
};
}
startUp.$inject = ['$rootScope', '$state', '$timeout', 'StateService']
function startUp($rootScope, $state, $timeout, StateService) {
// start up code
}
There is a separate app.modules.js file, which defines the other modules in the app.
Including:
angular.module('app-engine.state', ['rx', 'app-engine.api']);
The service which is mentioned in the Unknown provider error looks like this:
(function() {
'use strict';
angular
.module('app-engine.state')
.factory('StateService', StateService);
StateService.$inject = [
'$state',
'$log',
'rx',
// a few other services that exist in the app
];
function StateService(
// all the above in $inject
) {
// service code
}
})();
As the guide instructs, I am removing the ng-app="app-engine" from my index.html and adding it into the JavaScript instead. I've added it at the bottom on my app.modules.js file.
angular.bootstrap(document.body, ['app-engine']);
After this change is when the Unknown provider error is thrown. I have confirmed the source is my startUp function in app.js. I have tried including all the modules in the app in the 'app-engine' requires array, which did not change anything. It's interesting that the bestInterceptor function is not throwing any errors, despite also using a service (The StateBootstrappingService is being set up in the same way as the StateService).
Is there anything obvious I am doing wrong? Or anyone have any ideas how to solve this?
Try this:
angular.element(document).ready(function () {
angular.bootstrap(document.body, ['app-engine'])
})
For me this was necessary because the other sub components (providers and services) had not yet been added to the module yet. Running the it on "document.ready()" gives those items an opportunity to attach before trying to manually bootstrap (because they cannot be added later when manually bootstrapping)
I don't love the use of document.ready() so I'm still looking for a more offical way to do this
So I am trying to jump on the Angular bandwagon, and I have been tasked with building an SPA, for which I have selected AngularJS with ASP.Net MVC Web API (I am a .Net developer). As a fan of strongly typed languages, I have avoided javascript whenever possible throughout my career, but frameworks like AngularJS and the other libraries & plugins in recent years have made it impossible to ignore. So here I am, asking for some guidance.
I have watched the tutorials, done the sample code projects and done some learning on PluralSight, and I have things working, at least from a foundational perspective. I have a rich background in MVVM and MVC, so SOC is a big thing for me. I like the MVC type of structure that Angular provides, which is largely why I went this route in the first place.
Now let me get to my issue(s). I am initializing my module (currently) in my master page (_Layout.cshtml), which I did while tweaking and experimenting, for the sake of simplicity.
<script>
angular.module('xcmApp', ['ngRoute', 'ngResource'])
.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'companiesController',
templateUrl: 'views/companylist.html'
})
.when('/Reports',
{
controller: 'reportsController',
templateUrl: 'views/reportlist.html'
})
.otherwise({ redirectTo: '/' })
})
.factory('companiesFactory', ['$resource',
function ($resource) {
return $resource('/api/companies', {}, {
query: { method: 'GET', params: {}, isArray: true }
});
}
])
.controller('companiesController', function ($scope, companiesFactory) {
$scope.Companies = companiesFactory.query();
});
</script>
But now that I am ready to move on to deeper concepts, I want to break my scripts out into their appropriate files. Namely, app.js and associated controllers/factories/services etc. However when I move that script into app.js and reference it in _Layout.cshtml, it errors:
<script src="~/app.js"></script>
Error: [$injector:unpr] Unknown provider: a
Now there's no point in continuing to break out into controller files etc. when I can't even get the app.js to work right, so here I am stuck. I know there are some brilliant AngularJS devs on here that probably know what I'm missing before even reading this far, and I am grateful for your assistance.
Anyone who can highlight my oversight will be a superstar for me today. Thanks in advance!
EDIT:
Here is my Stack Trace:
0x800a139e - JavaScript runtime error: [$injector:modulerr] Failed to instantiate module xcmApp due to:
Error: [$injector:unpr] Unknown provider: a
http://errors.angularjs.org/1.3.15/$injector/unpr?p0=a
at Anonymous function (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4015:13)
at getService (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4162:11)
at invoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4191:9)
at runInvokeQueue (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4109:11)
at Anonymous function (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4118:11)
at forEach (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:323:11)
at loadModules (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4099:5)
at createInjector (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4025:3)
at doBootstrap (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:1452:5)
at bootstrap (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:1473:5)
http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=xcmApp&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20a%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.3.15%2F%24injector%2Funpr%3Fp0%3Da%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4015%3A13)%0A%20%20%20at%20getService%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4162%3A11)%0A%20%20%20at%20invoke%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4191%3A9)%0A%20%20%20at%20runInvokeQueue%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4109%3A11)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4118%3A11)%0A%20%20%20at%20forEach%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A323%3A11)%0A%20%20%20at%20loadModules%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4099%3A5)%0A%20%20%20at%20createInjector%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4025%3A3)%0A%20%20%20at%20doBootstrap%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A1452%3A5)%0A%20%20%20at%20bootstrap%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A1473%3A5)
REMINDER:
My problem is not that it doesn't work, it DOES WORK. It just STOPS working when I take the Javascript out of my HTML page and place it into a referenced app.js file.
Go back to the documentation. You are using a bad way of defining your application. Try:
var MyApp = angular.module( 'MyApp', ['ngRoute' , 'ngSanitize']) ;
and then use MyApp to add controllers, filters, etc.
EDIT:
BTW, it is a good practice to write the Javascripts in separate files for SPA (you are not writing a small project I guess).
It looks like you are missing a few declaration pieces related to Dependency Injection in your controller definition.
Before I post the specific code and fixes, I want to mention a useful troubleshooting tool for Dependency Injection issues. Angular has a built in directive ng-strict-di. This directive is a companion to ng-app. From the ng-app documentation:
if this attribute is present on the app element, the injector will be created in "strict-di" mode. This means that the application will fail to invoke functions which do not use explicit function annotation (and are thus unsuitable for minification), as described in the Dependency Injection guide, and useful debugging info will assist in tracking down the root of these bugs.
Now, to the code in your post:
Your controller is not using explicit function annotation. In explicit function annotation, you pass a string array of dependencies, followed by the function. This ensures that even if minification were to rename the function parameters, Angular can still identify which dependency to supply to the function. You have used explicit annotation in parts of your code, but it is missing from your controller definition.
This is classically easy to identify, with Error: [$injector:unpr] Unknown provider: a, even though you never defined a provider named a. ng-strict-di would flag this controller code.
Here is the current code, and the proposed fix.
Instead of:
.controller('companiesController', function ($scope, companiesFactory) {
Try:
.controller('companiesController', ['$scope', 'companiesFactory', function ($scope, companiesFactory) {
I don't have an ASP.net background, but I think that souldn't matter to answer your Angular question.
First declare your modules like this:
angular.module('myModule', []);
and get them im oder files like this:
angular.module('myModule').controller/foactory/....
So your code should look something like this:
//xcmApp.module.js
angular.module('xcmApp', ['ngRoute', 'ngResource']);
//xcmApp.config.js
angular.module('xcmApp').config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'companiesController',
templateUrl: 'views/companylist.html'
})
.when('/Reports',
{
controller: 'reportsController',
templateUrl: 'views/reportlist.html'
})
.otherwise({redirectTo: '/'})
});
//xcmApp.factory.js
angular.module('xcmApp').factory('companiesFactory', ['$resource',
function ($resource) {
return $resource('/api/companies', {}, {
query: {method: 'GET', params: {}, isArray: true}
});
}
]);
//xcmApp.controller.js
angular.module('xcmApp').controller('companiesController', function ($scope, companiesFactory) {
$scope.Companies = companiesFactory.query();
});
EDIT:
Regarding the error, keep in mind that your dependencies must be in the rigth order.
So your index.html (assuming you use don't use a script loader yet) should look like this:
<script src="/*path to angular*/"></script>
<script src="/*path to ngRoute*/"></script>
<script src="/*path to ngResource*/"></script>
<script src="/*path to xcmApp.module.js*/"></script> //setting your app module must come first
<script src="/*path to xcmApp.config.js*/"></script>
<script src="/*path to xcmApp.factory.js*/"></script> //must come before the controller in your case
<script src="/*path to xcmApp.controller.js*/"></script>
I am extremely new to the world of mobile development and I am working with ionic framework.
All I am trying to do is to display a toast message to the user by following this tutorial and so far I am just going crazy trying to implement it.
The error I get is as following
Cannot read property 'toast' of undefined
I have installed cordova
I have installed the Toast plugin
inside my index.html I have added the script of ng-cordova.min.js
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
Do i need to add the Toast.js file in index.html too? If yes then that does not help either and leads to another error.
This is my controller
.controller('UsersController', ['$scope', '$http', '$cordovaToast', function ($scope, $http, $cordovaToast) {
$scope.showToast = function() {
$cordovaToast
.show("Here's a message", 'short', 'center')
.then(function(success) {
console.log('Success');
}, function (error) {
console.log('Error');
});
};
}
]);
What am i missing here?
I will really appreciate any help.
UPDATE
After making changes, suggested by #Del, the following error appears
ionic.bundle.js:25642 Error: [$injector:unpr] Unknown provider: $cordovaToastProvider <- $cordovaToast <- UsersController
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24cordovaToastProvider%20%3C-%20%24cordovaToast%20%3C-%20UsersController
at ionic.bundle.js:13380
at ionic.bundle.js:17574
at Object.getService [as get] (ionic.bundle.js:17721)
at ionic.bundle.js:17579
at getService (ionic.bundle.js:17721)
at invoke (ionic.bundle.js:17753)
at Object.instantiate (ionic.bundle.js:17770)
at ionic.bundle.js:22326
at self.appendViewElement (ionic.bundle.js:56883)
at Object.switcher.render (ionic.bundle.js:54995)
If the plugin is correctly installed, I have used it without using $cordovaToast
.controller('UsersController', ['$scope', '$http', function ($scope, $http) {
$scope.showToast = function() {
window.plugins.toast
.show("Here's a message", 'short', 'center')
.then(function(success) {
console.log('Success');
}, function (error) {
console.log('Error');
});
};
}
]);
You dont have to add the ng-cordova or toast.js.
If you add the plugin (ionic plugin add ...), remove the platform, add again, and build, it should work
You are trying to run $cordovaToast on browser. It will not work because it is a native plugin. Please use it on a real device or emulator.
I am also new in ionic but I have little knowledge about android so then I found the way how to use android functions in ionic means I found the way to create own plugins from here.
so after following steps from the given link I have created an own plugin
you can see it ionic plug # github.
you need to follow simple 4 steps mentioned at git link.
hopefully, it will help you to sort out the same problem.
This error will not go away on the real device as well unless you inject the dependency for $cordovaToast. You may use or may remove $cordovaToast in the controller and it will not affect the working. It is good practice to keep dependencies. The crucial step which is missing in all the responses is to introduce DI for ngCordova in the module to which UsersControllers belongs.
The example highlighted by JSalaat has this controller
foodShop.controller('cartController', function($scope, cartFactory,
$cordovaToast)
and the foodshop module has injected ngCordova.
var foodShop = angular.module('foodShop',
['ionic','firebase','ngCordova'])
As the plug-in belong to ngCordova it does not need to be introduced separately in the controller. This explains why there is no error in that application.
in your case try the app instance creation could look like
var app = angular.module('app', ['ionic','ngCordova'])
if not you will continue to have the Unknown provider: $cordovaToastProvider error
For the record: For Ionic v2/v3
Install dependencies
Include it in ionic project
How to use it.
1. Install dependencies
Within CLI run below commands:
$ ionic cordova plugin add cordova-plugin-x-toast
$ npm install --save #ionic-native/toast
2. Include it in ionic project
1.Add below to app.module.ts
import { Toast } from '#ionic-native/toast';
....and to #NgModule section providers:[ HERE,]
2.Each page where you want to use Toast you need to add:
import { Toast } from '#ionic-native/toast';
....also add to constructor
constructor(private toast: Toast, ...){}
...now you can use it as below example:
this.toast.show('message', 'duration', 'position').subscribe();
...or sending message to console:
this.toast.show('message', 'duration', 'position').subscribe(
toast=>{
console.log(toast);
}
);
in my ionic app I want to use cordova-plugin-video-editor plugin but I don't know how to inject it on my controller.
I added the plugin on the terminal like this:
ionic plugin add https://github.com/jbavari/cordova-plugin-video-editor.git
And it is injected with the controller like this (last one):
.controller('VideoCtrl', ['$scope', '$ionicPlatform', '$ionicModal', '$cordovaDialogs', '$cordovaCapture', '$cordovaFileTransfer', '$sce', 'VideoService', '$q', '$http', '$ionicScrollDelegate', '$timeout', '$location', 'VideoEditor', function ($scope, $ionicPlatform, $ionicModal, $cordovaDialogs, $cordovaCapture, $cordovaFileTransfer, $sce, VideoService, $q, $http, $ionicScrollDelegate, $timeout, $location, VideoEditor) {
I get this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module VideoEditor due to:
Error: [$injector:nomod] Module 'VideoEditor' 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.
I am confused, I am using more plugins but all are official and I didn't have problems as I only had to do:
angular.module('starter.controllers', ['ngCordova'])
And in the html
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
Inside plugin folder there is a js file that has:
var exec = require('cordova/exec'),
pluginName = 'VideoEditor';
function VideoEditor() {
}
VideoEditor.prototype.transcodeVideo = function(success, error, options) {
exec(success, error, pluginName, 'transcodeVideo', [options]);
};
VideoEditor.prototype.createThumbnail = function(success, error, options) {
exec(success, error, pluginName, 'createThumbnail', [options]);
};
module.exports = new VideoEditor();
When I install the plugin should not this js content had gone somewhere in my www folder so then I can imported from html?
Remove the VideoEditor module in your controller configuration. because this VideoEditor have not any relation with angular.
Also you need refer the github document. They use it just like a jquery plugins. not a angular plugins. Does make sense? let me know, if not.
How do I implement it in Angular controller?
You can use it just like a javascript library.
When trying to implement the session part in the tutorial of John Papa Pluralsight Video.
I got the following error:
Uncaught TypeError: Object # has no method 'extendQ'
(function () {
'use strict';
var app = angular.module('app', [
// Angular modules
'ngAnimate', // animations
'ngRoute', // routing
'ngSanitize', // sanitizes html bindings (ex: sidebar.js)
// Custom modules
'common', // common functions, logger, spinner
'common.bootstrap', // bootstrap dialog wrapper functions
// 3rd Party Modules
'ui.bootstrap', // ui-bootstrap (ex: carousel, pagination, dialog)
//'breeze.angular.q'
]);
// Handle routing errors and success events
app.run(['$route', '$rootScope', '$q', function ($route, $rootScope, $q) {
// Include $route to kick start the router.
breeze.core.extendQ($rootScope, $q);
//use$q($rootScope,$q);
}]);
})();
It's important to know that the version of breeze that I'm working on is newer than the used on the original video.
I search for some answers on the breeze website and I've found this:
The to$q has been deprecated. It is superseded by the Breeze Angular Service.
But I didn't make it work on the tutorial example. How to change the deprecated implementation with the new one?
UPDATE:
this link helped solve the problem:
http://www.breezejs.com/documentation/breeze-angular-service
The breeze library was updated and the answer is on this link: http://www.breezejs.com/documentation/breeze-angular-service
Specifically this code from the bottom of the post:
Migration is pretty painless.
Remove the breeze.angular.q.js script from your project.
Uninstall-Package Breeze.Angular.Q if you used NuGet.
Install breeze.angular.js as explained above.
Update your index.html, changing breeze.angular.q.js to breeze.angular.js.
Update your app module to depend on "breeze.angular".
Find the one place in your code where you call "use$q" and replace it with the "breeze" dependency.
For example, you might go from this:
var app = angular.module('app', [
// ... other dependencies ...
'breeze.angular.q' // tells breeze to use $q instead of Q.js
]);
app.run(['$q','use$q', function ($q, use$q) {
use$q($q);
}]);
to this:
var app = angular.module('app', [
// ... other dependencies ...
'breeze.angular'
]);
app.run(['breeze', function () { }]);
You should also track down and eliminate code that configures Breeze to use the "backingStore" model library adapter and $http. For example, you could go from this:
function configBreeze($q, $http, use$q) {
// use $q for promises
use$q($q);
// use the current module's $http for ajax calls
var ajax = breeze.config.initializeAdapterInstance('ajax', 'angular');
ajax.setHttp($http);
// the native Breeze 'backingStore' works for Angular
breeze.config.initializeAdapterInstance('modelLibrary', 'backingStore', true);
breeze.NamingConvention.camelCase.setAsDefault();
}
to this:
function configBreeze() {
breeze.NamingConvention.camelCase.setAsDefault();
While taking the same course by John Papa I also hit breeze.core.extendQ not available on step 4.10.
This is what I did to solve the issue:
1 - In app.js pass breeze dependency directly:
// Handle routing errors and success events
// Trigger breeze configuration
app.run(['$route', 'breeze', function($route, breeze)
{
// Include $route to kick start the router.
}]);
2 - In datacontext.js do:
return EntityQuery.from('Sessions')
.select('id, title, code, speakerId, trackId, timeSlotId, roomId, level, tags')
.orderBy(orderBy)
.toType('Session')
.using(manager).execute()
.then(querySucceeded, _queryFailed);
You can also get rid of breeze.to$q.shim.js from index.html and delete the file from the \Scripts folder in the project since it's not needed anymore.
Here's the updated source code of the same project I'm doing now [ including the fixes ].