This is mine html file.
<!DOCTYPE html>
<html lang="en">
<head ng-app="drawings">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.5/lodash.min.js"></script>
<script src="drawings_core.js"></script>
</head>
<body ng-controller="mainController">
</body>
</html>
This is mine drawings_core.js file.
var app = angular.module('drawings',[]);
var drawing;
function mainController($scope,$http){
$http.get('/get_drawing').success(function(data){
console.log(data);
}).error(function(err){cosnole.log(err);});
}
Content of mainController function wont't get called.
Get request is not sent.
You need to register your controller in your application. The code could look like this, but this is not tested, you might need to make some small alterations.
I would suggest creating separate methods for your functionality. You can then call them like I did in this example.
Even better would be to create a separate service where you deal with the http stuff.
I have an example here: https://eidand.com/2015/01/22/starting-with-angular-part-3-services/
It's old, but it should be enough to get you started.
app.controller(mainController, ['$scope', '$http', function ($scope, $http) {
$scope.getDrawing = function ()
{
$http.get('/get_drawing').success(function(data){
console.log(data);
}).error(function(err){console.log(err);});
}
$scope.getDrawing();
}]);
})();
Related
i want to log some value onto console on clicking a button by reading the function from scripts.js file from index.html file.
below is my code,
within index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="src/styles.css">
<script src="src/scripts.js"></script>
</head>
<body>
<button onClick="data()">click</button>
</body>
</html>
within scripts.js file
function data() {
const data = "3";
console.log('data');
}
in doing this, i get error like below,
"uncaught reference error: data is not defined at HTMLButtonElement.onclick"
not sure what is causing the problem. could someone help me with this. thanks.
EDIT:
in the source tab i see this
in the networks tab i see scripts.13aae5c5.js file being called.
EDIT2:
i have tried to create a div with id message and change its content with js code in scripts.js file and it works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="src/styles.css">
</head>
<body>
<h2>here i am </h2>
<div id="message"></div>
<script src="src/scripts.js"></script>
<button onclick="data">click</button>
</body>
in scripts.js file
function data() {
console.log('data');
}
document.getElementById('message').innerText = "Hello World!";
it displays hello world message but on clicking button it says uncaught reference error data not defined
Basicly there is nothing wrong here, exept you should considder binding your events in JS. BUT: This looks like you have some sort of preprocessor, like webpack or browserify, active at your project.
The preprocessors or packer will wrap your code in a seperate scope to prevent filling up the global space.
a small example:
// the code:
function data() {
return 'some data';
}
// will be converted to something like this (Boiled down for understanding)
(function(){
function data() {
return 'some data';
}
})()
The (function(){ ... })() is called a self executing function and will provide a encapsulation to your code. What is the purpose of a self executing function in javascript?
<button onClick="data()">click</button> on the other side will need method data in the global scope, or to be exact: window.data has to be set!
so you have two options right here:
bind the data method to the global scope
bind your event using js
function data() {
console.log('call to data');
}
// bind to global scope (not nice!)
window.data = data;
// onload method
function onload() {
console.log('onload');
}
window.onload = onload;
// bind event using JS (Waaaay nicer!)
// wait for Dom is loaded: https://developer.mozilla.org/de/docs/Web/Events/DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
onload();
// get the element
const button = document.getElementById('test');
if(button) {
// bind event
button.addEventListener('click', data)
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="src/styles.css">
<script src="src/scripts.js"></script>
</head>
<body onload="onload()">
<button id="test" onClick="data()">click</button>
</body>
</html>
I'm trying to change the context of a text file on an HTML button click.
I have this so far:
index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
<script src="node-main.js"></script>
</head>
<body>
<embed src="table.txt">
<button onclick="Update()">Update</button>
</body>
</html>
node-main.js:
const fs = require('fs');
function Update() {
fs.writeFileSync("table.txt", 'New text');
}
It does not do what I was expecting.
It gives me the error:require is not defined
Thanks in advance :)
You should run node-main.js as a server that receives fetch requests from your client. You're trying to run server-side scripts on the client.
Try using Express.js
https://expressjs.com/
I have created a Dart HttpServer which shows "HTML" code on the browser but I also want to connect "CSS" & "JS" to this HTML,
How should I do that? please help
HttpServer _server;
_server = await HttpServer.bind(InternetAddress.anyIPv4, port);
_server.listen((request) async {
request.response
..headers.contentType = ContentType.html
//HTML Code
..write('''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<! -- <link rel="stylesheet" href="styles.css"> -->
<title>Hello World</title>
</head>
<body>
<p>Hello WOrld</p>
</body>
<! -- <script src="app.js"></script> -->
</html>
''');
await request.response.close();
}
PS 1: One Solution is to add CSS and JS codes in the HTML code which would work but is less efficient.
PS 2: I am using this dart code in a flutter project.
Just use html tag.
Don't neglect every source imported by html tag is a http request. you should handle these requests. Dart HttpServer doesn't handle these.
I'm geting problems with angularjs structure. I pretend to have a translation controller or service or wathever and one controller per group of pages (I will explauin that point).
The idea is an index page that loads all the .js files and .css (that are global on the entire web site). That page will load the login file (in it´s body), with its angular controller. Then it will load a template with nav, header, footer, etc... templates, and in the article section I pretend to load diferent pages (links in the nav menu) each page (or group) with its controller. I'm starting with angularjs and it doesn't works. The idea will be similar at next code:
index (reduced for the example):
<!DOCTYPE html>
<html **ng-app="app" ng-controller="translationsCtrl"**>
<head>
<title>something</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!--GLOBAL STYLES (WILL BE MORE, ONLY EXAMPLE)-->
<link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div ng-controller="loginCtrl" ng-include="'views/login.html'"></div>
<!--GLOBAL SCRIPTS (WILL BE MORE, ONLY EXAMPLE)-->
<script src="assets/libs/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="controllers/translationsCtrl.js"></script>
</body>
</html>
in login.html it will be like this:
<!--STUFF-->
<script src="controllers/loginCtrl.js"></script>
controllers will be:
loginCtrl.js:
angular
.module('app', [])
.controller('loginCtrl', function($scope) {
$scope.login = 'login';
})
translationsCtrl.js
angular
.module('app', [])
.controller('translationsCtrl', function($scope) {
$scope.text = 'text';
});
how can I do something similar working? Are there any better method for doing it? The web app is to huge so I can't use requirejs or simplepage angular.
I have a very basic AngularJS app, from which I am trying to resolve the below error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.9/$injector/modulerr?p0=HelloWorld&p1=Error…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.9%2Fangular.min.js%3A19%3A463)
All the online references I have found lead to correcting improper use of ng-app in one way or another, however I find that my code is as close as vanilla and correct as it can possibly get.
So being that this is a basic issue and I cannot seem to find the solution for it, could anyone please enlighten me as to the obvious mistake?
JavaScript
var myApp = angular.module("HelloWorld", []);
myApp.controller("mainController", function($scope){
console.log($scope);
});
HTML
<!DOCTYPE html>
<html lang="en-us" ng-app="HelloWorld">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Hello World with AngularJS!</title>
</head>
<body>
<div ng-controller="mainController">
Hello world!
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
</body>
</html>
If you are trying to make this example in plunkr for example, don't forget to reference your script file, script.js.
Check here.
I added <script src="script.js"></script>. Without it I get the exact error you describe. Basically Angular can't find a corresponding module declaration for the ng-app="HelloWorld" application.
So don't forget to include your actual application JS, containing the angular.module part.
You get this error since you are using ng features before importing Angular and you are not importing the file where you initialize your app module.
Do as shown below:
HTML:
<!DOCTYPE html>
<html lang="en-us" ng-app="HelloWorld">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js">
</script>
<script type="text/javascript" src="app.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Hello World with AngularJS!</title>
</head>
<body>
<div ng-controller="mainController">
Hello world!
</div>
</body>
</html>
App.js:
var myApp = angular.module("HelloWorld", []);
myApp.controller("mainController", function($scope){
console.log($scope);
});
I hope I've been helpful.