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.
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
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>
i had a similar problem that landed me here.
ng-include was not populating the contents of my partial, but there were no console errors, nor 404's.
then i realized what i did.
fix for me: make sure you have ng-app outside of the ng-include! so obvious. the price of being an Angular noob.
I also came across this issue. And this is what worked for me.
So instead of writing this:<div ng-include="'html/form.htm'"></div>
You want to add ng-app="". So it should look like this: <div ng-app="" ng-include="'html/form.htm'"></div>
I was struggling with the same issue and have done almost all what was advised in different stacks but it didn't work for me. On Console, I was getting the Error:
"Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource."
Later I realised, I have to use a local web server (MAMP, WAMP etc.) to make it work.
Please be careful of the above error message. Chances are you are not using a local web server to run you website.
I just figured this one out!
For me, I was using a CDN for importing my angular.min.js file that apparently wasn't working. 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 it's working fine now. Cheers!
Yes, without the '', ng would try to evaluate the contents inside the ng-include("")
This evaluation is another reason why you don't put {{}} inside these directives.
ng-include is not working in chrome as well as in explorer but works in Firefox, so this could be compatibility issues. To be sure, try generating the report in Firefox or Edge or another browser.
I Too had similar issue: Silly mistake was causing IT , I had below textArea
EG:
<textarea cols="3" type="text" id="WarehouseAddress" class="form-control" > `
Wasn't 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>
Thought to post it may help any one I digged hours to solve ....
the ng-include file works for files fetched from the web server only (needs something like http://mywebsite/myinclude.html link).
It does not work if you fetch file from local folder directly (c:\myinclude.html will not work)
The ng-include directive should just work normal if you're viewing your file via some server (localhost or online) and NOT viewing your file directly under file system like (file:///yourpath/index.html).
This example from w3schools should work fine.
Related
I have create a simple page using AngularJs. When I'm trying to include header.htm in index.html, nothing is appearing in browser.
index.html
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<div ng-app="">
<div ng-include="'views/header.htm'"></div>
</div>
</body>
</html>
header.htm
<h1>Header</h1>
You have not shown your folder structure and more over the definition of header.html.From next time try to create MCVE.
I created a fiddle to show how it works.
<div ng-controller="Ctrl">
<div ng-include ="'header.html'" onload='myFunction()'></div>
</div>
<!-- header.html -->
<script type="text/ng-template" id="header.html">
Content of Header html
</script>
function Ctrl($scope) {
$scope.myFunction = function() {
alert('header loaded');
}
}
Welcome aboard!
Please provide some logs so we know better about the situation. Also consider reading How to Ask.
You can show console errors in...
Chrome with
Alt+CMD+J on Mac OS, with (i suppose) Ctrl+Alt+J on Windows
Firefox with
Alt+CMD+K on Mac OS, with (i suppose) Ctrl+Alt+K on Windows
Now to my answer: You request views/header.htm so your file structure needs to look like this:
- index.html
- views
- header.htm
To test your site locally use a tool like http-server. Or when you are on a Mac or Unix based machine you can simply run python -m SimpleHTTPServer in your projects directory.
Hope that helped.
I tried some simple Angular Routing, but I cant specify what's the error. Chrome just tells me that Angular can't compile the Template.
In the following Link you can see my directory structure.
directory-structure
-- angular.js
var testApp = angular.module('testApp', ['ngRoute']);
testApp.config(function($routeProvider){
$routeProvider.when('/list', {
templateUrl: 'pages/list.html',
controller: 'mainController'
}).when('/insert', {
templateUrl: 'pages/new.html',
controller: 'newController'
});
});
testApp.controller('mainController', function($scope){
$scope.message = 'main';
});
testApp.controller('newController', function($scope){
$scope.message = 'new';
});
--index.html
<!DOCTYPE html>
<html lang="en" ng-app="testApp">
<head>
<meta charset="UTF-8">
<title>Barfly</title>
<script src="/angular/angular.min.js"></script>
<script src="/angular-route/angular-route.min.js"></script>
<script src="/js/angularApp.js"></script>
</head>
<body ng-controller="mainController">
list
new
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
This is my error,
Browser Error
Thank you in advance!
EDIT. Sorry, I didn't see your directory structure. Are you sure pages directory is accessible to the public? Should the pages directory be moved into public directory?
Old answer:
The error is saying the templateUrl /pages/list.html does not exists. You should either save a template file into /pages/list.html file or add an inline template in the html body like this:
<script type="text/ng-template" id="/pages/list.html">
my template here
</script>
I encountered a sort of similar problem: templateUrl files could be not loaded (all resources didn't). In my case it happened when app was loaded on a browser on a mobile device. It was caused by Content Security Policy restrictions (How does Content Security Policy work?)
I got the CSP to permit all resources except for the templates referenced by templateUrl.
I also tried loading the templates through the script directive (https://docs.angularjs.org/api/ng/directive/script), but to no avail.
Eventually I decided to embed the templates in the route itself, like this:
testApp.config(function($routeProvider){
$routeProvider.when('/list', {
template: '<li ng-repeat="etcetera"></li>',
controller: 'mainController'
});
});
<a data-target="#list">list</a>
<a data-target="#insert">new</a>
I am a beginner in Angular JS, recently tried $stateProvider refering a tutorials-eggHead. Find code from below:
I am not getting correct response.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Home Page</title>
</head>
<body>
<h1>Hello World</h1>
<ui-view></ui-view>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="js/app.js"></script>
</body>
</html>
first.html
<div>
<h1>Hello</h1>
<input type="text" ng-model="first.message" />
<h1>{{ first.message }} {{ "Naresh" }}</h1>
</div>
app.js
var app = angular.module( "myApp", ["ui.router"] );
app.config( function config($stateProvider){
$stateProvider.state("index", {
url:"",
controller:"CtrlOne as first",
templateUrl:"template/first.html"
})
});
app.controller( "CtrlOne", function CtrlOne(){
var first = this;
first.message = "Hi";
});
Folder Structure
My Output with no error in console
Where did I go wrong. I followed exactly what was shown in the EggHead Tutorial
Why ui-view is not showing up? NO Errors are being showed up for me to refer further.
Please any experts help me. Its really confusing if things are not working fine.
Thanks in advance.
The code looks fine, so I'd say this is a CORS issue.
You are loading something that looks like a file:///C:/Users... URL.
That means it won't load other files - you should be seeing an error like this:
XMLHttpRequest cannot load file:///C:/Users/.... Cross origin requests
are only supported for protocol schemes: http, data, chrome,
chrome-extension, https, chrome-extension-resource.
This is what I see when loading your code:
I suggest you take a look here to figure out your issue.
If you get a local server up and running your code will work.
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-route.js"></script>
</head>
</head>
<body ng-app="myApp" ng-controller="cont1">
<a href=#dogs>dogs</a> <a href=#cats>cats</a>
<div ng-view></div>
<script>
angular.module("myApp", ['ngRoute']).config ('$routeProvider',function($routeProvider){
$routeProvider.when("/dogs", {templateUrl: "one.html"})
.when("/cats", {templateUrl: "two.html"})
.otherwise("/cats", {redirectTo: "/dogs"})
});
app.controller("cont1", function($scope){ $scope.model = {message: "This is my app One!!!"} });
</script>
</body>
</html>
I am unable to get the message in paragraph 'Here are the cats' or 'Here are the dogs' on clicking the two links; these files are saved as one.html and two.html in the same folder.
I have downloaded and added the angular-route.js file in the same folder. Kindly help!
I have put controllers in routerProvider but it is not necessary, and adding it to it wont run! :(
You are forgetting to insert the controllers for your templates inside the object in when. See below:
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-route.js"></script>
</head>
</head>
<body ng-app="myApp" ng-controller="cont1">
<a href=#dogs>dogs</a> <a href=#cats>cats</a>
<div ng-view></div>
<script>
angular.module("myApp", ['ngRoute']).config ('$routeProvider',function($routeProvider){
$routeProvider.when("/dogs", {
templateUrl: "one.html",
controller: "cont1"
})
.when("/cats", {
templateUrl: "two.html",
controller: "cont1"
})
.otherwise("/cats", {redirectTo: "/dogs"})
});
app.controller("cont1", function($scope){ $scope.model = {message: "This is my app One!!!"} });
</script>
</body>
</html>
If you're opening this html file directly in the browser, it won't work. This is because your template files will be loaded using AJAX. To make sure the user's data from one site cannot be fetched by a malicious other site, AJAX requests must adhere to the Same origin policy. The minute details of this policy are outside the scope of this answer, but it means that one site page can't make requests to another site. Files loaded directly from disk (loaded using the `file://' url scheme) don't have an origin so the cross origin policy check will always fail.
To solve this problem, put your files on a server, and try acessing them from there. If you're using a mac, you canuse Python's simple http server, which comes preinstalled on your mac. On windows, you can use mongoose.
When you use the minify-proof syntax for angular you pass the parameters as an array, so instead of:
config('$routeProvider',function($routeProvider){
$routeProvider.when("/dogs", {
...
});
you needed:
config(['$routeProvider',function($routeProvider){
$routeProvider.when("/dogs", {
...
}]);
http://plnkr.co/edit/7NiWduPXCIKutSF243Hg?p=preview
I checked it out with Team. I just had to remove the controller from the top part of the code in Html file, and it would work fine.
<body ng-app="myApp" ng-controller="cont1">
should be turned to ...
<body ng-app="myApp">
Thanks buddies for helping me though!
I have checked Stack overflow and many other blogs but I was not able to resolve the routing issue that I have in my AngularJS code. I'm not getting any error but the routing doesn't seem to be happening at all.
Can anyone please help me fix this issue?
The main index.html is here
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>
<body data-ng-app="sampleApp">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> Add New Order </li>
<li> Show Order </li>
</ul>
</div>
<div class="col-md-9">
<div data-ng-view></div>
</div>
</div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
I have uploaded the complete code to Plunker AngularJS Routing
Any help would be greatly appreciated.
Thanks,
Smitha
The plunker doesnt work because of missing angular-route.js. But What can I see you have forgotten to give angular dependency - ngRoute
var sampleApp = angular.module('sampleApp', ['ngRoute']);
This oficial tutorial shows how to use the router https://docs.angularjs.org/tutorial/step_07
I have updated your plunker with changes which works
http://plnkr.co/edit/BBG3XH3akxfAKMzjT71E?p=preview
Main problem - version mishmash - uploaded angular - 1.3.x, uploaded angular-rout - 1.2-x linked angular to html - 1.0-7
I have changed them to cdn 1.3.3
Next thing - wrong links to templates - even if it could work on localhost - in plunker there cant be / on begining of templates name.
I have changed also links it should start # in ng-href.
Thats basically all.
You will need to remove / from templateUrl
sampleApp.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/AddNewOrder', {
templateUrl : 'add_order.html',
controller : 'AddOrderController'
}).when('/ShowOrders', {
templateUrl : 'show_orders.html',
controller : 'ShowOrdersController'
}).otherwise({
redirectTo : '/AddNewOrder'
});
} ]);