I'm using angularjs , and need to redirect to another page inside my controller. How do I do this?
Here is the code for my controller:
meuController.controller('Controller', function ($scope) {
$scope.save = function(){
$scope.tasks.push({
'name': $scope.title
});
//redirecionar aqui. Como ???
};
});
Before you begin, all of the code below is working: link
To have page redirection control you need to follow a few steps sooner.
Refer to the ngRoute module in your html:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"</script><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.min.js"></script>
</head>
It is only possible to control page routing with a modularized application, create your module referencing angular-route as follows:
var app = angular.module("app", ["ngRoute"]);
And in the <html> tag add:
<html ng-app='app'>
The variable app is global and you can call services , factories , and configuration methods.
Let's add factory of tasks just to ensure controllers are using the same tasks list. Therefore, the two controllers, one for the view of Detalhes and another for Listagem :
/*1*/ app.factory("TaskFactory",function(){
/*2*/ var tasklist = [
/*3*/ {name:"terminar meu app",id:0},
/*4*/ {name:"comprar presente para minha irmã",id:1}
/*5*/ ];
/*6*/ return{
/*7*/ get : function(){
/*8*/ return tasklist;
/*9*/ }
/*10*/ };
/*11*/ });
/*12*/ app.controller('TaskListCtrl', function ($scope,TaskFactory) {
/*13*/ (function(){$scope.tasks=TaskFactory.get();})();
/*14*/ });
/*15*/ app.controller('TaskDetailCtrl', function ($scope,TaskFactory,$routeParams) {
/*16*/ (function(){$scope.task=TaskFactory.get()[$routeParams.taskId];})();
/*17*/ });
Line Details:
Line 1 - Creating factory
Line 3 - Let's use id of the task to call it view of listing for details
Line 6 - Returning a method to call the task list from factory
Line 12 - Creating the controller TaksListCtrl that is receiving by argument the $scope and TaskFactory which is the factory. It must be the same name called in the argument and registered in app.factory()
Line 13 - Populating $scope.tasks with the list of tasks that returns TaskFactory.Get();
Line 15 - Creating controller TaskDetailCtrl which will be responsible for displaying the selected task in the other view . The difference is that I am now getting by argument the $routeParams of the module ngRoute which is responsible for keeping the data that you pass in URL
Line 16 - Again I'm taking tasks from TaskFactory but this time I'm filtering for those that contains the id = $routeParams.taskId (we'll see why this one) so it will only bring one task.
You could do this too if you prefer:
//esta forma
var tasks = TaskFactory.get();
var id = $routeParams.taskId;
$scope.task = tasks[id];
//é a maneira simplificada desta
$scope.task=TaskFactory.get()[$routeParams.taskId];
Space is required in the html to allow AngularJS to manipulate your DOM
<body>
<div >
<ng-view></ng-view>
</div>
</body>
Only use the app.config() directive in some ng-view tag and you're done, you do not need to reference controllers or anything, this will be registered with <div> as follows:
/*1 */ app.config(function($routeProvider) {
/*2 */ $routeProvider.when('/',{
/*3 */ template: 'Lista de Tasks:'+
/*4 */ '<div >'+
/*5 */ '<div ng-repeat="task in tasks">'+
/*6 */ '{{task.id}} - {{task.name}}'+
/*7 */ '<div><a ng-href="#/{{task.id}}">detalhes</a>'+
/*8 */ '</div></div>'+
/*9 */ '</div>',
/*10*/ controller: "TaskListCtrl"
/*11*/ }).
/*12*/ when('/:taskId',{
/*13*/ template: 'Detalhes da Task {{task.id}}:'+
/*14*/ '<h4>Nome: {{task.name}}</h4>'+
/*15*/ '</div>'+'<a ng-href="#/"> Voltar</a>',
/*16*/ controller: "TaskDetailCtrl"
/*17*/ }
/*18*/ ).otherwise({redirect:'/'});
/*19*/ });
What the above code does is:
Line 1 - invokes method app.config() of module passing config that receives function
Line 2 - In $routeProvader you have the methods $routeProvader and when() , each receives an object with the routing properties, for example:
when("/url que vc deseja",{
template: "aqui vai o html que será renderizado dentro de ng-view"
controller: "aqui o nome do controller correspondente àquela url"
});
otherwise({redirect:"/"}) //quer dizer que se nao for nenhuma das url registradas,
// redirecionara para a principal
In the first otherwise() , I'm going to pass that if it does not have parameters, it will call that template using the "TaskListCtrl". If the template is too large, it is recommended to save it to another file and call it when() instead of just {templateUrl:'exemplo.html'}
On line 7 I'm simply creating a link to template , angle will replace #/{{task.id}} with task id.
IMPORTANT: In line 12, taskId is receiving when , sign \:taskId indicates that it is a parameter, this is necessary to say to : that is called in $routeParams , that it will have the controller property, see:
Inaddition,youarepassingtaskIdandtyingtocontrollertemplate
Ready,thesestepsarerequiredtodoasimpleroutingcontrolusingAngularJSsummarizing:
TaskDetailCtrl['ngRoute']tothecontrollerthatusesit.<htmlng-app='nomeDoModulo'>$routeParamstologroutes(including<divng-view></div>onlyworksiftheroutedrouteisregisteredhere.app.config(function($routeProvider){...})methodforeachrouteinyourapplicationbypassingthecorrectparameters$location$routeProvider.when()asneeded.Apprunninghere: link
In this example I used the native router of the angle, but there is another much better that is the Ui-Router
It's worth checking out this link: How to use Angular UI Router? and what are the advantages?
To do this you need to modify its function to get the $location parameter.
After that use this parameter to do the redirect
Example:
meuController.controller('Controller', function ($scope,$routeParams,$location) {
$scope.save = function(){
$scope.tasks.push({
'name': $scope.title
});
$location.path("/algumCaminho");
};
});
If you have any further questions, you can look in the official location documentation for controller .