Uncaught object error on Chrome. Angularjs + ngResource
angularjs, ngresource, rest
Solution
Try to debug in `Safari` browser. For me it gets more information about this error. In my case I use `angular-seed` app and rename 'myApp' module to 'myNameOfAppApp'. I received this error in `Safari`:
Error: [$injector:modulerr] Failed to instantiate module myApp due to: [$injector:nomod] Module 'myApp' 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 try to find by 'mayApp' key word and after rename in index.html Error was fixed.
Problem
While using debug on Chrome, it keeps showing this error: uncaught object, on angular.js:36. What am I doing wrong? :/ Thanks for any help :) Module and Resource objects (services.js) ``` var services = angular.module('ngdemo.services', ['ngResource']); services.factory('ProvidersFactory', function ($resource) { return $resource('http://devfz.azurewebsites.net/api/providers/', {}, { query: { method: 'GET', isArray: true }, }) }); ``` Controller (controller.js) ``` var app = angular.module('ngdemo.controllers', []); app.controller('ProviderListCtrl', ['$scope', 'ProvidersFactory', '$location', function ($scope, ProvidersFactory, $location) { $scope.providers = ProvidersFactory.query(); }]); ``` app.js ``` angular.module('ngdemo', ['ngdemo.filters', 'ngdemo.services', 'ngdemo.directives', 'ngdemo.controllers']). config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/provider-list', { templateUrl: '/provider-list.html', controller: 'ProviderListCtrl' }); $routeProvider.otherwise({ redirectTo: '/provider-list' }); }]); ``` HTML ``` <!DOCTYPE html> <html ng-app="ngdemo" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Providers</title> <link href="Content/bootstrap.min.css" rel="stylesheet"> <script src="Scripts/Vendor/angular.min.js"></script> <script src="Scripts/Vendor/angular-resource.js"></script> <script src="controller.js"></script> <script src="services.js"></script> <script src="app.js"></script> </head> <body role="document" style="padding-top: 70px; padding-bottom: 30px"> <div class="container body-content" role="main"> <div ng-controller="ProviderListCtrl"> <h2>Providers</h2> <hr> <div style="width:60%"> <table class="table table-striped table-condensed"> <thead> <tr> <th style="min-width: 30px; width: 30px;">Id</th> <th style="min-width: 100px;">Name</th> </tr> </thead> <tbody> <tr ng-repeat="provider in providers"> <td valign="middle">Test: {{provider.Id}}</td> <td valign="middle">Test: {{provider.Name}}</tdvalign> <td valign="middle" align="right" width="40px"><a ng-click="" class="btn btn-small btn-primary">edit</a></td> <td valign="middle" align="right" width="50px"><a ng-click="" class="btn btn-small btn-danger">delete</a></td> </tr> </tbody> </table> </div> </div> </div> </body> </html> ```