Antes de entrar no conceito, vamos reimaginar como um aplicativo da web funciona.

Conceito de renderização do lado do servidor

Com linguagens de programação de servidor (SSR/server side rendering) como php, java, c#… o mecanismo funciona da seguinte forma:

• O usuário acessa o link (URL) no navegador, enviará uma solicitação (request) com o método GET para o servidor
• O servidor recebe o sinal e retorna todo o conteúdo da página da web correspondente com base no caminho e nos parâmetros do caminho (o caminho e os parâmetros usados para definir a solicitação) como texto completo, incluindo HTML, CSS, JAVASCRIPT
• O cliente recebe os dados retornados, o navegador se baseia no conteúdo de texto, incluindo HTML, CSS, JS e os renderiza na interface e os exibe para o usuário interagir.
• Após o usuário interagir com a interface exibida, se o usuário continuar a interagir com o site para enviar informações ao servidor (por exemplo, registro, login, envio de formulário), o navegador continuará enviando a mensagem. informações ao servidor por meio de um método ( GET ou POST), normalmente, com linguagens de programação SSR, após o envio do pedido irá recarregar a página ou mudar para uma nova página. (saiba mais FORM em HTML para entender melhor).

Conceito de renderização do lado do cliente

Com linguagens de programação cliente (CSR/client side rendering) como angularjs,angular,reactjs,vuejs… comumente conhecido com o conceito de single page application (SPA) o mecanismo de ação é o seguinte:

• Com o primeiro acesso, a requisição ainda é enviada ao servidor, o servidor retorna o HTML, e no HTML haverá um framework javascript integrado, então na primeira execução toda a aplicação é inicializada (a aplicação é escrita inteiramente em javascript ). e execute o lado do cliente)
• Após a execução da aplicação, na próxima comunicação com o servidor, o usuário interage com a interface e envia uma solicitação ao servidor através do mecanismo AJAX (Asynchronous JavaScript and XML). Com este mecanismo, o cliente se comunica com o servidor, enviando e recebendo dados através de javascript, o que significa que o conteúdo da interface parcial HTML pode ser atualizado através de javascript, sem recarregar a página inteira.

Compare as vantagens e desvantagens dos dois mecanismos

Rotas em AngularJS com renderização do lado do cliente

Considere um exemplo de site com recurso de menu para navegação do usuário, quando chegamos a HTML ou PHP, C#, Java, toda vez que o usuário, vemos toda vez que o usuário clica, movemos a página para outra página. uma nova página, ou quando o usuário envia o formulário, ou o usuário recarrega o site ou também muda para uma nova página, como por exemplo, meu site atual usa o CMS do wordpress com mecanismo de renderização do lado do servidor, ao clicar no link de navegação acima, o aplicativo mudará para uma nova página , o servidor retorna uma interface HTML, o navegador recarrega a página e renderiza novamente todo HTML, Javascript, css…

Quanto ao mecanismo de rota no angularJS, há uma diferença da seguinte forma: quando o usuário clica no link do menu com uma aplicação angularJS, se o mecanismo estiver escrito corretamente, o navegador não recarrega a página, o cabeçalho e o rodapé fazem não muda (Javascript, CSS não precisa ser RENDER novamente), o que muda é apenas a área HTML que precisamos atualizar (no caso do menu clicar será todo o conteúdo principal abaixo do menu), isso salva o navegador de ter que recarregar todo o HTML, JS, CSS mas só precisar atualizar o novo HTML na área que precisa ser atualizada, ajudando a aplicação a melhorar muito no desempenho nas próximas interações.

A sintaxe de inicialização para poder usar rotas no angularJS, através do mecanismo de injeção de dependência (técnica de injeção de dependência ), o conceito será abordado no artigo a seguir.

Pela primeira vez na série vemos a aplicação angularJS que toma o elemento como uma string como 2º parâmetro, e acima disso, temos que incluir o arquivo angular-route.min.js para a aplicação carregar, nos artigos . antes de passarmos um array vazio (sem elementos):

 <script src="https://code.angularjs.org/1.8.2/angular-route.min.js"></script> ... var app = angular.module('myApp', ['ngRoute']);

Após incluirmos o objeto ngRoute no projeto, conseguimos usar as rotas no angularJS através do serviço $routeProvider

Considere o exemplo abaixo, usando $routeProvider e configurando as rotas para o aplicativo angularJS para fazer um aplicativo de redirecionamento

Etapa 1: crie o arquivo index.html

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Examole Routes AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script src="https://code.angularjs.org/1.8.2/angular-route.min.js"></script> <style> .container { max-width: 400px; margin: 0 auto; padding: 15px; align-items: center; } .flex-wrap { display: flex; flex-wrap: wrap; } .list-none { list-style: none; } .menu-list { padding: 0px; margin: 0px; justify-content: flex-end; } .menu-list li { margin: 0px 5px; } .menu-list li a { text-decoration: none; color: #000; } .menu-list li a:hover { color: #46b8e6; } .no-margin { margin: 0; } .main-header { display: flex; background: #f5f5f5; } .logo-wrap { width: 45px; } .main-header nav { width: calc(100% - 46px); } .main-footer { background: #fa726c; } .white { color: #fff; } .blue { color: #46b8e6; } </style> </head> <body ng-app="myApp"> <div ng-controller="headerController" ng-class="[gc.container, gc.mainheader ,gc.flexwrap]"> <div ng-class="gc.logowrap"> <h2 ng-class="[gc.nomargin, gc.blue]">{{logotext}}</h2> </div> <nav> <ul ng-class="[gc.flexwrap , gc.listnone, gc.menulist]"> <li><a ng-href="#!">Home</a></li> <li><a ng-href="#!about">About</a></li> <li><a ng-href="#!contact">Contact</a></li> </ul> </nav> </div> <div ng-controller="mainController" ng-class="[gc.container, gc.mainbox, gc.flexwrap]"> <div ng-view></div> </div> <div ng-controller="footerController" ng-class="[gc.container,gc.flexwrap,gc.mainfooter,gc.white]"> {{copyRight}} </div> </body> <script> var app = angular.module('myApp', ['ngRoute']); app.config(function ($routeProvider) { $routeProvider. when('/', { templateUrl: 'templates/index.html' }) .when('/about', { templateUrl: 'templates/about.html' }) .when('/contact', { templateUrl: 'templates/contact.html' }); }); app.run(function ($rootScope) { // global class variable $rootScope.gc = { container: 'container', mainheader: 'main-header', mainfooter: 'main-footer', flexwrap: 'flex-wrap', listnone: 'list-none', menulist: 'menu-list', nomargin: 'no-margin', white: 'white', logowrap: 'logo-wrap', blue: 'blue' }; }); app.controller('headerController', function ($scope, $location) { $scope.navigation = [ { name: 'Home', url: '/', controller: 'mainController' }, { name: 'About', url: '/about', controller: 'mainController' }, { name: 'Contact', url: '/contact', controller: 'mainController' } ]; $scope.logotext = 'web888.vn'; }); app.controller('mainController', function ($scope, $location) { $scope.homedata = { title: 'Home', description: 'This is home page' }; $scope.aboutdata = { title: 'About', description: 'This is about page' }; $scope.contactdata = { title: 'Contact', description: 'This is contact page' }; }); app.controller('footerController', function ($scope) { $scope.copyRight = '@copyright web888.vn'; }); </script> </html>

Passo 2: crie uma pasta de templates e arquivos home.html, about.html, contact.html com código fonte sequencial:

 <div> <h2>{{homedata.title}}</h2> <p>{{homedata.description}}</p> </div>

 <div> <h2>{{aboutdata.title}}</h2> <p>{{aboutdata.description}}</p> </div>

 <div> <h2>{{contactdata.title}}</h2> <p>{{contactdata.description}}</p> </div>

A interface de exibição do navegador, pode interagir com o menu, os dados são atualizados sem recarregar a página

Se você deseja recursos avançados mais flexíveis, pode usar roteadores em combinação com diretivas personalizadas para criar um aplicativo SPA com uma estrutura complexa e alta capacidade de reutilização.