I know this question definitely get's asked a lot. But I honestly am not sure what I am doing wrong, and the solutions I have found haven't seemed to work.
For reference, I am following this tutorial:
https://www.youtube.com/watch?v=OPxeCiy0RdY
Anyway. I am making a simple angular app that let's you input two values and it returns the result I have also included a small tester at the bottom of the HTML code to check and see if maybe I was having issues in my javascript file. I checked my references in the script tags already and made sure they were correct, all of the files are also in the same directory. I have built the controller, module, and referenced them in the HTML code. But for some reason, when I load my index page it simply does not recognize the Angular code parts. My code is as follows:
HTML:
<!DOCTYPE HTML>
<html ng-app="app1">
<head>
<title>Angular Practice Page</title>
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<!-- Adds a controller that the Angular module will control.
The view is the div element and all that it contains. The $scope
component is used to provide data to the view. -->
<body>
<div ng-controller="ctrl1">
<span>Calculate:</span>
<input type="text" ng-model="first" />
<input type="text" ng-model="second" />
<button ng-click="updateValue()">Sum</button>
<br /><br />
{{calculation}}
<!-- Test Calculation -->
<p>
5 + 5 = {{5+5}}
</p>
</div>
</body>
</html>
Angular Code:
var app1 = angular.module('app1', []);
app1.controller('ctrl1', function($scope){
$scope.first = 1;
$scope.second = 1;
$scope.updateValue = function() {
$scope.calculation = $scope.first + ' + ' + $scope.second +
' = ' + ($scope.first + $scope.second);
};
});
Image:
I've tried moving around the "ng-app" to different parts of the code in the HTML file and just poking around with no luck.
The tutorial teacher also has a completed set of code here: http://www.newthinktank.com/2016/02/angularjs-tutorial/ and even when I copied this verbatim it didn't work. Could it be something wrong on my computer? For reference I am using the Atom text editor and google chrome as my browser. I tested it with other browsers and got the same result.
Any explanation would be greatly appreciated. Thanks in advance!
Just place this script at the top of the head. Angular JS CDN should be at the top always before your any java script file.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
Instead of this order,
<head>
<title>Angular Practice Page</title>
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
Change the order of your script files to this. It would definitely work.
<head>
<title>Angular Practice Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
Include Angular at the top. Since your script has reference to angular which is not loaded when your script.js executes.
Use input type number instead of text. Since, the text field give you string value which result in string concatenation instead of arithmetic operation.
var app1 = angular.module('app1', []);
app1.controller('ctrl1', function($scope){
$scope.first = 1;
$scope.second = 1;
$scope.updateValue = function() {
$scope.calculation = $scope.first + ' + ' + $scope.second +
' = ' + ($scope.first + $scope.second);
};
});
<!DOCTYPE HTML>
<html ng-app="app1">
<head>
<title>Angular Practice Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<!-- Adds a controller that the Angular module will control.
The view is the div element and all that it contains. The $scope
component is used to provide data to the view. -->
<body>
<div ng-controller="ctrl1">
<span>Calculate:</span>
<input type="number" ng-model="first" />
<input type="number" ng-model="second" />
<button ng-click="updateValue()">Sum</button>
<br /><br />
{{calculation}}
<!-- Test Calculation -->
<p>
5 + 5 = {{5+5}}
</p>
</div>
</body>
</html>
Related
I'm creating a spring-boot web application. I'm new to spring-boot as well as AngularJS and have tried integrating this with my application without any success. I have a page of JSON that I want to format as a table in my HTML page ("index.html") but my AngularJS variables are not visible on this page. I formatted some of my HTML code based off this tutorial on YouTube: https://www.youtube.com/watch?v=fUtVRKoBlbQ&list=PLVApX3evDwJ1i1KQYCcyS9hpSy_zOgU0Y&index=6 . I have attached the page of JSON along with my JavaScript code, HTML file, and the result of compiling my program:
JavaScript:
var app = angular.module("User", []);
app.controller("UsersController", function($scope, $http) {
$http.get("http://localhost:7070/user/all")
.success(function(result) {
$scope.tickets = result.tickets
})
});
HTML:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="fragments.html :: headerfiles">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="/static/app/users.controller.js" th:src="#{/app/users.controller.js}"></script>
</head>
<body>
<base href>
<header th:insert="fragments.html :: nav"></header>
<!-- Page content goes here -->
<div class="container">
<p>This is User\Index. Only people with role_user can see this.</p>
<div ng-app="User" ng-controller="UsersController">
<ul>
<li ng-repeat="t in tickets">
{{t.ticket_id}} - {{t.title}} - {{t.body}}
</li>
</ul>
</div>
</div>
</body>
</html>
JSON:
A screenshot of the tickets (JSON) (
RESULT:
A screenshot of the result when I compile my code
Please note that I highly doubt this is the best solution. It worked for me so I'll post it here. In my HTML file, I moved my starting body tag <body> to line 4, immediately underneath the starting head tag <head th:insert="fragments.html :: headerfiles">. I also removed static as suggested by Ciao Costa in the earlier answer, https://stackoverflow.com/users/4405995/caio-costa . Here is the link on removing the static: (Image does not show using thymeleaf and spring) . Another small change I made was changing the variable {{t.ticket_id}} to {{t.id}} but that's only because the JSON showed it as id
HTML:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="fragments.html :: headerfiles">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="/app/users.controller.js" th:src="#{/app/users.controller.js}"></script>
</head>
<base href>
<header th:insert="fragments.html :: nav"></header>
<!-- Page content goes here -->
<div class="container">
<p>This is User\Index. Only people with role_user can see this.</p>
<div ng-app="User" ng-controller="UsersController">
<ul>
<li ng-repeat="t in tickets">
{{t.id}} - {{t.title}} - {{t.body}}
</li>
</ul>
</div>
</div>
</body>
</html>
RESULT:
Since your screen still displays the {{ }}, we know ng-app hasn't initialized properly. A good first approach would be to have a look at the Console, since failing to initialize ng-app usually results in a error message.
If ng-app had initialized, even if the variable you were trying to access in scope was undefined, you would not see the curly brackets.
When AngularJS initializes correctly and doesn't find the variable you are trying to render in DOM, it just leave its space blank and moves on like nothing happened. It also shows no error message in such cases.
I've done some tests and I believe the problem is in here:
<script type="text/javascript" src="/static/app/users.controller.js" th:src="#{/app/users.controller.js}"></script>
It looks like th:src is breaking your application because it is unable to find the file and thus generates a module error.
Try using it this way:
<script type="text/javascript" src="/static/app/users.controller.js" th:src=b"#{baseUrl + '/app/users.controller.js'}"></script>
Or:
<script type="text/javascript" src="/static/app/users.controller.js" th:src="#{~/app/users.controller.js}"></script>
If none of the above work, try removing the static.
Sometimes it happens when you forget to hit ng serve inside your terminal.
I tried doing some input validation on my inputs at my ejs template using angular, but it doesn't seem to be working correctly, this is the code i used (from w3schools):
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>Try writing in the input field:</p>
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
It's supposed to ouput something like this:
The input's valid state is: false
But instead it just returns this:
The input's valid state is: {{myForm.myInput.$valid}}
So is it in any way possible to use ejs and angular together?
You need to have a module and a controller defined, script should be loaded inside the body/head
HTML
<!DOCTYPE html>
<html ng-app="store">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="">
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
Controller
var app = angular.module('store', []);
app.controller('StoreController', function($scope) {
});
DEMO
<html ng-app="insert_app_name_here">
<body ng-controller="insert_controller_name_here">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
</body>
</html>
I would set up my angular app like the above code. Also, including the script at the end of your body tag is good practice. Moreover, removing the .min from your script tag to just angular.js instead of angular.min.js helps you debug your code better since you will be using it for development and not for production.
In setting up your app, I would include an app.js file where the code goes like this:
angular.module('insert_app_name_here', [])
In setting up your controller, I would include a controller file (i.e. mainCtrl.js) where the code goes like this:
angular.module('insert_app_name_here').controller('insert_controller_name_here, function($scope) {
});
As to linking angular with ejs, i am unfamiliar with ejs, therefore i cannot provide a solution for that.
var lPT = document.title.split(' -')[0];
$('.pageBar .left').text(lPT);
With above code snippet, I am trying to display the title of webpage as in below example,
'Home - Sample Website' would come out as 'Home'
The html would be,
<div class="pageBar"><div class="left"></div></div>
I am trying this, but it is not displaying the title. I am relatively new to JS, and I would like to know, what am I doing wrong?
Try using this,
var lPT = document.title.split('-')[0].trim();
$('.pageBar .left').text(lPT);
Also, make use that you are not getting errors in the browser console and you have included the jquery file before this snippet.
Make sure that page title contains - else it will not show anything.
Check below example:
var lPT = document.title.split(' -')[0];
console.log(lPT);
$('.pageBar .left').text(lPT);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Sarjan - My page</title>
<div class="pageBar"><div class="left"></div></div>
Just like T.J.Crowder said:
you need to import jquery
you need to place your code after the you want to manipulate with that code (otherwise when your code runs the DOM element with the .pageBar does not exists yet )
Here is an example:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home - Sample Website</title>
</head>
<body>
<div class="pageBar">
<div class="left">
Sample text
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var lPT = document.title.split(' -')[0];
$('.pageBar .left').text(lPT);
</script>
</body>
</html>
I am starting an O'Reilly book, AngularJS and the first example is as follows. On my end the "{{greeting.text}}" is showing up as that inside of being replaced with hello. I have the angular linked properly, and when I put it into jsFiddle it doesn't work as well, unless I change onLoad to no wrap- then it works.
I am using Webstorm on mac and I'm thinking my problem may be in there, but can't find anything that has fixed it.
Thank you for helping what is probably a simple solution.
HTML
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<script src="angular.js"></script>
<script src ="controllers.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
Controller
function HelloController($scope) {
$scope.greeting = { text: 'Hello'};
}
Seems like something might be wrong with the way you are including angular. The following code works fine for me
index.html:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src ="controllers.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
controllers.js:
function HelloController($scope) {
$scope.greeting = { text: 'Hello'};
}
Open up your index.html in chrome and press Command + Option + J and when the developer tools open up, head to the network tab, refresh the page and see if you are loading your angular.js script correctly - if not, that is the issue.
Which angular version you use?
Mine is 1.3
angular.module('HelloApp', [])
.controller('HelloController', ['$scope', function($scope) {
$scope.greeting = { text: 'Hello'};
}
Can someone help me with stating what am I doing wrong in this example -- http://jsbin.com/bekoxo/2/edit?html,output#H:L23
The screenshot for the chrome inspector is at -
https://www.dropbox.com/s/t6uua7h714h2otg/Screenshot%202014-10-13%2001.32.54.png?dl=0
I can figure out that the element (appler-page) is not registered successfully, template shows document-fragment instead of desired shadow-root
the 2nd element, where polymer definition is part of the markup(same markup) is rendered successfully.
Can someone point out what am I missing in order to make the first part of example also work.
(which is creating an element via javascript and using it immediately)
EDIT --- problem code below
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/polymer.js"></script>
<meta name="description" content="problem with dynamically building a polymer element" />
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var scr = '<polymer-element name="appler-page"><template>template content {{test}}</template><script>var proxymodel = {};proxymodel["test"] = "testfie" ;'+
'Polymer(proxymodel);<\/script><\/polymer-element><appler-page><\/appler-page>';
$(document).ready(function(){
document.getElementById("fie").onclick = function(){
var divel = document.createElement("div");
divel.innerHTML = scr;
document.querySelector(".polymerized").innerHTML = "";
document.querySelector(".polymerized").appendChild(divel);
}
});
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input type="button" id="fie" value="fie"/>
<div class="polymerized">before content</div>
EDIT -- A better jsbin for the problem
http://jsbin.com/bekoxo/2/edit?html,output#H:L23
Here is one way in which you can register your element imperatively (which, I believe is what your first element is trying to do). I've simplified your example a bit.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import"
href="http://www.polymer-project.org/components/polymer/polymer.html">
<script>
Polymer('appler-page', {test: 'testfile'});
var el = document.createElement('div');
el.innerHTML = '\
<polymer-element name="appler-page">\
<template>template content {{test}}</template>\
</polymer-element>';
document.body.appendChild(el);
</script>
<appler-page></appler-page>
</body>
</html>
See http://jsbin.com/qifupa/edit
Another instance of staying up with the latest Polymer version I found.
here's the working piece of code that may help anyone else if they are attempting the same thing.
I switched to Polymer-project.org addresses for the imports and it worked.
http://jsbin.com/bekoxo/14/edit?html,output#H:L23