Best IT Recipes

Simple ng-include not working

The first time I play with AngularJS, and I'm trying to use ng-include for my headers and footers.

Here is my tree:

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>

When I go to the home.html homepage, my header, navigator and footer are not displayed.

+65
javascript html angularjs angularjs-scope
Apr 10 '14 at
source share
10 answers

You do the inclusion of the header. URL instead of a title. HTML It looks like you want to use literals in the src attribute, so you should enclose them in quotation marks, as mentioned in the comments of @DRiFTy.

+ Change

  <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>

at

  <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>

If this does not work, check your browser console if there are any 404

+144
Apr 10 '14 at 15:03
source share

I had a similar problem with a simple ng-include not render:

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

I wrapped the file path in single quotes, and now it displays:

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

+96
Apr 14 '15 at 9:08
source share

I had a similar problem that brought me here.

ng-include did not populate the contents of my partial, but there were no errors in the console, nor 404.

then I realized what I did.

correct me: make sure you have ng-app outside of ng-include ! so obvious. price of angular noob.

+18
Mar 14 '15 at
source share

I also ran into this problem. And this is what worked for me.

So, instead of writing: <div ng-include="'html/form.htm'"></div>

You want to add ng-app="" . Therefore, it should look like this: <div ng-app="" ng-include="'html/form.htm'"></div>

+2
Nov 12 '15 at 16:52
source share

I struggled with the same problem and did almost everything that was recommended in different piles, but it did not work for me. On the console, I received an error message:

"Cross-start requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource."

Later I realized that I had to use a local web server (MAMP, WAMP, etc.) for it to work.

Observe the error message above. Most likely you are not using a local web server to run your website.

+2
Jun 23 '16 at 13:38 on
source share

I just figured it out!

For me, I used the CDN to import my angular.min.js file, which apparently didn't work. I switched to:

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

and included ng-app="" in my body tag:

 <body ng-app=""> <div ng-include="'testfile.html'"></div>

and now it works great. Hurrah!

+2
Jan 06 '17 at 12:50
source share

Yes, without '' , ng will try to evaluate the contents inside ng-include("")

This rating is another reason you don’t put {{}} inside these directives.

+1
Mar 20 '16 at 23:23
source share

ng-include does not work in both Chrome and Explorer, but works in Firefox, so this could be a compatibility issue. To be sure, try generating a report in Firefox or Edge or another browser.

+1
Jan 18 '18 at 3:45
source share

I also had a similar problem: A stupid error caused IT, I had below the text Zone EG:

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

It was not closed properly. Corrected below:

 <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>

The thought of sending this can help anyone I dig a watch to decide ....

0
Mar 29 '18 at 7:06
source share

The ng-include directive should work fine if you are viewing a file through some server (local or online) and DO NOT view it directly in the file system, for example (file: ///yourpath/index.html).

This w3schools example should work fine.

0
Jun 18 '19 at 13:41
source share


More articles:


All Articles