Angular Js: ngRoute

The module ngRoute allows you to define navigation in your application without the need to refresh the entire page. Another great feature is the possibility to define a layout page (or master page) to your application and define a section in the layout where you can inject partial html of each functionality of your application.

To use this module, you need to add a reference to the file angular-route that can be found here. In addition, you need to add the module ngRoute in the array of dependencies in the module definition.

The ngRoute contains the $routeProvider service. It is used to define the routes of the application. Basically, you need to call the when method and provide three values: The path of the route, the url to the template (partial html to be injected) and the controller (you can define the controller here and stop using the ng-controller directive).

Note that in the code above there is a call to the otherwise method. This method can be used to define a default route to your application.

In the layout html, the directive ng-view is used to define where the partial html will be injected.

Note that the use of /#!/route in the anchor tags, this is the default hash prefix in Angular 1.6. You can remove this enabling the html 5 mode in your application (I will make a tutorial about this in other post.)

You can navigate between the pages and the browser will not make a refresh of the page:

/#!/main
/!#/contact
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.