Why is AngularJS include not working in this simple example? - javascript

This is the content of main page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body>
<h1>Hello</h1>
<div ng-include="'goodbye.html'" ></div>
</body>
</html>
This is the content of goodbye.html :
<h1>Goodbye</h1>
It just shows the "Hello" and doesn't add the "Goodbye" to that. Why doesn't it include the goodbye.html?

You are missing ng-app to bootstrap AngularJS.
Also, ng-include evaluate the expression passed so you need to pass a string 'goodbye.html', not goodbye.html
<html ng-app="example">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript">
angular.module('example',[]);
</script>
</head>
<body>
<h1>Hello</h1>
<div ng-include="'goodbye.html'"></div>
</body>
</html>

Use '' in the ng-include
<div ng-include="'goodbye.html'" ></div>
From the Documentation
Angular expression evaluating to URL. If the source is a string
constant, make sure you wrap it in single quotes, e.g.
src="'myPartialTemplate.html'".

After looking at your html it seems that your application is not bootstraping automatically. It may be you are bootstraping your application manually. An other thing what I noticed is the ng-include takes path of your include html as string like..
<div ng-include="'goodbye.html'" ></div>

Related

How to create a consistent navbar using jQuery?

I have my navbar inside index.html file and I am loading it inside my homePage.html file as follow:
<!DOCTYPE html>
<html>
<head>
<script>
window.$ = window.jQuery = require("jquery")
</script>
</head>
<body>
<div id="navbar">
</div>
<div id="page-wrapper">
</div>
</body>
<script>
$(function(){
$("#navbar").load("./navbar/index.html");
});
</script>
</html>
when I put random data inside page-wrapper they become overshadowed by the navbar.
I have worked with Meteor before and there we have something called {{yield}} that we use to indicate that the rest of the content should go here.
How is it accomplished in jQuery?
<div id="page-wrapper">
could be changed to
<div id="page-wrapper" style="margin-top:10%">
I believe change the css should fix your problem.

Simple display html element with ng-include

I am new to Angular and JavaScript. I want to use ng-include to import elements form htmls, the elements are simple for display. To illustrate, here I have 3 html files, "123.html", "456.html", and "789.html".
For "123.html":
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myApp">
<p> Here we have 123. </p>
<div class="container">
<div ng-include="'456.html'"></div>
<div ng-include="'789.html'"></div>
</div>
</body>
</html>
For "456.html":
<div>
<P> Here is the 456. </P>
</div>
And for "789.html":
<div>
<P> And here is the 789. </P>
</div>
I see some ng-include examples, but all of them got ng-controller and additional JavaScript file. So my question is, if I just want to display html elements, do I still need ng-controller for the code?
P.S. The code above cannot correctly work, could someone help figure out the problem for this very simple example? The browser is Firefox. Thanks.
Angular must at least have the module myApp available since that's what you are declaring in ng-app
It can't bootstrap without that module and errrors in your browser console should be telling you that it can't find it.
If all you are doing is using angular for includes why not just use server side includes?
So you don't have an app called myApp and would get an error referencing a module that is not defined. In the code below you can see I removed it.
That being said you can define templates using the script tag with ngTemplate.
<script type="text/ng-template" id="456.html">
<div>
<P> Here is the 456. </P>
</div>
</script>
Example using both a script template and a separate file.
This is the full working code:
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app>
<p> Here we have 123. </p>
<div class="container">
<div ng-include="'456.html'"></div>
<div ng-include="'789.html'"></div>
</div>
<script type="text/ng-template" id="456.html">
<div>
<P> Here is the 456. </P>
</div>
</script>
<script type="text/ng-template" id="789.html">
<div>
<P> And here is the 789. </P>
</div>
</script>
</body>
</html>

Blank page when calling Javascript in HTML- what am I doing wrong?

I am trying to do a basic google map link into HTML. When I place the code directly in HTML it works but when I try to link from external JS document I just get a blank page:
HTML Code:
<html>
<head>
<title>Search Engine Title Goes Here</title>
<link rel="stylesheet" type="text/css" href="twoColumn.css">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script language="javascript" type=text/javascript src="myfile.js"
</head>
<body>
<div id="container"> </div>
<div id="header"> Header Goes Here</div>
<div id="sidebar"> Left Navigation Goes Here
<div id="map-canvas"></div>
</div>
<div id="content"> <p>Content Goes Here</p></div>
<div id="footer"> Footer Goes Here </div>
</body>
Am I missing something here?
You:
Forgot the > from the second script's start tag
Omitted the end tag from the second script
The consequence of the first isn't serious, the end tag for the head ends up being treated as an invalid attribute and then ends the tag.
The consequence of the second is that the entire rest of the page is parsed (with errors!) as JavaScript instead of being treated as HTML.
This would have been picked up if you had used a validator.
Note that the language attribute was obsoleted when HTML 4 came out in 1998, and the type attribute was made optional (for JavaScript scripts) in HTML 5. Omit both of them, they bloat your code and just give you the chance to break the script with a typo.
Corrected version:
<script src="myfile.js"></script>
<script type="text/javascript" src="myfile.js"></script>
You should always include a closing script tag
EDIT: I also noticed that you missed the "" around text/javascript

Angularjs does not show any output

I am new to angularJS. So, may be I am asking very naive question. I have downloaded angularjs 1.3.16 and tried to make a very basic example, which is as given below. When I run in browser(chrome) it doesn't show any thing, while I am expecting, Input text box as well as Hello2 printed by its side.
<html>
<head>
<script src="../angular-1.3.16/angular.min.js" />
</head>
<body ng-app>
<input type="text">
Hello {{2}}
</body>
</html>
I don't know, what wrong am I doing ? Please help me out. Moreover, any more things that I should keep in mind, while developing angularjs code to avoid silly errors, then let me know.
You didn't close your script tag
Try like this
<script src="../angular-1.3.16/angular.min.js" ></script>
Demo
You need to close the script tag. Make sure you are using a valid version with valid path
<script src="../angular-1.3.16/angular.min.js" ></script>
Demo
Use ng-init like as
close the tag as below
<script src="../angular-1.3.16/angular.min.js" ></script>
This good for writing script
<body ng-app ng-init="firstName='Hello2'">
<input type="text">
{{ firstName }}
</body>
DEMO
Add App name in ng-app and close the script tag.
e.g.
<script src="../angular-1.3.16/angular.min.js"> </scrpt>
<body ng-app="myApp">

Angularjs ng-include directive not working

I am facing problem while using angularjs ng-include directive.I checked various tutorials,but still couldnt solve.I want to display contents of 'title.html' inside 'index.html'.
Contents of 'index.html' :
<html ng-app>
<head>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<h1 ng-model="name">hello {{"name"}}</h1>
<h3 ng-include="'title.html'"></h3>
</body>
</html>
Contents of 'title.html': "sometext"
I am expecting an output like this:
hello name
sometext
But "sometext" is not displayed.Please help
You don't need test.html inside single quotes. Try this:
<h3 ng-include="title.html"></h3>
Also, ng-include will not working using the file:/// protocol, so make sure you're using a web server.

Categories

Resources