web-dev-qa-db-fra.com

Ng-include simple ne fonctionne pas

Je joue avec AngularJS pour la première fois et j'ai du mal à utiliser ng-include pour mes en-têtes et mon 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 la page home.html, mon en-tête, ma navigation et mon pied de page n'apparaissent pas.

javascripthtmlangularjsangularjs-scope
64
Oam Psy

Vous faites une inclusion d'en-tête. url au lieu d'en-tête. html . Il semble que vous souhaitiez utiliser des littéraux dans l'attribut src. Vous devez donc les envelopper entre guillemets, comme indiqué dans les commentaires par @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érifiez la console du navigateur s'il y a des 404

142
Pieter Herroelen

J'ai eu un problème similaire avec un simple ng-include ne rendant pas: 

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

J'ai enveloppé le chemin du fichier entre guillemets simples et il rend maintenant:

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

95
cfranklin

j'ai eu un problème similaire qui m'a atterri ici.

ng-include ne remplissait pas le contenu de ma partialité, mais il n'y avait pas d'erreur de console ni de 404.

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

solution pour moi: assurez-vous que vous avez ng-app en dehors du ng-include! tellement évident. le prix d'être un noob angulaire.

18
GraehamF

Je me débattais avec le même problème et faisais presque tout ce qui était conseillé dans différentes piles mais cela ne fonctionnait pas pour moi. Sur la console, je recevais l'erreur: 

"Les requêtes d'origine croisée ne sont prises en charge que pour les schémas de protocole: http, données, chrome, extension-chrome, https, ressource-extension-chrome."  

Plus tard, j'ai réalisé que je devais utiliser un serveur Web local (MAMP, WAMP, etc.) pour que cela fonctionne.

Veuillez faire attention au message d'erreur ci-dessus. Il est fort probable que vous n'utilisiez pas un serveur Web local pour exécuter votre site Web.

2
Muhammad Ali Mansoor

Je viens de comprendre celui-ci! 

Pour moi, j'utilisais un CDN pour importer mon fichier angular.min.js qui, apparemment, ne fonctionnait pas. 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 bien maintenant. À votre santé!

2
FiringBlanks

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 voulez ajouter ng-app="". Cela devrait donc ressembler à ceci: <div ng-app="" ng-include="'html/form.htm'"></div>

2
Tim Anishere

Oui, sans le '', le groupe d'essais d'évaluer le contenu de la ng-include("")

Cette évaluation est une autre raison pour laquelle vous ne mettez pas {{}} dans ces directives.

1
Achuth I

ng-include ne fonctionne pas aussi bien dans Chrome que dans Explorer, mais fonctionne dans Firefox. Cela pourrait donc poser des problèmes de compatibilité. Pour en être sûr, essayez de générer le rapport dans Firefox, Edge ou un autre navigateur.

1
Himesh V R

J'ai aussi eu un problème similaire: une erreur stupide causait l'informatique, j'avais ci-dessous textAreaEG: 

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

N'était 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é pour le poster peut aider n'importe qui j'ai creusé des heures à résoudre ....

0
Sunil Pandey