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 · Answer 1 · 2015-07-23T14:23:26.013

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 '15 at 14:23

answered Jul 23 '15 at 14:20

michelem

14,430
5
50
66

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. – Okazari Jul 23 '15 at 14:22
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. – michelem Jul 23 '15 at 14:24
No probs, just giving more informations about best practices. – Okazari Jul 23 '15 at 14:25

score 0 · Answer 2 · edited May 23 '17 at 11:51

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

Nested view templates in Angular.js?

2 Answers2