I have an angular application where I use the routeprovider which points to different templates. A list template and a map template. These templates have controllers associated to them.
The problem is when i change the route, then the current controller instance is destroyed, and a new controller instance for the current template is re-initated. This is a problem because the map template initiates an openlayers map which is quite browser heavy.
Routeprovider:
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/list', {
reloadOnSearch: false,
templateUrl: '/listTpl.html'
}).
when('/map/', {
reloadOnSearch: false,
templateUrl: '/mapTpl.html'
})
.otherwise({
redirectTo: '/list'
});
});
}]);
MapTpl.html
script type="text/ng-template" id="/mapTpl.html">
<div ng-controller="mapController" class="map">
html stuff
</div>
So are there any way to persist these controllers, so the routeprovider just switches between those instances?
Thank you!
Related
I'm writing a simple product information management app using angular js. To keep my app as modular as possible i've split it into multiple modules with one module "pim" as startpoint. For each module I want to have a different route, so that it is easy to plug in a new module or remove it without having to maintain a huge route in the pim module config.
Currently I have two routes (the first route):
(function(){
angular
.module("pim")
.config(router)
function router($routeProvider){
$routeProvider
.when("/",{
templateUrl: "view/info.html",
controller: "pimController"
})
.when("/info",{
templateUrl: "view/info.html",
controller: "pimController"
})
.when("/alcohol",{
templateUrl: "view/alcohol.list.html",
controller: "alcoholController"
});
}
})();
The second route
(function(){
angular
.module("alcohol")
.config(router)
function router($routeProvider){
$routeProvider
.when("/alcohol/list",{
templateUrl: "view/alcohol.list.html",
controller: "alcoholController"
})
.when("/alcohol/info",{
templateUrl: "view/alcohol.info.html",
controller: "alcoholController"
});
}
})();
As you can see /alcohol has a templateUrl and a controller, the same as /alcohol/list, but i want to know if there is a simple (standard) way to change to another URL for example /alcohol/list, so that I do not have to repeat the templateUrl and controller and keep this information in the alcohol module, where it belongs.
For example
.when("/alcohol",{
routeTo: "/alcohol/list"
})
Thank you for your help
SOLVED
The option to redirect exists, did not look in the $routeProvider documentation well enough:
.when("/alcohol",{
redirectTo:"/alcohol/list"
});
The code above works
You can use $routeProvider's redirectTo route map.
.when("/alcohol", {
redirectTo: "/alcohol/list"
});
Read more: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
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.
I want to access an Angular controller from outside of the controller component.
This is answered well in this question: AngularJS. How to call controller function from outside of controller component
However, what if I am using ngRoute with code like this:
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'pages/second.html',
controller: 'secondController'
})
});
So the index page only has this tag: <div ng-view></div>.
Is there a way I can access the controller that is currently in the ng-view?
(I tried to locate mainController on the index page, but for:
var scope = angular.element(document.getElementById("mainController")).scope();
scope is undefined.)
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.
Every time I change the path through a link like the following
<li>Home</li>
The controller for the view in the router definition gets run again.
config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
// $locationProvider.hashPrefix('!');
$routeProvider.when('/home', {
templateUrl: 'partials/home.html',
controller: 'mainCtrl'
});
$routeProvider.when('/test', {
templateUrl: 'partials/test.html',
controller: 'testCtrl'
});
$routeProvider.otherwise({
redirectTo: '/home'
});
}
]);
I don't think that this is default behavior (I found no mention of it in the documentation), however I can't see what the problem is.
P.S.
I don't have an ng-controller assigned to any DOM element in my templates since I've seen someone else with a similar issue where this was the problem.
It is a default behavior.
Basically controller is function used to argument Angular Scope. So it need to be called each time the page associated with the controller is opened. Each time your page is navigated angular will create new scope.