Angular UI Router controllers instantiated multiple times - Direct route - javascript

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="/">

Related

Angular routing otherwise

I'am writing an homepage using javascript, an express server and angular.
Currently I have following routing:
function config($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/login/login.view.html',
controller: 'loginCtrl',
controllerAs: 'vm'
})
.when('/home', {
templateUrl: '/home/home.view.html',
controller: 'homeCtrl',
controllerAs: 'vm'
})
.otherwise({redirectTo: '/'});
}
Instead of the redirection in .otherwise to login page I would like that the user gets an page like:
Not found
The requested URL <requestedURL> was not found on this server.
How can I get the requested url in the controller of redirected page?
Or what is the common way to implement this?
Kind regards,
Wolfgang

html5mode breaks AngularJS routing

I am having an issue with using html5Mode with ngRoute not quite like issues others have had with the same thing. Here is the most relevant section of my code:
(function () {
var config = function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home/home.view.html',
controller: 'homeCtrl',
controllerAs: 'vm'
})
.when('/about', {
templateUrl: 'common/views/genericText.view.html',
controller: 'aboutCtrl',
controllerAs: 'vm'
})
.when('/location/:locationId', {
templateUrl: 'locationDetail/locationDetail.view.html',
controller: 'locationDetailCtrl',
controllerAs: 'vm'
})
.otherwise({redirectTo: '/'});
/* $locationProvider.html5Mode({
enabled: true,
requireBase: false
}); */
};
angular
.module('loc8r', ['ngRoute', 'ngSanitize'])
.config(['$routeProvider', '$locationProvider', config]);
})();
The issue arises specifically with the route for /location/:locationId. With html5Mode on, an attempt to load a URI like http://127.0.0.1:3000/location/5a27ab691c5e0a989c0634da results in a blank page. Curiously, my logging output from Node tells me that the template and controller are both being accessed. Even more curiously, if I change the route from /location/:locationId to just /:locationId and load a URI like http://127.0.0.1:3000/5a27ab691c5e0a989c0634da, then the page will load. But the only way to get /location/:locationId to work is to leave html5Mode disabled and then go to http://127.0.0.1:3000/#!/location/5a27ab691c5e0a989c0634da. But that's ugly. How can I get html5Mode working in this case?
If necessary, I can push all my most recent changes to GitHub and then provide the full code.
Have you set up base attribute in index.html file?
Check: How to setup AngularJS $locationProvider HTML5 mode for non-root base urls?

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.

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 only loads first declared child state

Whichever child state I place first in my routing setup is the one that loads. Everything else works just fine. Resolve dependencies are inherited as they should, the view is rendered and controller instanciated. But the second child state is totally ignored...
Routing in app.coffee
$stateProvider
.state 'feed',
abstract: true
url: '/'
templateUrl: 'views/feed.html'
controller: 'FeedController'
resolve: (a bunch of them :P)
.state 'feed.timeline',
url: ''
views:
'timeline':
templateUrl: 'views/partials/feed/timeline.html'
controller: 'FeedTimelineController'
.state 'feed.trending',
url: ''
views:
'trending':
templateUrl: 'views/partials/feed/trending.html'
controller: 'FeedTrendingController'
placeholders in index.html:
<div class="container">
<div ui-view></div>
</div>
in 'views/feed.html':
<div ui-view="trending"></div>
<div ui-view="timeline"></div>
I really appreciate any help, tried everything I could think of and feeling exhausted after hours searching wikis, groups, google, stackoverflow... Thanks!
I'm not sure you understand the ui-router correctly. A state basically corresponds to a URL (except when it is abstract). I guess you want to have one state that puts stuff into the two subviews of your state 'feed'.
$stateProvider
.state 'feed',
abstract: true
url: '/'
templateUrl: 'views/feed.html'
controller: 'FeedController'
resolve: (a bunch of them :P)
.state 'feed.index',
url: ''
views:
'timeline#feed':
templateUrl: 'views/partials/feed/timeline.html'
controller: 'FeedTimelineController'
'trending#feed':
templateUrl: 'views/partials/feed/trending.html'
controller: 'FeedTrendingController'
You don't have to choose 'feed.index' as the name but it has to start with 'feed.' so it is a child state.

Categories