发表新帖
发表新帖

Split Angular template into multiple small templates

前端 未结
关注
2 1304
甜味超标
甜味超标 2021-02-19 01:53

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:

<
相关标签:
2条回答
  • 盖世英雄少女心
    2021-02-19 02:40

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

    0 讨论(0)
  • 清酒与你
    2021-02-19 02:46

    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];
}
    0 讨论(0)
 看不清?
提交回复
热议问题