This blog will help you to implement static routing using AngularJs. In order to understand static routing, you need to have a good knowledge over AngularJs. Before we jump into coding, let's first understand the meaning of static routing. Static routing means having predefined html templates for each route. The static routing is mainly used for developing single page applications(SPA).
You can download whole application from here. And I am using Visual studio 2013.
The application structure looks like as shown below
The solution has "HtmlTempltes" folder, contains html templates and "Script" folder will contain common angular scripts in "AngularJs" sub-folder and routing related coding is in "TemplateRouting.js". The application has a home page(Parent page i.e Home.html) with a menu items on left side and right side page content panel(as shown in below image).
The "Home.html" head tag looks like below
The head tag includes reference for "angular.js", "angular-route.js" and "TemplateRouting.js". In order to achieve routing we need "angular-route.js".
The "Home.html" page body tag looks like below
The "ng-app"("angApp") directive is decorated at div includes left menu and right content panel. Left menu has 4 link items.
Default Template Template 1
Template 2
Template 3
Each left menu link item has a href (like #Default"). Basically we are including "#" in "href", so that the browser won't treat it as URL for redirection. After the value "#" tag in "href" will be considered as key and this key will be matched with the keys mentioned in the "TemlateRouting.js". My "TemlateRouting.js" is as follows
The "ngRoute" module provides routing and deep linking services. For more information about "ngRoute" please click here. "$routeprovider" is a angular provider which provides "$route" angular service. Depending upon the left menu item selection, the browser url will concatenated with href value of the link, as shown below
This key value will be matched with key mentioned in "TemplateRouting.js" file. And when key is matched, the respective html template mentioned in the "TemplateRouting.js" will be rendered in the right side content panel using "ngView". Please click here for more information about "ngView".
By default, the Default Template will be loaded. After that the respective templates will get loaded in the right side part of the page. If you concentrate on browser , then just right side content changes depending upon link selection but the whole page will not be loaded again and again.
Now you may wonder that when html template gets downloaded from server?
Run application and check the "Network" tab in developer tools. The "angular-route.js" internally makes http get call like as shown below.
Please check out "Request URL" which is path of html template and "Request Method" is "GET".
That's it from my side and have a nice day......
