Before getting into the concept let’s re-imagine how a web application works.

Server side rendering concept

With server programming languages (SSR/server side rendering) such as php, java, c# … the mechanism works as follows:

• The user visits the link (URL) on the browser, will send a request (request) with the GET method to the server
• The server receives the signal and returns the corresponding entire web page content based on the path and the path parameters (the path and parameters used to define the request) as full text including HTML, CSS, JAVASCRIPT
• The client receives the returned data, the browser relies on the text content including HTML, CSS, JS and renders it to the interface and displays it for the user to interact with.
• After the user interacts with the displayed interface, if the user continues to interact with the website to send information to the server (for example registration, login, form submission), the browser continues to send the message. information to the server through a method (GET or POST), usually, with SSR programming languages, after sending the request will reload the page or switch to a new page. (learn more FORM in HTML to understand better).

Client side rendering concept

With client programming languages (CSR/client side rendering) such as angularjs,angular,reactjs,vuejs … commonly known with the concept of single page application (SPA) the mechanism of action is as follows:

• With the first hit, the request is still sent to the server, the server returns the HTML, and in the HTML there will be a javascript framework integrated, then at the first run the whole application is initialized (the application is written entirely in javascript). and run client side)
• After the application is run, at the next communication with the server, the user interacts with the interface and sends a request to the server through the AJAX (Asynchronous JavaScript and XML) mechanism. With this mechanism, the client communicates with the server, sending and receiving all data through javascript, which means that the content of the HTML partial interface can be updated through javascript, without reloading the entire page.

Compare the advantages and disadvantages of the two mechanisms

Comparing SSR and CSR	SSR	CSR
Processing logic & interfaces	Server	Client
Initialization time (first page load)	Faster	Slower
Time to interact next times	Slower	Faster
Caching	Weaker	More advantage
SEO	More advantage	Weaker

Routes in AngularJS with client side rendering

Consider an example website with menu feature for user navigation, when we reach HTML or PHP, C#, Java, every time the user, we see every time the user clicks we move the page to another page. new page, or when the user submits the form, either the user reloads the site or also switches to a new page, like for example, my current site uses wordpress’s CMS with server side rendering mechanism, when clicking on the above link navigation, the application will switch to a new page, the server returns an HTML interface, the browser reloads the page and re-renders all HTML, Javascript, css …

As for the route mechanism in angularJS, there is a difference as follows: when the user clicks on the link on the menu with an angularJS application, if the mechanism is written correctly, the browser does not reload the page, the header, footer does not change (Javascript, CSS doesn’t need to be RENDER again), what changes is only the HTML area we need to update (in the case of menu click it will be the entire maincontrent below the menu), this saves the browser from having to reload the entire HTML, JS, CSS but only need to update the new HTML in the area that needs to be updated, helping the application to improve much in performance in the next interactions.

The initialization syntax to be able to use routes in angularJS, through the dependency injection mechanism ( dependency injection technique), the concept will be covered in the following article.

For the first time in the series we see the angularJS application that takes the element as a string as the 2nd parameter, and above that, we have to include the angular-route.min.js file for the application to load, in the articles. before we all passed an empty array (no elements):

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

After we included the ngRoute object in the project, we were able to use the routes in angularJS through the $routeProvider service

Consider the example below, using $routeProvider and configuring the routes for the angularJS application to make a redirect application

Step 1: create file 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>

Step 2: create a templates folder and home.html, about.html, contact.html files with sequential source code:

<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>

The browser display interface, can interact with the menu, the data is updated without reloading the page

If you want more flexible advanced features, you can use routers in combination with custom directives to create a SPA application with a complex structure, high reusability.