In this article you will learn about the concept of Routing in AngularJS. This is part-13 of the series.
In this 13th day of AngularJS article series, we are going to learn next key players/concept of AngularJS, understanding the concept of Routing in AngularJS. Before moving to key players/concepts of AngularJS, please read my previous articles:
Routing We are going to learn one of the core feature of AngularJS called Routing. It enables you to create different URLs for views in your application. It shows you the views depend on what route is chosen. The route is specified in the URL after the ‘#’ sign. This AngularJS features is mostly used in Single Page Application, because in SPA we render multiple views in one part of your application. It helps you in dividing the application and binds the views to the controllers. For example see the following image: AngularJS routes associate with a view and a controller. It relies on ‘ngRoute’ module (include separate script for this). Routes are configured using the ‘$routeProvider’. The ‘ng-route’ module provides the routing and linking services and directives for angular application. For that we have to download ‘angular-route.min.js’ file or directly use CDN path. Using ngRoute module:
ng-view directives The dynamically loaded views are injected into the shell page as a module loads. The ngView directive is used to display the HTML templates or views in the specified routes. Every time the current route changes, the included view changes with it according to the configuration of the $route service. You can use ng-view directives as follows:
In above output you can see the list of record we defined in ‘departmentController’, you can see how this ‘$routeProvider’ binds the particular view to the controller as per the routes we defined.
Great, we learned Routing in AngularJS with example successfully. Summary I hope that beginners as well as students understood the concept of Routing in AngularJS with example. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon! Thanks for reading. Learn it! Share it!
AngularJS Recipes