Nested view templates in Angular.js?

Question

I have in my html file this part of html code, which repeats itself multiple times ( I have multiple tables in my html file...)

                <table>
                    <thead>
                      <tr>
                          <th data-field="id">Vorname</th>
                          <th data-field="name">Nachname</th>
                          <th data-field="price">Anzahlaktien</th>
                          <th data-field="action">Wert</th>
                          <th data-field="action">Einkaufsdatum</th>
                          <th data-field="action">Ort</th>
                          <th data-field="action">Aktion</th>
                      </tr>
                    </thead>

                    <tbody> // different data

Is it possible to set this as a "partial view" in angular.js? (like in meteor.js) so I can include it where its needed wit {{myView}}...

michelem · Accepted Answer · 2015-07-23 14:23:26Z

1

You can use ng-includeto include your html partial file. BTW there are many ways to do that and using a directive with its own templateUrl is (I think) the best approach.

ngInclude doc

<div ng-include="'partial.html'"></div>

directive doc

HTML:

<my-directive></my-directive>

JS:

.directive('myDirective', function() {
  return {
    templateUrl: 'partial.html'
  };
});

edited Jul 23, 2015 at 14:23

answered Jul 23, 2015 at 14:20

michelem

14.6k5 gold badges55 silver badges67 bronze badges

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

3 Comments

Okazari Over a year ago

Since directive bests uses are for giving a behavior to an element i totally disagree about the fact that this is a directive usecase. ng-include is probably the best way to go. @user3037960 You also can also provide a different controller on each include with ng-controller if you need to have a different control on the table.

michelem Over a year ago

I agree @Okazari but i don't know what he/she have to do with the partial html file, so I'd like to give more options if possible.

Okazari Over a year ago

No probs, just giving more informations about best practices.

Community · Accepted Answer · 2017-05-23 11:51:11Z

Can you abstract your application into components instead of views? I believe that Angular is not about views, but about components. Thinking about views aligns better with imperative frameworks but doesn't work well in angular. Define the components as directives, passing objects into your components, manage view state explicitly using simple objects or single variables in your scope. Angular is declarative and data-driven at its heart. That is my opinion.

But, if you strictly need to nest your views, you may find UI-Router interesting. As Craig explains in his article,

UI-Router introduces a state machine design pattern abstraction on top of a traditional router.

What is an interisting approach. In the end this will be easy as that

<!-- Home page view (templates/shows.html)-->
<ul>
    <li ui-sref-active="selected" ng-repeat="show in shows">
        <!-- Calling another view, after declaring it as state route --> 
        <a ui-sref="shows.detail({id: show.id})">{{show.name}}</a>
    </li>
</ul>
<div class="detail" ui-view></div>

The view which will be nested:

<!-- Shows detail view (templates/shows-detail.html) --> 
<h3>{{selectedShow.name}}</h3>
<p>
    {{selectedShow.description}}
</p>

And the configuration to bind all of it:

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/shows');

$stateProvider
    .state('shows', {
        url:'/shows',
        templateUrl: 'templates/shows.html',
        controller: 'ShowsController'
    })
    .state('shows.detail', {
        url: '/detail/:id',
        templateUrl: 'templates/shows-detail.html',
        controller: 'ShowsDetailController'
    });
}]);

Lastly, I think that approach will work. Hope it helps ;-)

References

Collectives™ on Stack Overflow

Nested view templates in Angular.js?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related