CODEWITHSUNDEEP
javascriptangularjs
Suisse
Suisse

Reputation: 3613

Nested view templates in Angular.js?

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}}...

Upvotes: 0

Views: 48

Answers (2)

Matheus Santos
Matheus Santos

Reputation: 680

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

Upvotes: 0

michelem
michelem

Reputation: 14590

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'
  };
});

Upvotes: 1

Related Questions