CODEWITHSUNDEEP
angularjs
Roy Tsabari
Roy Tsabari

Reputation: 2040

Split Angular template into multiple small templates

In my Angular app, I'm trying to understand what would be the right way to split my page into components.

The page before the change is similar to:

<div id='settings'>

  <p class='controlGroup' ng-controller="FirstCtrl">
    <label class='control-label'>First Control</label>

    <div class="control">
        <!-- some inputs -->
    </div>
  </p>

  <p class='controlGroup' ng-controller="SecondCtrl">
    <label class='control-label'>Second Control</label>

    <div class="control">
        <!-- some inputs -->
    </div>
  </p>

    </p>


  <button id='saveBtn' class='saveButton' ng-click='saveSettings()'>Save Changes</button>

</div>

Although the control logic is separated to two different controllers, I want to separate theirs template as well, so it would be easy to reuse them or to move them to a different location.

I see many options: ng-include, script tag etc.

What would be the right way to do that?

Upvotes: 17

Views: 16380

Answers (2)

Amir
Amir

Reputation: 2149

Using ng-include you can have different templates and simply inject them into parts of your DOM using it, it's good for times when you want to load different views based on different situations like clicking a nav button or a variable or so, please note that ng-include also compiles the template so you can use controllers and other angular features and directives in the template, here is an example from angularjs docs:

here is your main html:

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <select ng-model="template" ng-options="t.name for t in templates">
       <option value="">(blank)</option>
      </select>
      url of the template: <tt>{{template.url}}</tt>
      <hr/>
      <div ng-include src="template.url"></div>
    </div>
  </body>
</html>

and here is the js:

function Ctrl($scope) {
  $scope.templates =
    [ { name: 'template1.html', url: 'template1.html'}
    , { name: 'template2.html', url: 'template2.html'} ];
  $scope.template = $scope.templates[0];
}

Upvotes: 13

user2264760
user2264760

Reputation:

Directives are the natural choice for creating reusable components in angular: http://docs.angularjs.org/guide/directive

Upvotes: 0

Related Questions