We Keep Coding

Angular js not routing to default page after browser page refresh

I have angularjs route with the following definition:
moduleA.config(function($routeProvider){
$routeProvider.
when('/A',{templateUrl:'A.jsp'}).
when('/B',{templateUrl:'B.jsp'}).
when('/C',{templateUrl:'C.jsp'}).
otherwise({
redirectTo: '/',
templateUrl: 'A.jsp'
});
});
Now, let say I click on something and it is redirected to #/C/ view. After refreshing the page, it is redirecting to view C and not to the default view.
I have to show default page after every page refresh happens.
I thought of changing the url to base url while refreshing the page, so that it can be redirected to default page. I am looking for better alternative for this through Angularjs way.
Thanks in advance.

Try this:
In the app.run() block inject 'window' and $location dependency and add:
window.onbeforeunload = function () {
$location.path('/');
};
Like #maurycy commented, If you want user to go to default page anytime a user he's comming to your application, you don't need the event.
just:
$rootScope.$on('$routeChangeStart', function (event, next, current) {
if (!current) {
$location.path('/');
}
});
in your app.run() function.
It should work

$cookies and hide element on login/logout and ui-router child states

I am stuck at hiding and showing the login and logout buttons at the navbar. I am setting some cookies at LoginCtrl which belongs to login.html. When user logged in I am assigning rootscope to some variables which that variable assing to ngshow/hide in And getting those cookies in HomeCtrl. What i want to achieve is when I click log in button in the login.html Login element at the nav bar has to be gone and Username element has be to show. In plunker when I add some nested states like my local and result is the same. But when i remove the nested structure and add simple two state its start working.
Working Case:
.state('home', {
templateUrl:'home.html', ===>stores the navbar html
controller: 'HomeCtrl'
})
.state('login', {
templateUrl:'login.html',
controller:'LoginCtrl'
})
Not Working Case:
.state('home', {
templateUrl:'home.html, ===>stores the navbar html
controller: 'HomeCtrl'})
.state('home.login', {
templateUrl:'home.login.html',
controller:'LoginCtrl'})
Here is plunker when you logged in login button is in place but when you rerun the app Login button is gone.
http://plnkr.co/edit/tZuvyrAUD0yCN8a3K5lF

You problem was that you put 'some' key but get 'Some'. Here is your example: plnkr.co/edit/ZsT52SYFeRVCXpGYTMqK?p=preview

UI-Router State Changes when href="#" links inside page are clicked

I have a one page app which contains the ui.router AngularJS with multiple states links to different parts/code etc. The issue is that inside some of those state html pages I have for example a href="#tip" link that should open a modal that is part of a jQuery code; but what actually happens is that the State ends up changing and going back to my .otherwise("/") page in the state model.
I have noticed that what happens is that the link which is requested is not the correct link with the ui.router url that is currently rendering the page. For example, my app is on example.com/app .. When a state changes the url changes to example.com/app/#/page1 or page2 etc .. When a href="#" link is clicked, the link actually points to example.com/#link instead of what I assume should be example.com/#/page1/#tip or /#/tip considering the way my urls are shown..
How can I fix this to allow the href="#" tags to do and function as they originally did before being placed in states?
Below is my provider setup and a sample sate:
.config(function($stateProvider,$urlRouterProvider,$urlMatcherFactoryProvider){
$urlRouterProvider.otherwise('/app');
$urlMatcherFactoryProvider.strictMode(false)
$stateProvider
.state('flashcards', {
url: "/page1",
views: {
'input-views': {
templateUrl: '/page1.html',
}
}
})
});

AngularJS: Prevent page refresh when transitioning between routes

I had a problem previously where I wanted to prevent the page from refreshing when programmatically updating the URL.
I have a "home" view, e.g: /books and I have specific views: e.g: /books/123
The home page has a couple of side panels and a main panel with the list of books.
When clicking on a book, I only want the main panel to update, leaving the rest of the page as it is, but I DO want to update the URL to reflect the book that is loaded. All books should be directly linkable, and so the URL reflects this direct link. I update the URL by setting $location.path() when a specific book is loaded, and I use reloadOnSearch:false in my ui-router state to prevent the refresh.
My routes are set up as follows:
.state('books', {
url: '/books',
title: 'Books',
templateUrl: CONFIG.static_url + '/html/book.html',
controller: 'BookCtrl'
})
.state('book', {
url: '/books/:itemId',
title: 'Books',
templateUrl: CONFIG.static_url + '/html/book.html',
controller: 'BookCtrl',
reloadOnSearch: false
})
This works fine, but it has two problems.
1) When transitioning from the home "Books" page, to a specific book, the page IS refreshed. When transitioning from one specific book to another, the model updates without refreshing the page (which is the desired behaviour).
2) When using the browser back/forward controls, the change in URL is not reflected in the model and so the view doesn't update. However, it does work when transitioning to/from the home page to a specific page.
To fix problem 2, I have set a $watch on $location.path() so if it changes and it doesn't match with the model, I load in the correct item. This appears to work fine.
However, problem 1 remains. How can I seamlessly transition from the Home page, to a specific view, without the whole page refreshing while also retaining the browser back/forward functionality? I can probably continue to use the $watch functionality to update based on the URL, but I can't seem to get it to load without the page refresh.

Make book a child of books and change its URL just to /:itemId.
Do not manually set $location.path(), as this will force a refresh. Redirect between states using ui-sref directive or $state.go() function.
Try something like this:
.state('books', {
url: '/books',
// ... (template should contain <div ui-view></div> where sub-state content will be rendered)
})
.state('books.book', {
url: '/:itemId',
// ... (template and controller just for this sub-state; will get rendered into super-state's ui-view)
})
and link like this:
<a ui-sref="books.book({itemId:123})">Book 123</a>

You need to make the book as a child state of the books. By using that you achieve the required behavior as the book html will already be available for the route. I hope that will work.

Content navigation breaks after first level

Currently I have setup a small test application and ran into some trouble lately. After some tries I still don't know where my mistake is.
Here is my pen: http://codepen.io/ins0/pen/wtELa
The problem is that after clicking the side navigation the content normally shows up, navigation updates. When I click on a link inside the content - the url state changes (eg. from #/settings to #/settings/about, xhr gets fired and received but the content doesn't get replaced.
I tried listening to all state events but no error is thrown.

I found the mistake by myself. In order to get the navigation correct you need to set a a viewtarget in your router configuration for childen pages that point to your parent view. Like this:
state('app.settings.about', {
url: "/about",
views: {
'content#app' :{
templateUrl: "about.html"
}
}
});
see'content#app'. this tells the framework to render the about view in the content field defined in route app. I updated the codepen to a working example.