Tuesday, May 26, 2015

AngularJS Routing Overview

$routeProvider with Static HTML template content

In the previous post Defining routes using$routeProvider we saw on how to use the $routeProvider to define routes and assign each route to a .html page, this works when the views are complex and has more content, but if the views are simple we need not have separate .html pages to define the views instead we can embed the static HTML content for the view in the $routeProvider configuration itself.

In the following example we shall see on how to use the $routeProvider with static HTML content for the templates.

Defining routes using $routeProvider

In the previous post Routing in AngularJS we saw the benefits of routing in AngularJS, here we shall see an example of implementing Routing using AngularJS.

Main HTML Page with ng-view

The templates defined in the $routeProvider will be replaced in the location of the ng-view directive tag.

Routing in AngularJS

Routing in AngularJS enables embedding different html views to the main page based on the URL requested by the user. Routing in AngularJS behaves similar to Routing in Asp.Net MVC, AngularJS allows us to define the various routes possible and the templates to be loaded for each of the routes. At runtime based on the URL request from the end user the appropriate template is embedded in the main page.

Embedding templates in the main page is enabled used in the ng-view directive, the templates are embedded in the main page in the location where the ng-view directive tag is placed.

<ng-view></ng-view>

In the controller, the $routeProvider object is used define the various routes and the templates to be associated with each of the routes. The object also allows us to define the controller to be associated with each of the view templates. This way each of the embedded templates will be fully functional with each one having its own controller. This comes in handy when we want to develop complex Single Page Applications.