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,youarepassingtaskId
andtyingtocontrollertemplate
Summary
Ready,thesestepsarerequiredtodoasimpleroutingcontrolusingAngularJSsummarizing:
Referencingangular.jsandangular-route.jsCreateamodulefortheapplicationbyreferencingTaskDetailCtrl
Add%with%Createthecontrollersandfactories/serivcesAddtheargument['ngRoute']
tothecontrollerthatusesit.Callng-viewinhtmllikethis:<htmlng-app='nomeDoModulo'>
Invoking$routeParams
tologroutes(including<divng-view></div>
onlyworksiftheroutedrouteisregisteredhere.Calltheapp.config(function($routeProvider){...})
methodforeachrouteinyourapplicationbypassingthecorrectparametersDistributetags$location
Use$routeProvider.when()
asneeded.Apprunninghere: link