Angular JS - Как обрабатывать дублированный HTML-код, например, заголовки/нижние колонтитулы?

Я просто прочитал введение в Angular JS, но я ничего не видел о способе кодирования кода HTML и кода нижнего колонтитула только один раз и включите его во все ваши страницы.

Есть ли официальный/рекомендуемый способ сделать это?

Ответ 1

Официальный способ сделать это - использовать ngInclude, которая "fetches, compiles and includes an external HTML fragment".

<html ng-app>

<head>
  <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>

<body>
  <div ng-include src="'header.url'"></div>
  ...
  <div ng-include src="'footer.url'"></div>
</body>

</html>

Ответ 2

Если вы создаете одностраничное веб-приложение (скажем, с заклассифицируемыми видами/страницами с помощью $routeProvider), вы можете поместить свой верхний и нижний колонтитулы непосредственно в index.html(или использовать ng-include), а затем использовать ng-view для переключения между видами/страницами:

<html ng-app>
<head>
   <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
   ... header here, or use ng-include ...
   <div ng-view></div>
   ... footer here, or use ng-include ...
</body>
</html>

Ответ 3

Я просто нашел другой способ включить один и тот же фрагмент кода в виде мультипликаций:
= > создавать и использовать собственные Angular 'директивы

1) определяют директиву:

angular.module('myApp')
  .directive('appfooter', function() {
    return {
      templateUrl: 'widgets/footer.html'
    };
  });

2) создайте свой шаблон под названием "widgets/footer.html".
3) используйте новую директиву:

<div appfooter></div>

Используемые ссылки:

надеюсь, что это поможет

Ответ 4

Я предлагаю вам переместить свой тег в конец страницы, чтобы увеличить время загрузки приложения, так как загрузка html не блокируется angular

</head>
<body>
   <div ng-include src="header.url"></div>
   ...
   <div ng-include src="footer.url"></div>

   <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

</body>