Menu
Im playing with AngularJS for the first time, and im struggling to use ng-include for my headers and footer.
Here's 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 on the home.html page, my header, nav and footer are not appearing.
510
The ng-include directive includes HTML from an external file. The included content will be included as childnodes of the specified element. The value of the ng-include attribute can also be an expression, returning a filename. By default, the included file must be located on the same domain as the document.
The primary purpose of the ng-include directive is used to fetch, compile, and include an external HTML file in the main AngularJS application. These are added as child nodes in the main application. The ng-include attribute's value can also be an expression, that returns a filename.
Definition and Usage The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
You're doing an include of header.url instead of header.html. It looks like you want to use literals in the src attribute, so you should wrap them in quotes, as was mentioned in the comments by @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> to
<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 is not working, check the browser console if there are any 404's
67
I had a similar problem with a simple ng-include not rendering:
<div ng-include="views/footer.html"></div>
I wrapped the file path in single quotes and it now renders:
<div ng-include="'views/footer.html'"></div>
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
