I'm totally new to the Restangular and trying to learn it by implementing a simple application by calling a webapi. I'm able to call this service with simple $http service and getting the correct response.
The code I have written is as below.
I have googled the issue to find the solution but no like.
var myApp = angular.module('myApp', ['restangular']);
myApp.config(function (RestangularProvider) {
var newBaseUrl = "";
newBaseUrl = 'http://localhost:37103/api/'
RestangularProvider.setBaseUrl(newBaseUrl);
})
myApp.controller("myCtrl", function ($scope, Restangular) {
$scope.data = "Default Value"
$scope.data = Restangular.one("employee").get();
})
The error which I'm getting on chromes console is as below
angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=myApp&p1=Error%3A%2…0Bc%20(http%3A%2F%2Flocalhost%3A37103%2FSource%2Fangular.min.js%3A21%3A179)
The above error is clickable and it says may be the file is mot included. But I have included the restangular.js file and I could see it getting loaded in the network tab.
Thanks!
For this issue I found something was wrong in the restangular.js file which I downloaded. I replaced it with the cdn tag cdnjs.cloudflare.com/ajax/libs/restangular/1.5.1/restangular.js and it worked. Its very strange.
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
I'm trying to test my angular project and keep falling at the first hurdle. By just instantiating my module without even testing anything karma is throwing an error.
If I do include an it statement karma gives me an error saying 'Error: [$injector:modulerr]'. I'm using ngRoute in my project and I'm wondering if that has anything to do with it.
Here's my code, any suggestions on what could be wrong would be much appreciated.
angular.module('MyApp', ['ngRoute'])
.controller('HomeCtrl', ['loadArtists', function(loadArtists){
var self = this;
self.homeArtistsArray = [];
self.homeArtistsArray = loadArtists;
}])
-
describe('Practice', function(){
beforeEach(module('MyApp'));
var ctrl;
beforeEach(inject(function($controller){
ctrl = $controller('HomeCtrl');
}))
it('should do nothing',function(){
})
});
-
files: [
'jquery-1.11.3.min.js',
'angular.js',
'angular-mocks.js',
'js/app.js',
'js/appControllers.js',
'js/appFactory.js',
'js/testFile.js'
],
If ngRoute is the problem could you suggest somewhere to download it from.
You need to add angular-route.js to your karma configuration.
BTW, when debugging, you should use the not-minified angular.js file, so you get a full debug message with the error (here, modulerr).
I am working on a sample application using angular js. I am a newbie , so please bear with me
I have the following code in my controllers.js :
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', '$http', function ($scope, $http) {
$http.get('js/data.json').success(function (data) {
$scope.artists = data;
$scope.artistOrder = 'name';
});
}]);
Here , i am using http.get to load json data into application from a text file as shown above.
I am using IE 9 and was allowed to use only that , not any browser.
When i execute the above code, i am encountering an error as stated below :
CSS3117: #font-face failed cross-origin request. Resource access is restricted
I am not sure what is a cross-origin request . I am wondering why a simple http get requested is getting failed.
Here are my queries :
What is a cross origin request? An example would be great
How this holds w.r.t my example above ?
What is the remedy/solution/alternative for this ?
Try defining a var outside the controller:
this.artists = {};
And then, inside the controller:
this.artists = data;
So the page can access that var. Otherside you can only access it inside the controller.
I am getting an error when I load up my Angular App.-
"TypeError: undefined is not a function"
I have narrowed down the problem to having something to do with declaring ngAnimate in my controller as well as the error first being thrown in the Angular Animate file on line 504 -
var hasClass = angular.$$hasClass(element[0], className);
Here's a look at my controller. Everything works the way I want it to even with ngAnimate included.
var tdfapp = angular.module('tdfapp', ['ngAnimate']);
tdfapp.controller('UserCtrl', function($scope, $http) {
$scope.users = [];
$http.get('user.json').success(function(data) {
angular.copy(data, $scope.users );
});
});
Any help would be appreciated.
Looks like I was using different versions of Angular and of Angular Animate.
Switches both to stable release of 1.2.9 and it solved the problem
If using node - switching back to Node v7.8.0 (from v8.4.0) solved this problem.
I have been looking for a way to get services on initialization of my angular-js application, but could not find how to get it to work. In my case I want to get the $location service to observe the url.
Looking around, I found the services can be retrieved from the injector. To get the injector, I bootstrapped my application like this:
var angularApp = angular.module("MyApp", []);
var angularInjector = angular.injector(["MyApp", "ng"]);
angularApp.run(initializeAngularApp);
initializeAngularApp()
{
var location = angularInjector.get("$location");
}
This throws an Error:
Unknown provider: $rootElementProvider <- $rootElement <- $location
My understanding is that initializeAngularApp() should get called once the injector is done initializing. But judging from the error I get, it would not be the case.
What is the best way to get the services from the injector when my application initializes?
I found my answer and I did not need to instantiate the injector myself to get the service.
Services are injectable in the run() function, so doing:
angularApp.run(intializeAngularApp);
with
initializeAngularApp($rootScope, $location)
{
$rootScope.location = $location;
$rootScope.$watch("location.url()", function () { alert("url changed"); });
}
works.