We Keep Coding

AngularJS controller doesn't work after first refresh page

I'm using AngularJS for my hybrid Ionic app.
My controller:
.controller('SubmitCtrl', function($scope) {
console.log("this just work for only refreshing the page!);
});
Only for each refreshing the page, console.log works fine, but when I switch to other states, and came back to submit state (without refreshing the page), console.log doesn't work.
Any idea?

it is bcoz Ionic cache your page.
Try this
<ion-view cache-view="false" view-title="My Title!">
...
</ion-view>
or,
$stateProvider.state('myState', {
cache: false,
url : '/myUrl',
templateUrl : 'my-template.html'
})
Source: http://ionicframework.com/docs/api/directive/ionNavView/

Though #Ved has answered this question perfectly, disable ionic view cache is not a graceful resolution. If you just want some parts of a page controller to be executed whenever you enter this page, maybe you should make use of ionic view lifecycle:
.controller('SubmitCtrl', function($scope) {
$scope.$on('$ionicView.beforeEnter', function() {
//code in this block will be executed every time before you enter in
console.log("this just work for only refreshing the page!);
});
});
More information about ionic view lifecycle, please refer http://www.gajotres.net/understanding-ionic-view-lifecycle/ and http://ionicframework.com/docs/api/directive/ionView/. Hope this will help, regards!

Framewok7 how to prevent router.back to remove cached page

I use with framework7 initialize property that called : domCache: true.
the loading page is work fine:
mainView.router.load({ pageName: dataPageName });
but the back page remove the page from the DOM. and this is not fit to the cached dialog .
mainView.router.back({ pageName: dataPageName });
how do i prevent the back to remove my page from DOM ?

Try uniqueHistory and pushState true while initializing myApp object.
uniqueHistory: true,
pushState: true

Link click does not reload controller

I have an Ionic app where I want the controller to reload whenever a user visits a tab. I have the following link here...
<ion-tab icon-off="ion-ios-person-outline" icon-on="ion-ios-person" ui-sref="tab.profile({reload: true})">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
If I visit the tab link once, the controller loads(obviously). If I leave the page and click that same link again the page does not reload. The way I'm detecting this page reload by injecting a console.log into the controller file.
angular.module('coolsite.user')
.controller('ProfileController', profileController)
profileController.$inject = [];
function profileController( ) {
var vm = this;
console.log("activated");
}
How do I reload the controller every time the user clicks on the link?

You should use transitionTo to reload your controller & route.
Markup
<ion-tab icon-off="ion-ios-person-outline" icon-on="ion-ios-person" ng-click="vm.redirect('tab.profile')">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
Controller
vm.redirect = function(stateName){
$state.transitionTo(stateName, {} , {
reload: true,
inherit: false,
notify: true
});
}
Update
Though it was not related to angular-ui-router Its specifically related to ionic-view, they getting cached by default. You need can disable those caching by state just by mentioning cache: false.
Code
.state('tab.profile', {
url: '/profile',
views: {
'tab-profile': {
templateUrl: 'templates/tabs/profile.html',
controller: 'ProfileController as profile',
reload: true
}
},
cache: false
})
There are also two alternative way to achieve this, you can find it in this answer with better explanation which is given by me only

So, I think what you're really looking to do is not use the cache. That means that in your state, you'll want to set cache: false. To be clear, controllers are not "reloaded." The scope is simple removed and re-added when you return to the page, unless you set the cache to false.
I don't think that's necessarily the best approach though. I would use the events in the navigation lifecycle and set up a handler for $ionicView.loaded instead. You can find details about the event for ion-view in the doc under the section: View LifeCycle and Events.

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.

angular ui-router: how do I reload a state when a path parameter changes but not reload when a query parameter changes?

For example, I want this change in navigation to reload the state:
#/detail/1
#/detail/2
But I do not want this navigation to reload the state:
#/detail/1?search=blah
#/detail/1?search=huzzah
According to the ui-router documentation, setting reloadOnSearch: false should accomplish this, but try the plunk below. When reloadOnSearch === false, changing the path parameter doesn't reload the state even though the documentation says it should.
Plunkr: http://run.plnkr.co/ZPy9uabYlkMilwdS/#/param

I've created a plunker, demonstrating that ui-router feature reloadOnSearch is working as documented here:
reloadOnSearch:
Boolean (default true). If false will not retrigger the same state just because a search/query parameter has changed. Useful for when you'd like to modify $location.search() without triggering a reload.
So, what this says, that if we do have state like this
.state('index.detail', {
url: '/detail/:id',
reloadOnSearch : false,
...
})
navigating to the
ui-sref="index.detail({id:1})"
will load this state, while navigating to
ui-sref="index.detail({id:any-other-id})"
will do nothing. But! If we would introduce new (e.g. sibling) state defined like this:
.state('index.other', {
url: '/other/:id',
reloadOnSearch : false,
...
})
navigating to below sequence will always re-trigger state reload, not because the param change, but because the state change
<a href="#/index/detail/1" ...
<a href="#/index/other/1" ... // will relaod
<a href="#/index/detail/2" ... // because the state
<a href="#/index/other/2" ... // is changing
See that all in action here...

This is a bug in UI-Router that was fixed in release 0.2.15:
https://github.com/angular-ui/ui-router/releases
Upgrading to the latest will fix the issue