Nesting HTML Pages using AngularJS

Question

I'm trying to create a toggle between two tables. I have a button that when you click will change a search parameter in the URL using $location.search. I have each of the tables saved in separate HTML files.

I was wondering if it is possible to use createElement('div') to insert an HTML file into another one (I was thinking through a directive in the angular module). If that isn't possible, then how would I insert an HTML file into another HTML file from the module?

Thanks!

Answer 1

As it were suggested you should give a look at ui-router and define a nested view depending on the url parameter.

If you don't need a complete router you could do this using ng-show in angular.

Here is a plunker as exemple

I added on each table the ng-show attribute :

 ng-show="!switchTable" for table1
 ng-show="switchTable" for table2

And i added this ng-click on the button :

 ng-click="switchTable = !switchTable