Menu in AngularJS as an example of routing

This post will be about menu in AngularJS as an example of routing.

I want to introduce you to routing in AngularJS because nawadays we can’t imagine building web application without it ( menu, bookmarks on the website or links to subpages ).

In HTML , it is done in very simple way. We simply put <a> links to subsequent files of subpage1.html, subpage2.html etc.

However, this has its drawbacks.
We need to copy the entire content of the page (menu, footer, etc.) to change only its center (the content we want to switch to).
If, for example, we change something on the menu, we have to manually update it on all subpages.
In addition, we must take care, for example, to highlight the menu items depending on which tab we are on.

 

In various programming languages ​​(eg PHP) we can automate this. In frameworks for building web applications, this is variously solved. Of course, AngularJS also has a way to do this and is called routing.

 

Routing

At the beginning it looks a bit complicated, but in later work is very convenient. Thanks to this, even simple pages can be built using Angular’s capabilities.

In Angular, the additional advantage is that when switching tabs, the whole page will not be overloaded, but only the corresponding part of it.

This is the type of SPA application (Single Page Application).

Integration with Bootstrap in AgendaEditor

In the AgendaEditror application, I would like to start with such tabs:

Home (tab with agenda and fields to enter),
Import (then we implement the functionality that will allow you to paste data into the field into the agenda),
About (information about the application, contact, etc.).

AngularJS routing and application structure

From version 1.2 in Angola, routing is separated into a separate ngRoute module in the angular-routing.js file, which can be found on the project website.
We must attach it to our application, but remember to keep the order of addition, which was already discussed in the entry to which I link.
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.min.js”></script>
Without this after configuration we would receive an error:
Error: $injector:modulerr
Module Error
Of course you need to include added modul in your application
var app = angular.module(‘agendaEditor’, [‘ngRoute’]);

Another thing that we have to do is add an element (usually <div>) to the ng-view directive in the index.html file. Angular will change the content of subsequent subpages here.

The routing in Angular works in such a way that it substitutes the element with the ng-view directive on the template file (template), based on the address entered in the browser, e.g. http: // nazwaAplikacji / # / home. We need for each subpage:

• template file (html),
• file with controller (js).

Configure $ routeProvider, in which we specify what address will match the template and controller. How to divide our application into files? What should the project structure be like? There are two ways.

Method 1 – grouped js and html.

Just as it was a long time ago in projects: keep JS files together in one folder, and html files in another folder:

• index.html
• css/
  • style.css
• js/
  • app.js
  • HomeController.js
  • ImportController.js
  • AboutController.js
• pages/
  • home.html
  • import.html
  • about.html

Every controller (like HomeController.js) corresponds to one file template (like home.html).

Now we can add controller files to ourindex.html:

In each file we place the controller according to the pattern as before
(here for example. ImportController.js):

And in the templates we put the content to be replaced:

Now the most important part: configuration  of $routeProvider (inapp.js):

Routing part 2

Just on the object of our application we make the config method, which takes a parameter with the function in which the configuration is.
In the configuration for each subpage, we define:

• when – that is what string of characters will be in the application’s address after the hash for example /#/home.
• templateUrl – where is the template file to be inserted into the site in place ng-view.
• controller – what is the name of the controller that is supposed to support a given subpage (it will be dynamically replaced).
  This is an optional field (we do not need a controller on every sub page)

Finally, we can add another (and the rest of the configuration as in the case when), which determines what is to happen (to which subpage to enter) in the case that it was impossible to match any rule mentioned in when.
Whole code and its structure you can view on Github: https://github.com/mkczyk/agenda-editor/tree/routing-grouped-types-angularjs
Preview of the running application in the way of 1:

Method 2 – a separate folder for each subpage

The second way at the beginning is harder to understand (because the $ routeProvider configuration is scattered across many files), but then it’s much easier to work with it. Each subpage has its own folder where the template file and controller are located. The controller has a $ routeProvider configuration.

If in the future we want to add another subpage, it is enough to copy one folder, convert the files (with configuration), add in the index.html menu item and we already have it ready.

• index.html
• app.js
• css/
  • style.css
• home/
  • home.html
  • home.js
• import/
  • import.html
  • import.js
• about/
  • about.html
  • about.js

Let’s start!

Attach files to ours index.html:

In the main configuration file app.js we can only put what does not match any subpage, i.e.
otherwise:

HTML templates will look the same as in the previous method. And all the power of this method lies in the configuration of a given subpage (here import.js):

In the middle of the configuration looks the same as in the previous method. Only here it applies only to a given subpage. Additional note: if the controller gets bigger, we can split the configuration into two files (a file with a controller and a file with the $ routeProvider configuration). Only you have to remember to add two files in index.html. You can see the whole code of this method along with the structure on Github: https://github.com/mkczyk/agenda-editor/tree/routing-grouped-subpages-angularjs
Preview of the working application method 2:

https://plnkr.co/edit/M1CRlPCpgn5kJToYQvTh?p=info

 

Hope you learned something new

If you learned something new from this tutorial or if you have any question let me know in comments section.