I'm practicing writing AngularJS app using modules and embedded HTML. Does anyone know why the source of the ng-include directive below requires single quotes inside double quotes, while the source for the <script> files only needs one type of quotes?
I know for a fact that ng-include directive doesn't work if I only use one type of quotes. But I don't know why this is the case.
Thank you!
<DOCTYPE html>
<html>
<head>
<title>
Angularjs practice
</title>
</head>
<body>
<div ng-app="main" ng-controller="stController">
<div ng-include="'angularjs/src/include/main.htm'">
</div>
<div ng-include="'angularjs/src/include/subjects.htm'">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="angularjs/src/module/mainApp.js"></script>
<script src="angularjs/src/module/studentController.js"></script>
</body>
</html>
ng-include expects an angular expression evaluating to the URL
For example, if you write ng-include="test.html", that would mean the html attribute of the test object of $scope.
When you say ng-include="'test.html'", that is an angular expression. In this case, the string that evaluates to the value test.html
Here is the official documentation
https://docs.angularjs.org/api/ng/directive/ngInclude
See the documentation here,ng-include, it says if string is a constant then you should use the single inverted commas, but for expressions like "getView()", "showViews()" etc, you don't need the single inverted commas
Related
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>
I have an AngularJS document where I need to set fields in various parts of the document. This includes e.x. the <title> tag. So my document Looks like the following:
<html ng-app="test" ng-controller="TestCtrl">
<head>
<title>{{test1}}</title>
</head>
<body>
<h1>{{test1}}</h1>
...
</body>
</html>
As you can see I put the ng-controller in the <html> tag because I need to use the same scope across <head> and <body>. I could also set the controller on the individual elements but since I'm doing some POST and GET queries I think it's not a good idea because then they are performed multiple times.
Is using the ng-controller tag in the <html> element a good idea (is there a negative impact)? Are there better solutions?
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">
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.
I'm trying to code a UK Pound symbol to be written to a document by JavaScript, but it's code is not being translated and is instead displayed as entered.
See this JSBin http://jsbin.com/orocox/1/edit
This is the JavaScript:
$("#price").text('£ 1.99');
This is the html:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<span id="price"></span>
</body>
</html>
This is the result:
'£(;) 1.99'
*Note that the parenthesis around the ';' are added by me to prevent the entity code from being translated on StackOverflow, but they do not exist in the actual output.
The result I want is:
'£ 1.99'.
use unicode instead: jsbin
$("#price").text('\u00A3 1.99');
explanation: the £ is an html entity and is not processed as normal text. but unicode works for any text. since you are using text it is processed as a string not an html.
check this page's encoding reference : here
Try $("#price").html('£ 1.99'); instead.
Use the character itself:
$("#price").text('£ 1.99');
This is good for the readability of your code. How you type “£” depends on your editing environment. E.g., on Windows, you can produce it by typing Alt 0163 if you cannot find any more convenient way (depending on keyboard, keyboard layout, and editor being used).