We Keep Coding

AngularJS problem with backing to home page

This is how i config the home page:
$stateProvider.state('home', {
url: '',
templateUrl: 'static/templates/home.html',
controller: 'homeCtrl'
});
And above this working nice.
here you got to see my nav:
Home
Add New
I have another route named: add
$routeProvider
.when('/add', {
templateUrl: 'static/templates/add.html',
controller: 'addCtrl'
});
Above everything working fine but the problem is: when i click on href="#!/add">Add New</a> it works good to navigate me to add.html page but when i click on Home the page not back to home, it still stay in add even when i click on other route, they work, only problem with home, if i click on home, it doesn't bring me to home page
What is the problem?
Note that: When i landed to home page directly http://127.0.0.1:8000/ it is works nice but if i switch to another page and come to home page again by click on home buttion, it is not 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',
}
}
})
});

Back button loop with AngularJS and routeparams

Here's what I wish to achieve:
User is on url example.com/2
User goes to url example.com/2d <- this is not valid url
User is fowarded to example.com/2d/404_error
User clicks browser "back" button and lands on example.com/2
Here's what I have a problem with
User clicks browser "back" button and lands on example.com/2d
User is again automatically forwarded to example.com/2d/404_error
I have created infinite back button loop :(
In my app.config I have
.when('/:gameId/404_error', {
templateUrl: 'views/page_not_found.html'
})
.when('/:gameId', {
controller: 'game',
templateUrl: 'views/gamePage.html'
})
It is called out by app.factory when data is not fetched
}, function(response) {
// something went wrong
$location.path("/" + id + "/404_error");
return $q.reject(response.data);
});
I have tried the "otherwise" method, but using routeparams renders it useless.
You can test it out here:
http://vivule.ee/2 <- working url
http://vivule.ee/2d <- not working url

window.history.go(-2)
This method is pure javascipt you can try to use $window.history.go(-2) in angularjs
Good works!

Fixed it with ng-switch and ng-include
In the controller, when data is not loaded I added:
$scope.page_not_found = true;
And to the template I added:
<div ng-switch on="page_not_found">
<div ng-if="page_not_found" ng-include="'views/page_not_found.html'"></div>
</div>
Everything happens in one .html template. I hide the main content and import the 404 page with ng-include, this solution seems to be faster as well.

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.