How to show particular div using angularjs routing? - angularjs

Question

Header contents=>main menu name is service and its submenu's are abc,def,pqr. This is in index.html
And service.html have 3 separate div's one shows contains of abc,two shows contains of def and three shows contains of pqr.
There is angularjs route call from index.html when I click header menu (i.e.service=>abc or def or pqr) then it should show its particular div other will not be shown.

Answer 1

Use the menu items as parameters passed in the url and then use a an ng-switch or ng-show to show the selected content.
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
redirectTo : '/'
})
...
.when('/menu/:item', {
templateUrl: 'index.html',
controller: 'indexController'
})
in controler, inject $routeParams:
app.controller('indexController', function($scope, $routeParams) {
$scope.menuItem = $routeParams.item;
});
in index:
<div ng-show='menuItem == "abc">abc</div>
<div ng-show='menuItem == "def">def</div>
<div ng-show='menuItem == "pqr">pqr</div>
Added benefit, you do not have to create new routes to create new menus with content in the index.html
downside, gets crowded in index.html

Answer 2

put ng-view tag in index.html
download angular route and inject this dependency into your app.
put routing code like
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
redirectTo : '/user'
})
.when('/register', {
templateUrl: 'client_assets/views/register.html',
controller: 'registerController'
})
.when('/login', {
templateUrl: 'client_assets/views/log_in.html',
controller: 'logInController'
})
})
Now according to the route decide html template and controller you want to add.