The ngRoute module provides routing services
and directives for Angular JS. It enables URL routing in our application and so
it helps in implementing a tabbed UI in our application.
In this post we will see a simple example on
how to implement Tabs with each one having its own view and controller in
our Angular Single Page Application.
The following services are used in route management.
1) $routeParams is used to access the querystring values
present in the URL
2) $route is used to access the details of
the route that is being accessed.
3) $routeProvider is
used to configure routes for the application.
In the code snippet below the templateUrl
specifies the html template that needs to be loaded for a specific route i.e
when a particular tab is selected in our example.
.config(function($routeProvider,
$locationProvider) {
$routeProvider
.when('/home',
{
templateUrl:
'home.html',
controller:
'HomeController'
})
.when('/tab1',
{
templateUrl:
'tab1.html',
controller:
'Tab1Controller'
})
.when('/tab2',
{
templateUrl:
'tab2.html',
controller:
'Tab2Controller'
});
ngView is a directive that complements the $route service by including the rendered template of the current route in the main layout .
<div
ng-controller="MainController">
<a
href="home">Home</a>
<a
href="tab1">Tab1</a>
<a
href="tab2">Tab2</a>
<div
ng-view></div>
</div>
One advantage I have noticed by implementing tabs using ngRoute and not using any bootstrap tabs/pills is that the template content in the tabs is downloaded only when you access the tab . Suppose you have many tabs in your page and each tab loads thousands of rows of data for a ui-grid , this might increase the initial page load time if the contents of all the tabs are loaded with the main page . You can verify this from the network tab in the developer tools of your browser .Using ngRoute helped me implement this usecase without any performance issues .
Here is the link to plunker showing the demo .
Refer the example provided in AngularJS Doc for more details on using other services like $routeParams provided by ngRoute .
Great information! Thanks for sharing your knowledge.
ReplyDeleteAngular JS Training
Angular JS Training In Hyderabad
Angular JS Online Training
https://intellimindz.com/angular-js-training-in-chennai/
Deletehttps://intellimindz.com/web-designing-course-in-chennai/
https://intellimindz.com/data-science-course-in-chennai/
https://intellimindz.com/embedded-system-training-in-chennai/
https://intellimindz.com/sas-training-in-chennai/
https://intellimindz.com/clinical-sas-course-in-chennai/
https://intellimindz.com/spoken-english-classes-in-chennai/
https://intellimindz.com/autocad-course-in-chennai/
https://intellimindz.com/building-estimation-and-costing-course-in-chennai/
https://intellimindz.com/test-complete-training-in-chennai/
Thanks for sharing information...
ReplyDeleteangularjs online training in hyderabad
I am reading your post from the beginning, it was so interesting to read & I feel thanks to you for posting such a good blog, keep updates regularly...
ReplyDeleteAngular JS Training in Noida
Hiii....Thank you for sharing great information....Keep going on...
ReplyDeleteAngular JS Training in Hyderabad
Good post and informative. Thank you very much for sharing this good article, it was so good to read and useful to improve my knowledge as updated, keep blogging. This is good information and really helpful for the people who need information about this.
ReplyDeleteoracle training in chennai
oracle training institute in chennai
oracle training in bangalore
oracle training in hyderabad
oracle training
oracle online training
hadoop training in chennai
hadoop training in bangalore
Tabs With Ng-Route - Angularjs >>>>> Download Now
ReplyDelete>>>>> Download Full
Tabs With Ng-Route - Angularjs >>>>> Download LINK
>>>>> Download Now
Tabs With Ng-Route - Angularjs >>>>> Download Full
>>>>> Download LINK nY
We appreciate you sharing your ideas and expertise on this subject. This is incredibly useful and educational because it gave me more context from which to develop thoughts and solutions for my strategy. More updates from you would be great. Of course, we would like to give ours through AngularJS Training in Chennai.
ReplyDelete