Injecting dependency angularMoment returning error - javascript

I'm trying to access moment.js API, injecting angularMoment as a dependency into my module but it's returning error:
Error: [$injector:unpr] http://errors.angularjs.org/1.6.4/$injector/unpr?p0=momentProvider%20%3C-%20moment%20%3C-%20transCtrl
I'm following the docs provided by https://github.com/urish/angular-moment but an error keeps being returned. Any idea why?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/1.0.1/angular-moment.min.js"></script>
<script src="scripts/app.js"></script>
var app = angular.module('myApp', ['ngRoute', 'angularMoment']);
app.controller('transCtrl', ['moment', function(moment){
$scope.date = new moment();
}]);

Here is the detail on how to use angular-moment
https://github.com/urish/angular-moment
You have to include both moment.js and angular-moment.js in your application.

Well, after you included the moment.js script before angular-moment.min.js as I suggested in the comments to your question - You now have a simple error in your controller:
app.controller('transCtrl', ['$scope', 'moment', function($scope, moment){
You just need to inject $scope into your controller.

Related

Unknown provider: $cookies angularjs

I have tried everything I can think of and I am still receiving this error.
app.js:
angular.module('myApp', [
'ngCookies'
]).
config(['$cookies', function($cookies) {
var cookie = $cookies.getObject();
console.log(cookie);
}])
index.html:
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
bower.json:
"dependencies": {
"angular": "~1.5.0",
"angular-cookies": "~1.5.0"
}
what could seriously be going wrong? I've tried looking at everything on stackoverflow/google regarding how to fix these bugs but I still receive
Unknown provider: $cookies
When I do not add $cookies into the .config() of my app.js file, I receive no error.
You are getting this error because you cannot inject a service into the configuration section as the services won't be initialized yet. So instead of $cookies, you should use $cookiesProvider inside .config block. And for some reason if you want to use $cookies inside your config, you can inject it manually. Give this a try
app.config(function() {
var $cookies;
angular.injector(['ngCookies']).invoke(['$cookies', function(_$cookies_) {
$cookies = _$cookies_;
}]);
});

ng-dropdown-multiselect library not working for me

I found this cool library to do dropdown menus with angularjs + twitter-bootstrap-3, here:
http://dotansimha.github.io/angularjs-dropdown-multiselect/docs.
I am following the examples, I have this in my html:
<div ng-dropdown-multiselect="" options="stringData" selected-model="stringModel" extra-settings="stringSettings">
</div>
And this in my controller:
$scope.stringData = ['a', 'b', 'c'];
$scope.stringModel = [];
$scope.stringSettings = {
template: '{{option}}',
smartButtonTextConverter: function(skip, option) {
return option;
},
};
And yet, absolutely nothing is being rendered to the page. :(
Anybody have any idea what might be wrong?
I have twitter-bootstrap-3, angularjs and ng-dropdown-multiselect loaded in this order:
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/angular/angular.js"></script>
<script type="text/javascript" src="lib/angularjs-dropdown-multiselect/dist/src/angularjs-dropdown-multiselect.js"></script>
When I add the dependency here:
angular.module('app', ['ui.router', 'ngAnimate', 'ngSanitize', 'ngDropdownMultiselect']);
I get this error:
jquery.min.js:2 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module ngDropdownMultiselect due to:
Error: [$injector:nomod] Module 'ngDropdownMultiselect' 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.
http://errors.angularjs.org/1.6.1/$injector/nomod?p0=ngDropdownMultiselect
So I checked the docs (again), and it says to use this instead
angular.module('app', ['ui.router', 'ngAnimate', 'ngSanitize', 'angularjs-dropdown-multiselect']);
now it "works"
ughh, gotta love front-end development lol
var app = angular.module('app', [
'ngAnimate',
'ui.select',
'ngSanitize',
'ui.router',
'ui.bootstrap',
'ui.jq',
'app.directive.voucherView',
'abp'
]).filter('angularjs-dropdown-multiselect', function () { });

Angular $resource: Unknown Provider error, loading dependancies and angular elements

Been doing rails for about a year but this is my first real angular app. So far I've been mostly piecing things together from tutorials, but I'm having troubles. I've searched through other SO questions, but I haven't found a scenario like this.
I'm getting the following error when I load the page. I believe it has to do with how I'm requiring modules / injecting dependancies. Any illumination here is greatly appreciated!
Error: [$injector:unpr] Unknown provider: ReleaseProvider <- Release
my main app - mighty.js:
var mightyReal = angular.module('mightyReal', ['ngResource']);
mightyReal.factory ('Release', ['Resource', function($resource) {
return $resource('/api/releases/all');
}]);
my controller - releaseController.js:
angular.module('mightyReal').controller('releaseController', [ '$scope', 'Release', function($scope, Release){
$scope.releases = Release.query();
}]);
my order of loading js scripts - index.erb:
<script src="js/angular.js"></script>
<script src="js/resource.js"></script>
<script src="js/mighty.js"></script> <!-- main app -->
<script src="js/auth.js"></script>
<script src="js/releaseController.js"></script>
and my sinatra API route - index.rb
get '/api/releases/all' do
content_type :json
Release.all.to_json
end
I think you need to change this:
mightyReal.factory ('Release', ['Resource', function($resource) {
to this:
mightyReal.factory ('Release', ['$resource', function($resource) {

Angular ngResource still not recognising $resource

My app has this line at the top, like most angular apps. I assume here it's pulling in ngRoute and ngResource
var myApp = angular.module('myApp', ['ngRoute', 'ui.bootstrap', 'ngResource']);
how ever I create a service below:
myApp.factory('NewsService', function($resource) {
return $resource('/api/news/:id', {id: '#id'}, {update: {method: 'PUT'}})
})
and in my console I get this message:
Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- NewsService
In my angular folder I have all the js files associated with angular, from angular-animate.js through to angular-touch.js including obviously angular-resource.js, I'm wondering why it is complaining, or what I can do to narrow down to the specific error.
I'm not using the min files at the moment because the errors aren't verbose enough.
In my controllers I just do this:
function newsCreateController($scope, NewsService) {}
You need to make sure you include the appropriate angular files, and application files in your index.html, eg:
<!-- angular related files -->
<script src="/lib/angular/angular.js"></script>
<script src="/lib/angular-resource/angular-resource.js"></script>
<!-- application related files -->
<script src="/apps/myapp/services/newsservice.js"></script>
<script src="/apps/myapp/app.js"></script>
Obviously this is an example, and depends on your file structure.
Once everything is included, you need to make sure your modules are setup correctly, and injected accordingly.

Unknown provider: $resourceProvider <- $resource with AngularJS

I have declared the following in app.js
angular.module('adminApp', ['ngGrid','ngResource']);
in data.js
angular.module('adminApp', [])
.factory('testAccountService', function ($http) {
var TestAccount = {
in GridCtrl.js
angular.module('adminApp',[])
.controller('GridCtrl', function ($scope, $http, $resource, testAccountService) {
$scope.selectedTestAccount = null;
I am loading my scripts like this:
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-resource.min.js"></script>
<script src="~/App/admin/services/Data.js"></script>
<script src="~/App/admin/controllers/GridCtrl.js"></script>
When I run this it gives me an error saying:
Error: Unknown provider: $resourceProvider <- $resource
at Error (<anonymous>)
at http://127.0.0.1:81/Scripts/angular.js:2682:15
at Object.getService [as get] (http://127.0.0.1:81/Scripts/angular.js:2810:39)
at http://127.0.0.1:81/Scripts/angular.js:2687:45
Is there something wrong with the way I am doing this. I am confused about how to set up the service but I can't see what's wrong:
$resource is not part of AngularJS Core.
You have to include: angular-resource.js.
From the docs:
To use $resource make sure you have included the angular-resource.js that comes in Angular package. You can also find this file on Google CDN, bower as well as at code.angularjs.org.
In your data.js and GridCtrl.js, you need to remove the [] from the angular.module('adminApp', []) call.
Like so: angular.module('adminApp')
Also, make sure your app.js is loaded first.
you would also need to include angular resource module definition 'ngResource' on your module defintion angular.module('adminApp', ['ngResource'])

Categories