let's say initially I am on page which has URL like "www.example.com/check/checkid now when I refresh page I want the URL to be changed how I can do that in angular Js .
You can use $routeProvider, which is the provider of the $route service. This service makes it easy to wire together controllers, view templates, and the current URL location in the browser.
I hope It will help.
http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/
Maybe you can add a run block to do that, for example:
angular.module("myApp", [])
.run(['$location', function($location) {
// some logic
$location.path("/somepath");
}]);
Related
Would like to check what is the issue caused to my <a href> links when after I introduced an interceptor to my angular app and it has cause the links to not reload when it is on the same page? below is how i introduce my interceptor to add jwt's Authentication token to my web service requests header.
app.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push(['$q', '$localStorage', '$location', function ($q, $localStorage, $location) {
return {
'request': function (config) {
config.headers = config.headers || {};
if ($localStorage.jwtToken) {
config.headers.Authorization = 'Bearer ' + $localStorage.jwtToken;
}
return config;
},
'responseError': function (response) {
if (response.status === 401 || response.status === 403) {
}
return $q.reject(response);
}
};
}]);
}]);
Noted that the presentation site and the business logic processing part are both independently separated and do not rely on each other. Which means that the presentation site is responsible to load the javascripts and HTML codes while the scripts are the one that is responsible to request data from the server. Authentication are done via JWT therefore I use the interceptor to inject the JWT related headers to every RESTful requests.
PHP => (renders HTML template) + (data from Angular) <= Angular => (send request to server get data)
Using the code above i was able to complete the JWT authentication but it causes all the <a href> links on the presentation page to not reload if it is in the same page. For example I have 3 items in my menu (Home, Page1, Page2). When I'm in Home and if I click on the Home link, it suppose to reload the page (like F5) but nothing happens. I would need to navigate away from the page then only i am able to click on the link.
What have i done wrong here?
Update 1: Question from #Sanjeev: How are you handling routing in you app, are you using ng-router module or custom ui-router module ? Can you add the routing code as well.
Noted that at this moment all routes are within the HTML itself using links. The javascripts do not handle any routes. Its responsibility is to GET and POST data.
Update 2: Added plunker link. Note that i would suggest you to try both commenting and uncommenting the entire interceptor section to see the difference when clicking the link. Follow these instruction below and you will recreate the scenario i mentioned.
Load and run the plunker file
On the top right corner, click on "Launch the preview in a separate window"
Copy the URL in the window and replace it in the section in line 25. The url should look something like run.plnkr.co/somerandomkeys+
Close the separate window and try clicking the link in the menubar.
When commenting the said section, notices that the page will load (acts as a refresh) but when you uncomment the section the link will not work anymore. Some sort of same page detection thing is blocking the action.
Solution :
Analysis: I ran your demo and understood the issue you were highlighting, actually the issue is not related to interceptors at all. Interceptors get called only when you make http requests using $http service.
In Angular apps the anchor tag behavior changes the moment you inject '$location' service in your app, you have injected '$location' service in your interceptor module (although i don't see it being used). So this solves the mystery why you start getting anchor issue when you add interceptor :)
In your example the anchor has same link as the current location so Angular is preventing the default behavior of anchor tag and clicking anchor does not reload your page.
You can solve it be multiple ways:
Don't inject '$location' service if you are not using it, if you can't remove it then go for solution 2 or 3.
Add attribute target="_self" or target="_blank" as per your case, this will solve your issue without requiring any Js code change. I tested this fix with your code and it worked for me.
Add a ng-click handler on anchors and change window.location in
it, or better create a directive for anchors and check if href is
same as current location then force page reload using location.reload()
If you decide to use angular routing which is great feature of Angular JS then use $route.reload() method
I have a page in my Angular app that I need to redirect to a subdomain. So if the user visits /latino, they should be redirected to "spanish.mysite/latino". I am new to Angular and I see the redirectTo function for the router but this will not let me redirect to a subdomain. When I add
redirectTo: "latino.localhost:3000/latino",
The url I get is "http://localhost:3000/latino.localhost/latino". Is it possible to do this without the UI router?
It seems like you want it to go to the "/latino" endpoint. If so, you just need to change your code to:
redirectTo: "latino"
This will give you the url:
localhost:3000/latino
My solution to this was to use an external redirect in a route filter. This is required because the Angular router considers spanish.localhost:3000 to be an external URL due to the subdomain.
I am trying to integrate adal.js in my application. Below is my Code. Could someon please let me know why the authentication is not triggered.
var app = angular.module('TestWebApp', [
'ngRoute',
'testControllers',
'testServices',
'datatables',
'AdalAngular'
]);
/**
* Configure the Routes
*/
app.config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', function ($routeProvider, $httpProvider, adalAuthenticationServiceProvider) {
$routeProvider
// Home
.when("/dashboard", {templateUrl: "partials/package.html", controller: "searchCtrl",requireADLogin: true})
// else 404
.otherwise("/404", {templateUrl: "partials/404.html", controller: "searchCtrl"});
adalAuthenticationServiceProvider.init(
{
tenant: 'test.onmicrosoft.com',
clientId: '23234sf-sdf-------'
},
$httpProvider
);
}]);
And my page url is something link this.
http://localhost:8081/test-ui/#/dashboard
This should go to the Azure login page but its not going.
I think that your tenantID is probably right - it needs to be whatever your AD portal had for the app id URI(minus the name of the application) inside your azure portal. I would also look at the manifest - This is a pretty big deal to have changed. The steps are on the page Omar linked. The SinglePageApp example is a great resource in starting out, and the example is clean, if maybe a bit trivial for the adal portion. You should also check outvittorio's excellent deep dive for a good explanation and great review of adal.js
For me the problem was that I had a login button with a form that was redirecting because of action="#" and so the Azure redirecting was not working.
I just removed the whole action-attribute and it worked
Your issue: I think you have an issue with the link. Your link should be like this:http://localhost:8081/test-ui#/dashboard
Home
ToDo List
Contact List
Adal.Js uses requireADLogin keyword to interrupt the route change event. If you don't see any redirection, it could be related to the routechange event not firing. I suggest to add different routes to your app to verify angular routes first.
General guideline: You can try the sample app first to see if your configurations is working.
Sample app:https://github.com/AzureADSamples/SinglePageApp-DotNet
If you have an issue with config, you can follow the steps in the ReadMe file to setup your app config.
If sample app works for your config and your app is having issues, you can see the calls with Fiddler and further debug into adal.js as well. Login redirect event also broadcasts adal:loginRedirect.
Im working on porting a project over to an angular based SPA. Its currently a more "traditional" node/locomotivejs app that serves up templates from the server side (never known the proper term for this).
The projects too large to to migrate all at once, so we are converting it to angular a page at a time.
My problem: if you load the angular part of the app, everything works fine. You can go to the angular routes correctly. However if you then go to a non-angular route (that should be handled serverside), then nothing loads (the ng-view goes blank, rather than a whole new template being loaded up). If you go to a serverside route first or hit refresh, the page loads correctly.
My guess is that angular is trying to handle these routes, and i am unsure how to get it to let the server take back over.
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/something/page1', {
templateUrl: '/page1.html',
controller: 'page1Ctrl'
});
$routeProvider.when('/something/page1/subpage', {
templateUrl: '/subpage.html',
controller: 'subpageCtrl'
});
}]);
this is my angular routeProvider. No "otherwise" specified. Serverside I have something like:
this.match( '/someOtherPage', 'someOtherPage#showstuff');
If i go to /someOtherPage directly, it loads correctly from the serverside. If i go to /something/page1, then go to /someOtherPage, it does not seem to contact the server.
Because you are using angular html 5 mode angular cannot tell the difference between a route that you want angular to handle, and one you don't. I think you need to tell angular to ignore certain routes. Looks like this is what you are looking for:
https://docs.angularjs.org/guide/$location#html-link-rewriting
So change your links to non-angular pages to use a target.
ex. link
I have a completely separate (from backend) AngularJS app. It uses tokens (JWT) for authentication. I'm also using ui-router and Restangular.
My problem:
I have a sidebar/profile area that displays information from the currently logged in user on every "page". It is implemented as a directive+controller and is outside of the ui-view directive context. Inside of the controller for this sidebar I'm making a request to get the profile information and attach it to the $scope. Now, when a user first visits the app that sidebar and controller get invoked and the request is made to get the profile information. However, if and since the user is not logged in, the request fails and no data is bound with the $scope.
In the meantime (notice this all happens really fast), the event listener (listening for $stateChangeSuccess from ui-router) determines that the user is not logged in (essentially if they don't have a token) and does a $state.go('login') to forward the user to the login view. The user logs in, and a $state.go('dashboard') is invoked to bring them back to the dashboard. However, being that sidebar is outside of the context of the router the controller for it is not instantiated again to cause a new request for profile information. So the sidebar is just empty with no profile information.
I'm aware that there are going to be several possible solutions to this, but I'm trying to find a descent one.
How would you architect an angular app in order to solve or avoid the problem I'm having?
P.S. I think I may be having analysis paralysis over this.
It's hard for me to answer without seeing your code specifically. If I understand correctly your directive is firing prior to the user logging in, and since there is no user profile, the side bar doesn't initiate correctly. What I would suggest is possibly doing an ng-if on the tag that fires the directive something like:
<side-bar ng-if='userData' />
That way the tag isn't inserted into the DOM until the userData exists and therefore doesn't fire the directive on the login page.
Assuming that the sidebar is the highest angular controller in your application and the other controllers are nested inside it you should be able to put a function on it that will load the information that you need. Then you can call $rootScope.loadme() anywhere you inject $rootScope.
var mainMod = angular.module('mainMod',[]);
mainMod .controller('mainController', function($scope)
{
$scope.loadMe = function()
{
//load stuff here
};
$scope.loadMe();
});
mainMod .controller('secondController', function($rootScope, $scope)
{
$rootScope.loadMe();
});
SudoCode probably wont work with copy paste but the idea should be sound.