We Keep Coding

ng-view - how to disable re-init of pages

I'm writing an angularjs 1.5.0-rc0 application with angular-route.
Each page in the view is related to another, which means in one tab I start a process, and in another tab I go to view the statistics of the process.
the problem that I'm having is that once I switch tabs, the controller is re-initializing the data and everything is reset.
my ng-view is configured with the following code:
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'templates/index.html',
controller: 'IndexController',
controllerAs: 'index'
})
.when('/update-flows-rarities',{
templateUrl: 'templates/update-flows-rarities.html',
controller: 'UpdateFlowsRaritiesController',
controllerAs: 'updateFlowsRarities'
})
.when('/run-flow',{
templateUrl: 'templates/run-flow.html',
controller: 'RunFlowController',
controllerAs: 'runFlow'
})
.when('/system-stats',{
templateUrl: 'templates/system-stats.html',
controller: 'SystemStatsController',
controllerAs:'systemStats'
})
.otherwise({redirectTo: '/'});
});
I don't have any other relevant code to paste since it's a generic question, any information regarding the issue would be greatly appreciated.

In AngularJS, services are instantiated as singleton, So you can store data in them and access that data from your controllers.

Angular UI Router controllers instantiated multiple times - Direct route

I have a parent / child route set up, and everything works great when I change the state in code using state.go(). The problem arises when I try to go directly to the child route using only a URL. When I do this, the controllers get initialized multiple times.
Here is my app.js
$stateProvider
.state('home', {
url: "/",
templateUrl: "Views/home.html",
controller: 'HomeController',
controllerAs: 'vm'
})
.state('ticketsMaster', {
abstract: true,
templateUrl: "Views/tickets-master.html",
url: "^/performances?featureCode&theatreId",
controller: 'TicketsMasterController',
controllerAs: 'vm'
})
.state('ticketsMaster.performances', {
url: "^/performances?featureCode&theatreId",
templateUrl: "Views/performances.html",
controller: 'PerformancesController',
controllerAs: 'vm'
})
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
home.html is my master page where I have my ui-view
I also have another ui-view on my tickets-master.html where this loads my child views (performances).
When going directly to /performances?featureCode=1111&theatreId=1 it loads my TicketsMasterController, and Performances controller 2 or 3 times.
Any help would be appreciated.

I found the answer here:
https://github.com/angular-ui/ui-router/issues/372
add this line to app.config:
$locationProvider.html5Mode(true).hashPrefix('!')
and include this line in the head of index.html:
<base href="/">

Need to pass $scope with variables to another page in angular?

I have this routes:
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/next', {
templateUrl: 'views/next.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.otherwise({
redirectTo: '/'
});
When I'm in main page. I clicking to next button and see 'views/next.html'. But I'm not have my previously $scope. How I can get this scope?

New route renders new template and also bind new scope to template. So you can't really just use the same scope for both routes. However, there are at least two workarounds.
1). $rootScope. $rootScope is available in all views so you can store some data in it and be able to access it in any template.
2). Service. Use shared service in both controllers. This is probably optimal solution for most cases.

Angular ui router multiple named views for all states

I want to know if there is any way to write multiple named view for all states, the best example is when i want the nav bar and footer to appear in all routes.
$stateProvider
.state('home',{
views: {
'home': {
templateUrl: 'home.html',
controller: controller
},
'nav': {
templateUrl: 'nav.html',
controller:controller
},
'footer': {
templateUrl: 'footer.html',
controller: controller
},
}
})
I dont want to use ng-include, because the nav and the footer is showing before the home state is resolved in this case.

Yes you can, its actually written in the ui-router's guide on how to manage Multiple Named Views.
First, you need to define a specific set of named views in an abstract state, including the view where you would put all your content views such as your home.html and put it in a nameless view (empty string).
As you may have noticed, the demo below shows a root state named app, which is also an abstract state (this means you can't navigate in this state). It has three views, each represents a name that corresponds to the ui-views defined in the index.html.
Within the nameless view, contains the content.html that has a nameless ui-view that will represent all the child states of the app state. By doing this, you can share the nav.html and footer.html to all your states if you add these states under the app state. An example to this would be the app.home and app.items state. To learn more about this, read the link I've added above.
DEMO
Javascript
$urlRouterProvider.otherwise('/home');
$stateProvider.state('app', {
abstract: true,
views: {
nav: {
templateUrl: 'nav.html',
controller: 'NavController as Nav'
},
'': {
templateUrl: 'content.html',
controller: 'ContentController as Content'
},
footer: {
templateUrl: 'footer.html',
controller: 'FooterController as Footer'
}
}
})
.state('app.items', {
url: '/items',
templateUrl: 'items.html',
controller: 'ItemsController as Items'
})
.state('app.home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeController as Home'
});
HTML
index.html
<ui-view name="nav"></ui-view>
<ui-view></ui-view>
<ui-view name="footer"></ui-view>
content.html
<hr>
<ui-view></ui-view>
<hr>

Depending on the rest of your routes you can probably make use of the abstract state to do this:
Angular UI Router - Views in an Inherited State might also help point you in the right direction.

AngularJs ui-sref not working, and state abstracts

For some reason my ui-sref links are not updating and allowing me to change state on my app.
Can someone please tell me what i have done wrong? I have attached a plunkr link for the full code
App.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
'use strict';
// defaults to home
$urlRouterProvider.otherwise('/home');
// states
$stateProvider
.state('app', {
url: '',
abstract: true,
templateUrl: 'app.html',
controller: 'AppController'
})
.state('app.home', {
url: '/home',
templateUrl:'home.html',
controller: 'HomeController'
})
.state('app.settings', {
url: '/settings',
templateUrl: 'settings.html',
controller: 'SettingsController'
});
}]);
http://plnkr.co/edit/m77wrOU0sMLG0fmicTaK
If i navigate to /home, this works and if i go to /settings that also works. but the links are not generated on my pages?
Also, if i want to have multiple layouts, say i would like an admin layout and a normal user layout, maybe the admin layout would hide a few items on the page and show others, would this be best to be done using routing? I have about 6 different parts of the page, currently not setup as views, but i wonder if this is the route i should go down?
Is there anything wrong with having more than 1 abstract state in your stateProvider, or is that stupid?