Simple ng-include ne fonctionne pas

Im jouant avec AngularJS pour la première fois, et je suis mal à utiliser ng-inclure les de mes en-têtes et pied de page.

Voici mon arbre:

myApp
assets
   - CSS
   - js
        - controllers
        - vendor
             - angular.js
             - route.js
             ......
             ......
             ......
        main.js
pages
   - partials
        - structure
              header.html
              navigation.html
              footer.html
   index.html
   home.html

index.html:

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>AngularJS Test</title>

    <script src="/assets/js/vendor/angular.js"></script>
    <script src="/assets/js/vendor/route.js"></script>
    <script src="/assets/js/vendor/resource.js"></script>
    <script src="/assets/js/main.js"></script>

</head>
    <body>          

        <div ng-include src="partials/structure/header.url"></div>
        <div ng-include src="partials/structure/navigation.url"></div>    

        <div id="view" ng-view></div>   

        <div ng-include src="partials/structure/footer.url"></div>
    </body>
</html>

main.js

var app = angular.module("app", ["ngResource", "ngRoute"]);


app.config(function($routeProvider) {

$routeProvider.when("/login", {
    templateUrl: "login.html",
    controller: "LoginController"
});

$routeProvider.when("/home", {
    templateUrl: "home.html",
    controller: "HomeController"
});

$routeProvider.otherwise({ redirectTo: '/home'});

});

app.controller("HomeController", function($scope) {
    $scope.title = "Home";
});

home.html

<div>
<p>Welcome to the {{ title }} Page</p>
</div>

Quand je vais sur le home.html page, en-tête, système de navigation et le pied de page n'apparaissent pas.

double possible de AngularJS ng-include

InformationsquelleAutor Oam Psy | 2014-04-10

144

Vous êtes en train de faire un include d'en-tête.url au lieu de l'en-tête.html. Il semble que vous souhaitez utiliser littéraux dans l'attribut src, de sorte que vous devez envelopper entre guillemets, comme il a été mentionné dans les commentaires de @DRiFTy.

Changement
```
 <div ng-include src="partials/structure/header.url"></div>
 <div ng-include src="partials/structure/navigation.url"></div>    

 <div id="view" ng-view></div>   

 <div ng-include src="partials/structure/footer.url"></div>
```
à
```
 <div ng-include src="'partials/structure/header.html'"></div>
 <div ng-include src="'partials/structure/navigation.html'"></div>    

 <div id="view" ng-view></div>   

 <div ng-include src="'partials/structure/footer.html'"></div>
```
Si cela ne fonctionne pas, vérifier le navigateur de la console s'il y a des 404 à
- Pour ajouter à cela, vous avez besoin d'envelopper le chemin d'accès entre guillemets simples: src="'partials/structure/header.html'"
- Doh, j'ai oublié de vérifier 404 dans la console. Mon chemin était mauvais.
- C'est tout à fait essentiel de l'information. J'ai vérifié mon code pour les âges avant cela fonctionnait! +1
- Quelqu'un peut-il expliquer pourquoi vous devez passer une chaîne de caractères littérale? Semble comme une grande chasse aux sorcières qui pourrait être évitée, peut-être que je suis absent quelque chose?
- C'est comme ça depuis au moins 1.0 (github.com/angular/angular.js/blob/...) et je pense que les auteurs ont pensé qu'il était plus souple à le définir comme un angulaire de l'expression.
- Il est beaucoup plus souple. Je l'ai utilisé pour intégrer les appels de fonction qui génère l'url appropriée à la volée.
- votre petit commentaire, c'est fondamental !!!!
- Mon problème est que j'ai essayé d'utiliser un chemin relatif lorsqu'il doit être un chemin absolu, il est implique dans cette réponse, mais ne le précise pas.
- Merci pour la 404 point, il m'a sauvé!!
- Si 404(Fichier non trouvé) se produisent, alors nous pouvons utiliser <ng-include src="'views/transaction/test.html'"></ng-include> au lieu de <div ng-include src = "'views/transaction/test.html'"></div>
InformationsquelleAutor Pieter Herroelen
96

J'ai eu un problème similaire avec un simple ng-comprennent pas rendu:

<div ng-include="views/footer.html"></div>

J'ai enveloppé le chemin d'accès du fichier entre guillemets simples et il affiche désormais:

<div ng-include="'views/footer.html'"></div>
- Vous avez sauvé mon temps! Merci
- Fonctionne tout simplement. Gr8!!
- J'ai eu cette chose par hit et du procès. Mais, ne savent toujours pas quelle est l'utilité de "l'intérieur" ? Pourquoi seulement " crée des problèmes
- Fou, mais il fonctionne.
- Pourquoi est-ce arrivé?
- Vous avez besoin d'envelopper les littéraux de chaîne (par exemple, votre chemin d'accès au fichier) avec des guillemets simples, parce que rien dans le devis sera évalué dans le code, donc sans les guillemets simples, l'angle de compilateur chose que vous avez une fonction quelque part avec le nom de votre chemin d'accès au fichier.
InformationsquelleAutor cfranklin
18

j'ai eu un problème similaire qui m'a débarqué ici.

ng-include était pas peupler le contenu de mes partiels, mais il n'y avait pas les erreurs de la console, ni 404.

puis j'ai réalisé ce que j'ai fait.

fixer pour moi: assurez-vous d'avoir ng-app à l'extérieur de la ng-include! tellement évident. le prix d'être une Angulaire de noob.
- PUNAISE, c'est dur d'infos à suivre vers le bas. Je sais que cela semble ridicule, mais donc, beaucoup de articles de laisser cette partie. Même un couple de "Hello World" tutoriels ne l'ai pas mentionné. J'ai pris de trouver cette réponse, puis trouver un travail JSfiddle de savoir j'ai besoin de <div ng-app>. Absurde.
- Cela m'a aidé à sortir. Même pas w3schools le mentionner.
- thanksyou! Cela m'avait éternisé
InformationsquelleAutor GraehamF
2

J'ai aussi rencontré ce problème. Et c'est ce qui a fonctionné pour moi.

Donc au lieu d'écrire ceci:<div ng-include="'html/form.htm'"></div>

Vous souhaitez ajouter ng-app="". Donc, il devrait ressembler à ceci: <div ng-app="" ng-include="'html/form.htm'"></div>
- Pour les réponses ci-dessus, il a été supposé que la ng-app est déjà appliqué et nous utilisons ng-inclure à l'intérieur.
- Mieux ajouter ng-app="myApp" à l'ouverture <html> tag, mais pas de <div>
- ...ou dans la balise body <body ng-app="">
InformationsquelleAutor Tim Anishere
2

J'ai été aux prises avec le même problème et l'ont fait à peu près tout ce qui était conseillé dans les différentes piles, mais il ne fonctionne pas pour moi. Sur Console, je recevais le message d'Erreur:

"Origine de la croix demandes sont prises en charge uniquement pour les protocoles: http, de données, de chrome, chrome-extension, https, chrome-extension-ressource".

Plus tard, j'ai réalisé, j'ai utiliser un serveur web local (MAMP, WAMP, etc.) pour le faire fonctionner.

Veuillez faire attention au message d'erreur ci-dessus. Les Chances sont que vous n'êtes pas à l'aide d'un serveur web local pour exécuter votre site.

InformationsquelleAutor Muhammad Ali Mansoor
2

J'ai juste pensé que ça!

Pour moi, j'ai été en utilisant un CDN pour l'importation de mon angular.min.js fichier qui, apparemment, n'était pas de travail. Je suis passé à:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

et inclus ng-app="" dans ma balise body:
```
<body ng-app="">
<div ng-include="'testfile.html'"></div>
```
et ça fonctionne très bien maintenant. Cheers!
- Non, cela ne fonctionne pas sur IE11 et Chrome. Ne fonctionne que sur FF.
InformationsquelleAutor FiringBlanks
1

Oui, sans le '', ng essayer d'évaluer le contenu à l'intérieur de la ng-include("")

Cette évaluation est une autre raison pourquoi vous ne mettez pas de {{}} à l'intérieur de ces directives.

InformationsquelleAutor Achuth I
1

ng-include ne fonctionne pas dans google chrome, ainsi que dans l'explorateur, mais fonctionne dans Firefox, ce qui pourrait avoir des problèmes de compatibilité. Pour être sûr, essayez de générer le rapport dans Firefox ou un Bord ou un autre navigateur.
- Bienvenue sur Stackoverflow. Il serait mieux si vous checkout Comment Répondre de la page pour les futurs efforts à débordement de Pile. -Merci
- Il est vrai que le navigateur google chrome, connu pour ses overpreventive politiques bloque les scripts d'appel de pages à partir d'un Fichier:// origine c'est pourquoi vous ne pouvez pas vous rendre angulaire partiels dans chrome. néanmoins, cette hypothèse est juste et peut prendre une partie de la multiplicité des causes possibles pour contrecarrer le fonctionnement de ng-view/ng-include.
InformationsquelleAutor Himesh V R

J'ai moi Aussi eu le même problème: Stupide erreur a été la cause , j'ai eu en dessous de textArea
Par exemple:

<textarea cols="3" type="text" id="WarehouseAddress"  class="form-control" > `

N'est pas fermé correctement Corrigé ci-dessous :

<textarea cols="3" type="text" id="WarehouseAddress"  class="form-control" ></textarea> 

<div ng-switch="vm.frmDOA.isGenerateDebitNote">
                <ng-include src="vm.showupload()"></ng-include>
            </div>

Pensé à le poster qui peuvent aider toute une je creusée heures à résoudre ....

InformationsquelleAutor Sunil Pandey

-1

La ng-inclure directive devrait fonctionner normal si vous êtes à la visualisation de vos fichiers via certains serveur (localhost ou en ligne) et PAS de l'affichage de votre fichier directement en vertu du système de fichiers comme (file:///yourpath/index.html).

Cet exemple de w3schools devrait fonctionner correctement.

InformationsquelleAutor zeeawan

Vous devez vous connecter pour publier un commentaire.