I'm using Spring Boot for back end of my application. I'm trying to make redirect when user lost authorization during using website or when back end send 401 code to client.
I use interceptor in my config file:
var app = angular.module('myApp', [
'ngRoute', 'ngResource','ngDialog', 'tableSort', 'ngMaterial', 'ngMessages', 'timer', 'config'
]).config(function ($routeProvider, $httpProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'LoginCtrl'
})
.when('/main', {
templateUrl: 'views/main.html',
controller: 'LoginCtrl'
})
.when('/home', {
templateUrl: 'views/home.html',
controller: 'UserAccount'
})
.when('/search', {
templateUrl: 'views/find_document.html',
controller: 'findDocument'
})
.otherwise({redirectTo: '/'});
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
var interceptor = ['$rootScope', '$q', function(scope, $q) {
function success(response) {
return response;
}
function error(response) {
var status = response.status;
if (status == 401) {
window.location = "/nologin"
return;
}
return $q.reject(response);
}
return function(promise) {
return promise.then(success, error);
}
}];
$httpProvider.responseInterceptors.push(interceptor);
});
When I try this code I gets error in console log
Error:
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=myApp&p1=Error%3A%2…Flocalhost%3A8080%2Fbower_components%2Fangular%2Fangular.min.js%3A21%3A179)(…)
Where is the problem?
EDIT:
Error log from url
Failed to instantiate module myApp due to:
TypeError: Cannot read property 'push' of undefined
at http://localhost:8080/js/App.js:115:39
at Object.invoke (http://localhost:8080/bower_components/angular/angular.min.js:41:456)
at d (http://localhost:8080/bower_components/angular/angular.min.js:39:418)
at http://localhost:8080/bower_components/angular/angular.min.js:40:19
at q (http://localhost:8080/bower_components/angular/angular.min.js:7:355)
at g (http://localhost:8080/bower_components/angular/angular.min.js:39:319)
at cb (http://localhost:8080/bower_components/angular/angular.min.js:43:336)
at c (http://localhost:8080/bower_components/angular/angular.min.js:20:390)
at Bc (http://localhost:8080/bower_components/angular/angular.min.js:21:179)
at fe (http://localhost:8080/bower_components/angular/angular.min.js:20:1
Trying to find and replicate your issue, I found out that responseInterceptors are deprecated as this post point out:
Interceptor not working
So you need to refactor your code.
Hope it helps.
This page: https://docs.angularjs.org/guide/providers has a table at the bottom which states that both constants and providers are available in config phase.
When I try to use some constant in my config I get this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module testApp due to:
TypeError: undefined is not a function
The constant is set up as follows:
'use strict';
angular.module('services.config', [])
.constant('configuration', {
key: 'value';
});
then the configuration is:
angular
.module('testApp', ['services.config', 'ngRoute'])
.config(function ($routeProvider, configuration) {
$routeProvider.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
});
// do something with configuration.key - causes error
});
Does anyone know what I'm doing wrong?
Thanks in advance.
var app = angular.module('TestApp', []);
app.constant('configuration', {
key: 'value'
});
app.config(function (configuration) {
console.log(configuration.key); //value
});
app.constant('configuration', {
key: 'value'
});
here is the jsFiddle: http://jsfiddle.net/gopinathshiva/0701k7ke/8/
I am new to AngularJS and I am trying to follow some structure for scalable applications, as well as trying to get Firebase working. However, I am getting a simple error on the injector. When I view the error tree, it seems to be all AngularJS references, and I do not see a reference to an object in my code. I guess I am looking in the wrong place?
Failed to instantiate module MyApp due to:
Error: [$injector:unpr] http://errors.angularjs.org/1.3.11/$injector/unpr?p0=e
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:6:417
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:38:307
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:36:308)
at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:37:64)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:35:301)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:35:425
at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:7:302)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:35:202)
at Ob (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js:38:435
This is my Plunkr sample
It seems you don't get $scope right.
For routeProvider, it's templateUrl instead of templateURL. For TeamCtrl, if you want to bind a object to View, remember to add this object to $scope.
angular.module('MyApp').config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'TeamCtrl',
templateUrl: 'team.html'
})
.otherwise({
redirectTo: '/'
});
});
angular.module('MyApp').controller('TeamCtrl', ['$scope', '$firebase', 'Teams',
function ($scope, $firebase, Teams) {
$scope.Teams = Teams;
$scope.team = {};
$scope.SaveTeam = function(team) {
$scope.Teams.$add({
Id: $scope.team.id,
Name: $scope.team.Name,
Wins: $scope.team.Wins,
Losses: $scope.team.Losses
});
};
$scope.team.id = "";
$scope.team.Name = "";
$scope.team.Wins = "";
$scope.team.Losses = "";
}
]);
For team.html
<div ng-repeat="team in Teams">
<h2>{{team.Name}}</h2>
{{team.Wins}} / {{team.Losses}}
</div>
I am new using AngularJS, i am trying to implement a router to manage 2 different views.
I have followed the tutorial but i get an error on my javascript console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.7-build.2029+sha.80e7a45/$injector/modulerr…Flocalhost%3A3094%2Fbower_components%2Fangular%2Fangular.min.js%3A32%3A188)
This error only happens when i add the APP.config() part of the code.
I can reach the route /views/a.html directly on my browser, and i do have a <div ng-view></div> in my html code (index.html), i don't understand what i am missing...
var APP = angular.module('APP', [ 'ui.bootstrap', 'angularFileUpload', 'ngRoute' ])
//Load Facebook SDK & co...
});
APP.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/a', {
templateUrl: 'views/a.html',
controller: 'aCtrl'
}).
when('/b', {
templateUrl: 'views/b.html',
controller: 'bCtrl'
}).
otherwise({
redirectTo: '/a'
});
}
]);
APP.controller('aCtrl', function() {
console.log('CALL A CONTROLLER');
});
APP.controller('bCtrl', function() {
console.log('CALL B CONTROLLER');
});
You have to inject ngRoute into your app:
angular.module('ngViewExample', ['ngRoute'])
Unfortunately the demo app is still using v1.0.6 so you're going to see a lot of inconsistencies. Here's a better example from the documentation:
http://docs.angularjs.org/api/ngRoute.$route
I am trying to do an asynchronous http request to load some data before my app loads and so I am using a resolve in $routeProvider which is an http request in my MainController. For some reason, I keep getting Error: [$injector:unpr] Unknown provider: appDataProvider <- appData where appData is where I do my http request. I am using AngularJS v 1.2.5.
Here is the code and two methods that I tried that both give the same error:
Method #1
MainController.js
var MainController = ['$scope','$location','appData',
function($scope, $location, appData){
console.log(appData.data);
}
];
MainController.loadData = {
appData: function($http, $location, MainFactory){
var aid = MainFactory.extractAid($location);
return $http({method: 'GET', url: URL_CONST + aid});
}
};
app.js
var app = angular.module('HAY', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
redirectTo: '/pages/alerts'
})
.when('/pages/:pageName', {
templateUrl: function(params) {
return 'views/pages/' + params.pageName + '.html';
},
controller: MainController,
resolve: MainController.loadData
})
.otherwise({
redirectTo: '/pages/alerts'
});
});
I tried changing the name in case it was a conflicting system reserved keyword but with no luck. For some reason, appData is never recognized
Method #2
I also tried changing it around like so:
app.js
var app = angular.module('HEY', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
redirectTo: '/pages/alerts'
})
.when('/pages/:pageName', {
templateUrl: function(params) {
return 'views/pages/' + params.pageName + '.html';
},
controller: MainController,
resolve: {
appData: ['$http', '$location','MainFactory', function($http, $location, MainFactory) {
var aid = MainFactory.extractAid($location);
return $http({method: 'GET', url: URL_CONST + aid});
}]
}
})
.otherwise({
redirectTo: '/pages/alerts'
});
});
MainController.js
var MainController = ['$scope','$location','appData',
function($scope, $location, appData){
console.log(resolvedData);
}
];
However, the result was exactly the same. Does this have something to do with angular 1.2.5 ?
Here is a working version from someone else
http://mhevery.github.io/angular-phonecat/app/#/phones
And here is the code:
function PhoneListCtrl($scope, phones) {
$scope.phones = phones;
$scope.orderProp = 'age';
}
PhoneListCtrl.resolve = {
phones: function(Phone) {
return Phone.query();
},
delay: function($q, $defer) {
var delay = $q.defer();
$defer(delay.resolve, 1000);
return delay.promise;
}
}
angular.module('phonecat', ['phonecatFilters', 'phonecatServices', 'phonecatDirectives']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl, resolve: PhoneListCtrl.resolve}).
otherwise({redirectTo: '/phones'});
}]);
Here's an example of the code I've used in the application I'm working on, not sure it will help much because its not much different than how you have it already.
Routing
.when('/view/proposal/:id',{
controller : 'viewProposalCtrl',
templateURL : 'tmpls/get/proposal/view',
resolve : viewProposalCtrl.resolveViewProposal
})
Controller
var viewProposalCtrl = angular.module('proposal.controllers')
.controller('viewProposalCtrl',['$scope','contacts','details','rationale',
function($scope,contacts,details,rationale){
$scope.contacts = contacts;
$scope.details = details;
$scope.rationale = rationale;
// [ REST OF CONTROLLER CODE ]
});
// proposalSrv is a factory service
viewProposalCtrl.resolveViewProposal = {
contacts : ['$route','proposalSrv',function($route,proposalSrv){
return proposalSrv.get('Contacts',$route.current.params.id)
.then(function(data){
return data.data.contacts;
},function(){
return [];
});
}],
details : ['$route','proposalSrv',function($route,proposalSrv){
return proposalSrv.get('Details',$route.current.params.id)
.then(function(data){
return data.data.details;
},function(){
return {};
});
}],
rationale : ['$route','proposalSrv',function($route,proposalSrv){
return proposalSrv.get('Rationale',$route.current.params.id)
.then(function(data){
return data.data.rationale;
},function(){
return {};
]
}]
};
Now that I think about it, when I was developing my application I did have a problem and not sure why when I named my resolve function "resolve." This gave me a problem:
.when('/path',{
// stuff here
resolve : myCtrlr.resolve
})
but this did not:
.when('/path',{
//stuff here
resolve : myCtrlr.myResolveFn
})
Another Possibility
The only other thing I can think of, is that you're returning the promise from the $http call and then trying to use appData.data Try using the .then function or one of the other functions (.success,.error) to retrieve the information from the promise.
The problem was NOT due to previously using different version of AngularJS.
Here are the fixes using the code that I have above.
In app.js, you need to declare the controller as controller: 'MainController' and NOT as controller: MainController even though you have var MainController = app.controller('MainController', ....).
Second and biggest thing was that in my index.html I declared my controller already like so:
index.html
body ng-app="HEY" controller="MainController" /body
This was causing the whole Unknown provider error Apparently angular wont tell you that you have already declared the controller that you are using to do the resolve it and that that will cause a weird error that have nothing to do with the resolve.
I hope this helps someone who may have the same problem.
One thing I noticed in angular 1x docs is that YOU DO NOT SPECIFY THE RESOLVED PARAMETER AS AN ANNOTATED DEPENDENCY
So this:
.when('/somewhere', {
template: '<some-component></some-component>',
resolve: {
resolvedFromRouter: () => someService.fetch()
}
})
export default [
'$scope',
'someService',
'resolvedFromRouter'
Controller
]
function Controller($scope, someService, resolvedFromRouter) {
// <= unknown provider "resolvedFromRouter"
}
is wrong. You don't specify the resolved parameter as a dependency, in the docs:
For easier access to the resolved dependencies from the template, the resolve map will be available on the scope of the route, under $resolve (by default) or a custom name specified by the resolveAs property (see below). This can be particularly useful, when working with components as route templates.
So just do this instead:
.when('/somewhere', {
template: '<some-component></some-component>',
resolve: {
resolvedFromRouter: () => someService.fetch()
}
})
export default [
'$scope',
'someService',
Controller
]
function Controller($scope, someService) {
$scope.$resolve.resolvedFromRouter; // <= injected here
}