I'm trying to create a toggle that switches between two tables on one page. I have both the tables defined in my index.html within a <body ng-app="main"> tag as
<script type="text/ng-template" id="table1.html">
some code
</script>
and
<script type="text/ng-template" id="table2.html">
some code
</script>
My $routeProvider is then defined in my .js as
app.config(['$routeProvider', function ($routeProvider){
$routeProvider.when('/?table=table1', {
controller:'PostsCtrl',
templateUrl: 'table1.html'
})
$routeProvider.when('/?table=table2', {
controller: 'PostsCtrl',
templateUrl: 'table2.html'
})
$routeProvider.otherwise({redirectTo: '/?table=table1'});
}]);
app.config(['$locationProvider', function($locationProvider){
$locationProvider.html5Mode(true).hashPrefix('!');
}]);
ngRoute as been added as a dependency, the controller has been defined and the search parameter was added to the URL by an href surrounding each button in a btn-group.
I am supposed to be able to click either button and it will switch to the table but right now all that happens when I click the buttons are the page refreshing and the search parameter updating accordingly.
Anyone know why $routeProvider doesn't seem to be routing to my .html?
Solved it by including
<div ng-view></div>immediately before the close tag related to theng-apptag.