I am using interceptor for checking responses, and if there is error I am rejecting the response, which is working fine, but issue is after rejecting response I am getting html file which is not rendering properly, even in html response (from browser console), it is showing html tags but it is not rendering that and displaying blank page.
Any help would be highly appreciated.
I am using route provider for switching, where I am hitting to json and getting response.
$routeProvider
.when("/news", {
templateUrl: "newsView.html",
controller: "newsController",
resolve: {
message: $http.post('xyz.json',{});
}
}
})
Now my json contains error message, like below:
{data:{errorCode:'231',message:'Custom Error'}}
After this I have created one interceptor which check if there is error message then it rejects the response else it returns the response.
if(data.errorCode)
{
add error code to the custom directive message list
$q.reject(response)
}
return response
In my html file I have a custom directive.
<div message></div>
Now issue is that I am getting json file with error code and it is getting required data, and after that I am getting html file news.html file which is not rendering the custom directive and if I remove the reject , it is showing custom directive
Related
I am working on a project based on ionic and angular js. I am loading JSON file which contains some JSON data in key-value pair. What I want to achieve is I have to call $urlRouterProvider.otherwise() method after json file is loaded completely. Following is the code which I have tried but it does not work for me. I have tried putting console in 'defaultRoute' function it is getting executed but '$urlRouterProvider.otherwise('/tab/myjobs')' this line doesn't work.The following code is present in app.config function. Any help will be appreciated.
$.getJSON('js/constants/'+lang+'.json')
.then(function(response) {
$translateProvider.translations(window.localStorage['deviceLanguage'],response);
defaultRoute($urlRouterProvider);
}, function(response) {
//$translate.use('en');
});
function defaultRoute($urlRouterProvider){
if(window.localStorage['userData']) {
var access_token = JSON.parse(window.localStorage['userData']).access_token;
if(access_token){
$urlRouterProvider.otherwise('/tab/myjobs');
}else{
$urlRouterProvider.otherwise('/login');
}
}else{
console.log("in line 282");
$urlRouterProvider.otherwise('/login');
}
}
The problem is that you are running an async method in the config phase.
AngularJS lifecycle is splitted in 2 phases, config (where you can use providers, but not services because these are not yet registered), and run (where you cannot use providers, but you can use services and in general is equivalent to the main function).
The run phase starts when config phase has finished, and config phase do not wait for any async process, so what is happening is that when your JSON get promise is solved your config phase has already finished (so any provider config you try to do in your promise success callback do not really config anything).
So in short, you cannot use $urlRouterProvider.otherwise() passing the result of an async call, like your getJson method.
A couple alternatives to what you are trying to do (redirect user depending on auth) are:
angular ui-router login authentication and angularjs redirect to login page if not authenticated with exceptions.
Consider using $state.go('someState')
You would want your code to look like this:
if(access_token){
$state.go('myJobs'); // where myJobs is the state correlated with your url 'tabs/jobs'
}else{
$state.go('login'); // or whatever the state name is that you have for 'login'
}
}else{
console.log("in line 282");
$state.go('login');
}
If you are trying to send the user to different routes conditionally, use $state.go('route.path') instead of updating the .otherwise() configuration. For example:
var app = angular.module('myapp',['ionic']);
app.controller('$scope', '$state','$http', [function($scope, $state, $http){
$http.get('my/api/path')
.then(function(response){
if(response.authenticated){
$state.go('secret.route');
} else {
$state.go('public.route');
}
});
}]);
I used adal-angular js to protect my routes.
$routeProvider.
when("/dashboard", { templateUrl: "Views/Dashboard.html", controller: "DashboardController", requireADLogin: true })
But when Adal getting token, I have an error in console:
Error: [$compile:tpload] Failed to load template: Views/Dashboard.html (HTTP status: undefined undefined)
Could someone know why it happens?
First, forgive my english.
For me only have worked when I specified "/myUrl" in anonymousEndpoints. That skip the interceptor for this backend url.
I had an issue with this for angular ui bootstrap templates. Adding the path "uib/" to the anonymous endpoints array fixed my problem.
I am working on project where my role is server-side programmer.Client side developer used Angular js while designing pages.
Problem I am facing is we have one page where I need to pass one parameter along with url to server
<a id="startQuiz" href="#/Quiz" >Start Quiz</a>
jquery code is
$('#startQuiz').click(function (e) {
e.preventDefault();
window.location.href = '#/Quiz/' + selectedTopic;
}
Controller code is
#RequestMapping(value="/Quiz", method = RequestMethod.GET)
public String Quiz(HttpServletRequest request,Model model,HttpServletResponse response,#RequestParam(value = "topic", required = false) String topic) throws Exception {
System.out.println("select topic : "+topic);
}
I am getting topic as null cause Nothing after the hash # sign is getting sent to the server, hence the null values
Rounting file Is
app.config(function($routeProvider){
$routeProvider
.when("/Quiz", {templateUrl: "Quiz", controller: "PageCtrl"})
});
So, What change should I make in routing so I can get value of topic in Controller
Any way to do that?
The URL of the page is not what matters here. That URL will only load the main page template.
What matters is the URL used to send the AJAX request to your backend controller.
The route should be defined as
$routeProvider
.when("/Quiz/:topicId", {
templateUrl: "Quiz",
controller: "PageCtrl"
})
Then, using the $routeParams service in the PageCtrl, you can get the value of topicId, and send the appropriate AJAX request to the backend.
I am building a small mobile app blog with ionic and angular but when i try to make a resource query with manually injected params i have a bad url string. meaning angular is not passing my syntax correctly or i am making a bad mistake.
Here is my code
angular.module('starter.posts', ['ionic','ngResource'])
.factory('Post', function ($resource) {
return $resource('http://example.org/wp-json/:params');
});
app.controller('HomeCtrl', function ($scope, $state, $ionicSideMenuDelegate, Post) {
"use strict";
/* Items for left side menu. */
$scope.posts = Post.query({params: "posts?filter[posts_per_page]=3"})
})
and the error log show the bellow error
http://example.org/wp-json/posts%3Ffilter%5Bposts_per_page%5D=3 Failed to load resource: the server responded with a status of 404 (Not Found)
which simply means that it did not translate the url correctly. How can i fix this so the url can be in the bellow format
http://example.org/wp-json/posts?filter[posts_per_page]=3
I am new to angular trying to simulate an entire wordpress blog with angular.
I usually do something like this, passing a js object in:
usersFactory.get = function (request) {
var operation= $http({url: urlBase, method:'get', params:request });
perhaps you should add posts to your resource url
$resource('http://example.org/wp-json/posts:params');
and pass an object like this
var filter={};
filer.posts_per_page=3
in as your params
I was able to figure the right syntax by using the code below,
Post.query({'filter[posts_per_page]': 20, 'page' : $scope.pageNum}, function (data, responseHeaders)
I have written a simple Angular-js app as below:
angular.module("myApp",['ngRoute'])
.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/',{
name:'route1',
controller:'Route1Ctrl',
template:'partials/route1.tpl.html'
})
.otherwise({redirectTo:'/'});
}])
.controller('Route1Ctrl',['$scope',function($scope){
}});
The app fails to load and the only error message that I can see in the chrome console box is:
Uncaught objet
What can I do to get more usable error messages ?
instead of template: you must use templateUrl