I use AngularJS to make websites on one page, it's much easier and simpler to use than ajax and other paraphernalia see this one
Step by step of a single-page site
Before you begin, all of the code below is working: link
To have page redirection control you need to follow a few steps sooner.
Referencing the AngularJS routing libraries
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>
Modularizing Your App
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];
Configure routes in% with%
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
Summary
Ready,thesestepsarerequiredtodoasimpleroutingcontrolusingAngularJSsummarizing:
Referencingangular.jsandangular-route.jsCreateamodulefortheapplicationbyreferencingTaskDetailCtrlAdd%with%Createthecontrollersandfactories/serivcesAddtheargument['ngRoute']tothecontrollerthatusesit.Callng-viewinhtmllikethis:<htmlng-app='nomeDoModulo'>Invoking$routeParamstologroutes(including<divng-view></div>onlyworksiftheroutedrouteisregisteredhere.Calltheapp.config(function($routeProvider){...})methodforeachrouteinyourapplicationbypassingthecorrectparametersDistributetags$locationUse$routeProvider.when()asneeded.Apprunninghere: link
