How to include template dynamic in AngularJS?

Question

I have 3 different view(DetailView, CardView, Column) template/html pages to show in single-page. The user can switch between these 3 view.

I want to bind single view at a time in page, if user switch it will remove previous view and bind the new view. I have data in Model for bind the view so, I no need to call service to bind data. I want toggle between these three-view without refresh page and loading data.

Problem is, if bind three view it will conflict with div-id and there are lots of html-code for all view in DOM.

Please suggest me how to toggle between these different view without loading & refreshing page??

<body>
  <div ng-include="'detailView.html'" ng-show="detailView"></div>
  <div ng-include="'cardView.html'" ng-show="cardView"></div>
  <div ng-include="'cardView.html'" ng-show="cardView"></div>
</body>

Robert · Accepted Answer · 2016-04-29 09:55:21Z

1

As i know Angular Apps are SPA (Single Page Application) so if you switch pages by routing its default behavior its the one that you are asking for. Its not reloading/refreshing the page. It remove the previous view and bind the new one.

Check this guide : https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating

Also try to use $location service to switch routes. It does not reload the page. $location.path("/your-route").

answered Apr 29, 2016 at 9:55

Robert

1901 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3125999 · Accepted Answer · 2016-04-29 10:03:58Z

Angular has routing module. This way you can define a route (page) with it's own URL, HTML template and controller.

configuration example:

YOUR_MODULE.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);

You can read more about it in angular's documentation: https://docs.angularjs.org/tutorial/step_07

For bigger applications I would suggest you to use UI-ROUTER: https://github.com/angular-ui/ui-router

Anyway, if you're looking for something simple without any routing, you should use NG-IF instead of NG-SHOW. NG-SHOW just hiding the HTML by css (display none) which means there might be conflicts for elements with the same IDs. NG-IF will remove the element from the DOM, so there won't be any conflicts.

Good luck!

Sajal · Accepted Answer · 2016-04-29 10:06:08Z

From what i could understand, when the first time the page loads, you have certain flag up to show that view and corresponding call to a service to bind data to that view.

Next time, the model is updated and a new flag is set, a new view comes into play and a similar service binds data..

Initially set the model all to false and make one true for default.

Toggle through view as:

<body>
  <div ng-include="'detailView.html'" ng-if="detailView"></div>
  <div ng-include="'cardView.html'" ng-if="cardView"></div>
</body>

Through this, at a particular time only one div is active and id would not conflict.

In the controller:

If($scope.detailView == true){
    //Call to service for data..
}

Similarly, when the new model is updated , set all previous to false.

Please update your query to more clarify your objective.

Collectives™ on Stack Overflow

How to include template dynamic in AngularJS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related