AngularJS ng-include: Dołączanie plików HTML z przykładem

Przez: Jamesa Hartmana Jamesa Hartmana
Hours Zaktualizowano

⚡ Inteligentne podsumowanie

ng-include w AngularJS pobiera, kompiluje i wstrzykuje zewnętrzny fragment HTML do strony głównej, dzięki czemu współdzielone znaczniki, takie jak tabela, nagłówek lub stopka, znajdują się w jednym, wielokrotnego użytku, częściowym pliku.

  • 🔘 Rola dyrektywna: ng-include pobiera fragment zewnętrzny i wstawia go jako węzły podrzędne elementu hosta.
  • ️ Cytowana ścieżka: Wartość src jest wyrażeniem, więc dosłowna nazwa pliku wymaga użycia pojedynczych cudzysłowów wewnątrz atrybutu.
  • ✅ Przykład rozwiązania: Tabela Table.html jest renderowana przez ng-repeat po wstrzyknięciu jej przez Main.html do div kontrolera.
  • 🧪 Nowy zakres podrzędny: Każdy element include buduje zakres podrzędny, więc powiązania pierwotne wymagają notacji kropkowej.
  • 🛠️. Puste zawiera: Reguły tego samego pochodzenia, $sce i dostęp do pliku wyjaśniają większość pustych wyników.
  • 📊 Uwaga dotycząca wersji: Wsparcie AngularJS zakończyło się w styczniu 2022 r.; współczesny Angular opiera się na komponowaniu komponentów.
Czytaj więcej

Dyrektywa ng-include w AngularJS wstrzykująca zewnętrzny plik HTML do głównego szablonu

Domyślnie HTML nie umożliwia dołączania kodu po stronie klienta z innych plików. Zwykle dobrą praktyką w każdym języku programowania jest dystrybucja funkcjonalności w różnych plikach dla dowolnej aplikacji.

Na przykład, gdybyś miał logikę dla operacji numerycznych, normalnie chciałbyś mieć tę funkcjonalność zdefiniowaną w jednym oddzielnym pliku. Ten oddzielny plik mógłby być następnie ponownie użyty w wielu aplikacjach, po prostu dołączając ten plik.

Zwykle jest to koncepcja Dołącz oświadczenia które są dostępne w języki programowania takich jak .Net i Java.

W tym samouczku przyjrzymy się innym sposobom, w jakie pliki (pliki zawierające dane zewnętrzne) HTML kod) można umieścić w głównym pliku HTML.

Zawiera stronę klienta

Jednym z najczęstszych sposobów umieszczania kodu HTML jest JavaScenariusz. JAVASCRIPT to język programowania, którego można używać do manipulowania zawartością strony HTML w locie. Stąd, JavaSkrypt można również wykorzystać do dołączenia kodu z innych plików.

Poniższe kroki pokazują, jak to osiągnąć.

Krok 1) Zdefiniuj plik o nazwie Sub.html i dodaj do niego następujący kod.

<div>
	This is an included file
</div>

Krok 2) Utwórz plik o nazwie Sample.html, który będzie głównym plikiem aplikacji i dodaj poniższy fragment kodu.

Poniżej znajdują się główne aspekty, na które należy zwrócić uwagę w związku z poniższym kodem,

  1. W znaczniku body znajduje się znacznik div, którego identyfikator to Treść. To miejsce, w którym zostanie wstawiony kod z zewnętrznego pliku „Sub.html”.
  2. Jest odniesienie do skryptu jQuery. jQuery to język skryptowy zbudowany na bazie JavaSkrypt, dzięki któremu manipulacja DOM staje się jeszcze łatwiejsza.
  3. W JavaFunkcja skryptu zawiera instrukcję '$(“#Content”).load(“Sub.html”);', która powoduje wstrzyknięcie kodu z pliku Sub.html do znacznika div, którego identyfikatorem jest Content. 
    <html> 
	  <head> 
	    <script src="jquery.js"></script> 
	    <script> 
	    $(function(){
	      $("#Content").load("Sub.html"); 
	    });
    </script> 
  </head> 

<body> 
     <div id="Content"></div>
  </body> 
</html>

Strona serwera obejmuje

Dostępne są również elementy dołączane po stronie serwera, umożliwiające dołączenie wspólnego fragmentu kodu w całej witrynie. Zwykle robi się to w celu dołączenia treści do poniższych części dokumentu HTML.

  1. Nagłówek
  2. Stopka stony
  3. Menu nawigacji.

Aby serwer WWW mógł rozpoznać plik Server Side Include, nazwy plików muszą mieć specjalne rozszerzenia. Są one zazwyczaj akceptowane przez serwer WWW, takie jak .shtml, .stm, .shtm, .cgi.

Dyrektywa służąca do dołączania treści to „dyrektywa include”. Przykład dyrektywy include przedstawiono poniżej:

<!--#include virtual="navigation.cgi" -->
  • Powyższa dyrektywa pozwala na umieszczenie treści jednego dokumentu w innym.
  • Powyższe polecenie „wirtualne” służy do określenia celu względem katalogu głównego domeny aplikacji.
  • Oprócz parametru wirtualnego istnieje również parametr pliku, którego można użyć. Parametry „plik” są używane, gdy trzeba określić ścieżkę względem katalogu bieżącego pliku.

Uwaga:

Parametr wirtualny służy do określenia pliku (strony HTML, pliku tekstowego, skryptu itp.), który należy uwzględnić. Jeśli proces serwera WWW nie ma dostępu do odczytu pliku lub wykonania skryptu, wykonanie polecenia include zakończy się niepowodzeniem. Słowo „wirtualne” to słowo kluczowe, które należy umieścić w dyrektywie include.

Jak dołączyć plik HTML do AngularJS

angularjs zapewnia funkcję umożliwiającą włączenie funkcjonalności z innych plików AngularJS za pomocą ng-include Dyrektywy.

Podstawowym celem dyrektywy ng-include jest pobranie, skompilowanie i dołączenie zewnętrznego fragmentu HTML do głównej aplikacji AngularJS.

Uwaga dotycząca wersji: AngularJS 1.x zakończył długoterminowe wsparcie 31 grudnia 2021 r., a zespół ds. frameworka stwierdza, że Wsparcie AngularJS oficjalnie zakończone w styczniu 2022 roku, więc nie pojawią się żadne wydania ani poprawki bezpieczeństwa. Każdy krok i blok kodu poniżej pozostaje dokładnie taki, jak opublikowano, zgodnie z historycznym odniesieniem. Modern Angular nie wprowadza bezpośredniego zamiennika: znaczniki składają się z komponentów, a fragment pobrany w czasie wykonywania jest renderowany za pomocą ng-container i ngComponentOutlet.

Przyjrzyjmy się poniższemu kodowi i wyjaśnijmy, jak można to osiągnąć za pomocą AngularJS.

Krok 1) napiszmy poniższy kod w pliku o nazwie Table.html. Jest to plik, który zostanie wstrzyknięty do naszego głównego pliku aplikacji przy użyciu dyrektywy ng-include.

Poniższy fragment kodu zakłada, że ​​istnieje zmienna zakresu o nazwie „tutorial”. Następnie używa ng-powtórz dyrektywa, która przechodzi przez każdy temat w zmiennej „tutorial” i wyświetla wartości dla „Nazwa” i „Descriptpara klucz-wartość jonu.

<table>
    <tr ng-repeat="Topic in tutorial">
        <td>{{ Topic.Name }}</td>
        <td>{{ Topic.Description }}</td>
    </tr>
</table>

POWIĄZANE ARTYKUŁY

Krok 2) Zapiszmy poniższy kod w pliku Main.html. To prosta aplikacja AngularJS, która ma następujące aspekty.

  1. Użyj „dyrektywy ng-include”, aby wstrzyknąć kod do zewnętrznego pliku „Table.html”. W poniższym kodzie stwierdzenie zostało wyróżnione pogrubioną czcionką. Zatem znacznik div ' ' zostanie zastąpiony całym kodem z pliku „Table.html”.
  2. W kontroler, zmienna „tutorial” jest tworzona jako część obiektu $scope. Ta zmienna zawiera listę par klucz-wartość.

W naszym przykładzie są to pary klucz-wartość

  1. Nazwa — oznacza nazwę tematu, takiego jak kontrolery, modele i dyrektywy.
  2. Description – Tutaj znajdziesz opis każdego tematu

Zmienna samouczka jest również dostępna w pliku „Table.html”.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="AngularController">
    <h3> Guru99 Global Event</h3>
		<div ng-include="'Table.html'"></div>
</div>
<script>

    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.controller('AngularController', function($scope) {
        $scope.tutorial =[
            {Name: "Controllers" , Description : "Controllers in action"},
            {Name: "Models" , Description : "Models and binding data"},
            {Name: "Directives" , Description : "Flexibility of Directives"}
        ];

    });
</script>
</body>
</html>

Po wykonaniu powyższego kodu otrzymasz następujący wynik.

Wydajność:

Poniższy zrzut ekranu przedstawia wyrenderowany wynik: karta przeglądarki zawiera tytuł „Rejestracja zdarzeń”, nagłówek znajduje się nad wstrzykniętą tabelą, a trzy wiersze są pobierane z tablicy samouczka w pliku Main.html za pomocą fragmentu. Zrzut ekranu z adnotacjami przedstawia nagłówek „Gur99”, podczas gdy kod zapisuje Guru99.

Wyjście przeglądarki przykładu ng-include AngularJS pokazujące tabelę tematów wstrzykniętą z Table.html

Atrybuty ng-include: src, onload i autoscroll

Oprócz nazwy pliku dyrektywa akceptuje dwa opcjonalne atrybuty i można ją zapisać na trzy sposoby: jako atrybut dowolnego elementu, jako atrybut <ng-include> element lub jako klasę CSS. Poniższe odniesienie jest zgodne z oficjalnym Dokumentacja ngInclude.

Atrybut Wymagane Co to robi
src lub ng-include Tak Wyrażenie, które ocenia szablon URL
załaduj Nie Wyrażenie oceniane za każdym razem, gdy kończy się ładowanie nowego elementu częściowego
automatyczne przewijanie Nie Wywołuje $anchorScroll po załadowaniu zawartości; pominięcie atrybutu wyłącza przewijanie 
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div>
<ng-include src="templateUrl"></ng-include>

Najczęstszy błąd wynika z pierwszego wiersza: src bierze i wyrażenie, a nie zwykły ciąg znaków. Ścieżka dosłowna wymaga zatem własnych cudzysłowów wewnątrz atrybutu, dlatego powyższy przykład brzmi ng-include="'Table.html'". Pismo ng-include="Table.html" sprawia, że ​​AngularJS ocenia Table jako właściwość zakresu, nie znajduje niczego i pozostawia element pusty.

Dlaczego ng-include tworzy nowy zakres podrzędny

Dyrektywa nie wkleja znaczników do otaczającego zakresu. Każde polecenie include tworzy nowy element podrzędny. zakres który dziedziczy prototypowo z zakresu, w którym został zadeklarowany, i ten fakt wyjaśnia większość wiążących niespodzianek.

Odczyt działa zgodnie z oczekiwaniami. Fragment powyżej brzmi tutorial prosto od rodzica, dlatego ng-repeat Znajduje tablicę. Zapis jest miejscem, w którym wszystko się psuje: gdy cząstkowy element przypisuje się do prymitywu, jak w przypadku ng-model="topic", AngularJS tworzy topic w zakresie podrzędnym i nadrzędnym kopia nigdy się nie zmienia.

Dwa nawyki pozwalające uniknąć pułapki:

  • Połącz przez obiekt, jak w ng-model="data.topic", aby rodzic i dziecko dotarli do tego samego punktu odniesienia.
  • Przechowuj stan w kontrolerze lub usłudze i udostępniaj funkcje zamiast gołych prymitywów.

Zawiera również emituje $includeContentRequested, $includeContentLoaded oraz $includeContentError, dzięki czemu rodzic może zareagować poprzez $scope.$on bez sięgania w ogóle do zakresu podrzędnego.

Jak naprawić pusty lub uszkodzony ng-include

Plik „include”, który nic nie generuje, zazwyczaj kończy się niepowodzeniem z jednego z kilku powodów. Omów je w podanej kolejności.

  1. Sprawdź oferty. Dosłowna nazwa pliku wymaga pojedynczych cudzysłowów w wartości atrybutu. Bez nich wyrażenie zwraca wartość undefined i żądanie nie jest wysyłane.
  2. Obsługuj stronę przez HTTP. Dyrektywa generuje błąd XHR dla części, więc otwarcie pliku Main.html bezpośrednio z dysku poprzez adres pliku kończy się niepowodzeniem w większości przeglądarek. Każdy lokalny serwer WWW to kasuje.
  3. Potwierdź, że ścieżka jest rozwiązana. Obserwuj panel sieciowy pod kątem żądania. Błąd 404 oznacza, że ​​ścieżka jest względna do strony, na której znajduje się element dołączony, a nie do części, która się do niego odwołuje.
  4. Przestrzegaj zasady wspólnego pochodzenia. Domyślnie szablon URL musi być zgodny z domeną i protokołem dokumentu aplikacji, ponieważ AngularJS przekazuje go przez $sce.getTrustedResourceUrlSzablon z innego źródła wymaga wpisu w zaufanym zasobie URL list lub jawnego opakowania trustAsResourceUrl, a serwer zdalny nadal musi wysyłać nagłówki CORS.
  5. Nasłuchuj awarii. $includeContentError jest wyzwalany za każdym razem, gdy status odpowiedzi wykracza poza zakres od 200 do 299, zmieniając pusty obszar w komunikat wart zarejestrowania.

Jeszcze jedną przyczynę łatwo przeoczyć. AngularJS przechowuje każdy pobrany fragment w $templateCache, więc edytowany plik może nadal wyświetlać nieaktualne znaczniki, dopóki wpis w pamięci podręcznej nie zostanie usunięty lub strona nie zostanie ponownie załadowana ze źródła. Gdy fragment potrzebuje własnego zachowania, a nie tylko znaczników, dyrektywa niestandardowa z własnym szablonem i izolowanym zakresem jest lepszym narzędziem.

FAQ

ng-include wstrzykuje fragment, który sam nazwiesz, w dowolne miejsce na stronie. ng-view renderuje dowolny szablon Router mapy do bieżącego URL, a w układzie należy uwzględnić tylko jeden widok ng.

Nie. Częściowy plik zawiera tylko fragment. Zawińping w znacznikach html, head lub body pozostawia zbędne elementy, ponieważ znaczniki są wstawiane jako węzły podrzędne elementu hosta, a nie są analizowane jako dokument.

Nie. Fragment jest kompilowany i wstawiany jako węzły DOM, więc elementy skryptu inline nigdy się nie wykonują. Załaduj współdzielone skrypty ze strony hosta lub przenieś zachowanie do kontrolera lub dyrektywy.

Tak. Po załadowaniu ngAnimate dyrektywa uruchamia animację enter dla fragmentu przychodzącego i animację leave dla fragmentu wychodzącego. Obie są uruchamiane jednocześnie za każdym razem, gdy zmienia się wyrażenie źródłowe.

Tak. Ponieważ wartość jest wyrażeniem, wskazanie jej na właściwość zakresu powoduje zamianę fragmentu za każdym razem, gdy ta właściwość się zmienia. Zabezpiecz element za pomocą ng-if, więc nic się nie ładuje, dopóki właściwość nie będzie zawierała rzeczywistej ścieżki.

Nie istnieje odpowiednik. Wielokrotnego użytku znaczniki stają się komponentem, a fragment wybrany w czasie wykonywania jest renderowany przez ngComponentOutlet lub ngTemplateOutlet wewnątrz kontenera ng.

Modele językowe odczytują starszy zestaw szablonów i grupują komponenty, kontrolery i powiązania w komponenty kandydujące, a następnie proponują kolejność migracji. Dane wyjściowe należy traktować jako pierwszy szkic, ponieważ dziedziczenie zakresu rzadko kiedy jest precyzyjnie odwzorowane na dane wejściowe komponentu.

Drugi pilot GitHub Tryb agenta konwertuje komponent częściowy na samodzielny komponent z danymi wejściowymi i przepisuje szablon hosta, ale wygenerowane powiązania i testy nadal wymagają przeglądu przez człowieka.

Podsumuj ten post następująco: