Simple ng-include 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:

    AngularJS Test       

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

 

Welcome to the {{ title }} Page

Quand je vais sur la page home.html, mon en-tête, ma navigation et mon pied de page n’apparaissent pas.

Vous faites un include d’en-tête. URL au lieu d’en-tête. html . Il semble que vous vouliez utiliser des littéraux dans l’atsortingbut src, vous devriez donc les placer entre guillemets, comme cela a été mentionné dans les commentaires de @DiscGolfer.

Changement

  

à

  

Si cela ne fonctionne pas, vérifiez la console du navigateur s’il y a des 404

J’ai eu un problème similaire avec un simple ng-include pas de rendu:

J’ai enveloppé le chemin du fichier entre guillemets simples et il affiche maintenant:

J’ai eu un problème similaire qui m’a amené ici.

ng-include ne remplissait pas le contenu de mon partiel, mais il n’y avait pas d’erreur de console, ni de 404.

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

corrige pour moi: assurez-vous d’avoir ng-app dehors du ng-include ! tellement évident. le prix d’être un noob angular.

Je suis également tombé sur ce problème. Et c’est ce qui a fonctionné pour moi.

Donc, au lieu d’écrire ceci:

Vous voulez append ng-app="" . Donc, cela devrait ressembler à ceci:

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é à:

et inclus ng-app="" dans ma balise body:

  

et ça marche très bien maintenant. À votre santé!

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

Oui, sans le '' , ng essaierait d’évaluer le contenu dans le ng-include("")

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

Je me débattais avec le même problème et j’ai fait presque tout ce qui était conseillé dans les différentes stacks mais cela n’a pas fonctionné pour moi. Sur la console, j’obtenais l’erreur:

“Les demandes d’origine croisée ne sont sockets en charge que pour les schémas de protocole: http, data, chrome, chrome-extension, https, chrome-extension-resource.”

Plus tard, j’ai réalisé que je devais 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’utilisez pas un serveur Web local pour exécuter votre site Web.

J’avais trop le même problème: une erreur idiote causait l’informatique, j’avais ci-dessous textArea EG:

  

N’a pas été fermé correctement corrigé ci-dessous:

  

Pensée à poster peut aider quelqu’un que j’ai creusé des heures pour résoudre ….