Hein Pauwelyn Ответов: 1

Как заменить содержимое файла другим содержимым

Я делаю сайт, но я не буду повторять свой header и footer- элементы на каждом сайте. Я думал сделать это с помощью Angular. Поэтому на данный момент я создал что-то вроде этого ниже:

  • Внутри файла _layout\default.html Я сделал этот код:

    <!DOCTYPE html>
<html>
    <head>
        <title>{{ page.title }}</title>
        <!-- css and js imports -->
    </head>

    <body>
        <header><!-- nav bar etc --></header>

        <main class="container">
            {{ content }}
        </main>

        <footer class="container"><!-- footer elements --></footer>
    </body>

</html>
  • Внутри index.html файл я сделал этот код:

    ---
layout: default
title: Welcome
---

<div class="content">
    <h1>Some content</h1>
</div>


  • Угловой файл с кодом, который необходим для Angular.



В зависимости от URL-адреса я буду показывать другой контент в {{ content }} частица _layout\default.html файл. Какой код мне нужно добавить для запуска этого на локальном хосте? Я хочу высохнуть (Не повторяйте свой код).

Что я уже пробовал:

Я пробовал код выше, и я нашел такие проблемы в интернете.

1 Ответов

Рейтинг:
11

Nathan Minier

Итак, у вас есть много вариантов того, как вы собираетесь справиться с этим.

Конкретная методология, которую вы хотите использовать, известна в целом как шаблоны страниц и, в частности, как частичные представления или фрагменты HTML, в зависимости от используемого стека.

У Angular есть несколько вариантов того, как с этим справиться. Я покажу вам тот, который мне нравится, который опирается на модуль UI-Router. Мне нравится этот вариант из-за объема контроля, который дает навигационная модель UI-Router на стороне разработки.
UI-маршрутизатор[^]

В этом случае мы будем работать в обратном направлении, потому что это поможет показать, где могут возникнуть некоторые подводные камни. Я начну с HTML-фрагмента, который можно загрузить в представление с помощью встроенного контроллера.

partialOne.html

<div ng-controller="partialOneController">
   <p>{{title}}</p>
</div>
<script type="text/javascript">
   myApp.controller('partialOneController',['$scope',function($scope){
      $scope.title = 'This controller is dynamically loaded, but could' +
         'be assigned in the state definition.';
   }]);
</script>


Далее давайте определим наш основной вид (мастер-страница для веб-формы peeps).

index.html
<html ng-app="myApp">
   <head><!--Include Angular, styles, whatever --></head>
   <body ng-controller="primaryViewController">
<!-- This controller holds menus, assigned roles, any application-wide data. I'm not going to bother writing this for this sample, and this controller can be omitted.-->
      <header><span>I persist through navigation!</span></header>
      <div ui-view="MainContent"><p>This text apperars until ui-sref is called!</p>
      </div>
      <footer><span>I persist through navigation!</span></footer>
   </body>
</html>


Ладно, теперь перейдем к нашему приложению. Я знаю, что это слишком сложно, но это показывает, как настроить таргетинг на определенный контейнер представления на странице, где вы можете делать все виды забавных вещей, если хотите. Использование функций для обеспечения возможностей маршрутизации довольно мощно.

myApp.js
var myApp = myApp || angular.module('myApp',['ui.router'])
   .config(['$stateProvider', function($stateProvider){
      $stateProvider
         .state('navigate',{
            url: '/:view',
            views: {
               'MainContent' : {
                  templateUrl: function($stateParams){
                     return $stateParams.view + '.html';
                  }
               }
            });
   }]);


Вот и все. Все, что осталось, - это вызвать состояние, что вы можете сделать по ссылке или программно.

Чтобы использовать ссылку, Не назначайте href, вместо этого используйте атрибут ui-sref. Ссылка будет выглядеть так:
<a ui-sref="{{navigate({ view: 'partialOne' }) }}">Show PartialOne</a>


Все это немного перепроектировано, чтобы обеспечить один фрагмент для одного представления, но поскольку я предполагаю, что это не ваш окончательный вариант использования, я решил дать вам гибкую версию заранее.