There are similar questions like mine, but they couldn't help me out.
html:
<!DOCTYPE html>
<html>
<head>
<title>Test-Site</title>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="~/App_Data/mainApp.js"></script>
<script src="~/Controllers/testController.js"></script>
</head>
<body>
<div ng-app="~/App_Data/mainApp" ng- controller="~/Controllers/testController">
Write your Name:<input type="text" ng-model="name.firstName" />
Your Name: {{name.firstName}}
</div>
main.app.js:
var mainApp = angular.module("mainApp", []);
test.controller.js:
mainApp.controller("testController", function ($scope) {
$scope.name = { firstName: "Peter" };
});
Chrome console gives me following errors:
Test.html:8 GET http://localhost:55835/~/Controllers/testController.js
Test.html:7 GET http://localhost:55835/~/App_Data/mainApp.js
angular.js:63 Uncaught Error: [$injector:modulerr] Failed to instantiate module ~/App_Data/mainApp due to:
Error: [$injector:nomod] Module '~/App_Data/mainApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Everything was fine, until I moved the js-files into their folders.
What am I doing wrong?
You are using the server side path ~/ in a client side page. You cannot use the server side path in this way. You need to provide the full path from the root of the site to your files; most likely, just removing the ~/ will be enough.
As a side note, normally the App_Data folder is for things like Database files and other server resources; it seems an odd place to put your mainApp.js file.
Related
Is there a way to instantly trigger or execute the downloaded file using html only?
Here is the simple script that I am using and this call will just simply download my app but my aim is not just simply download it but what I need is to execute directly on what I've downloaded on this link
href="http://localhost:8088/main/system/launch/client/MyApp.jnlp"
Appreciate any suggestions or commentsm TIA.
You probably want to read this: https://docs.oracle.com/javase/tutorial/deployment/webstart/deploying.html. The file you're trying to run is kind of like a Java applet, and will require Java to be installed on the client as well as get permission, etc. to open.
That page goes into detail about what html markup is required, particularly this part
Create the HTML page from which your application will be launched. Invoke Deployment Toolkit functions to deploy the Java Web Start application.
In the example, the Dynamic Tree Demo application is deployed in JavaWebStartAppPage.html.
<body>
<!-- ... -->
<script src=
"https://www.java.com/js/deployJava.js"></script>
<script>
// using JavaScript to get location of JNLP
// file relative to HTML page
var dir = location.href.substring(0,
location.href.lastIndexOf('/')+1);
var url = dir + "dynamictree_webstart.jnlp";
deployJava.createWebStartLaunchButton(url, '1.7.0');
</script>
<!-- ... -->
</body>
My guess is you could simplify it by doing something like this:
<body>
<!-- ... -->
<script src="https://www.java.com/js/deployJava.js"></script>
<script>
deployJava.createWebStartLaunchButton(
"http://localhost:8088/main/system/launch/client/MyApp.jnlp",
"1.7.0"
);
</script>
<!-- ... -->
</body>
It seems that when you run the above code, something like this appears below it:
<img src="//java.com/js/webstart.png" border="0">
So you might try just running a modified version of the JavaScript inside of that href. In your case, probably:
const url = "http://localhost:8088/main/system/launch/client/MyApp.jnlp";
if (!deployJava.isWebStartInstalled("1.7.0")) {
if (deployJava.installLatestJRE()) {
deployJava.launch(url);
}
} else {
deployJava.launch(url);
}
The following has occurred:
ReferenceError: anputAccept is not defined]
<script type="text/javascript" src="tshirt1.js"></script> <--this is failing to load.
I have created a .js file that has a method in it named anputAccept. This is located within Script tags in HTML at the bottom of the body tags.
document.getElementById("pushme").addEventListener("click",inputAccept);
The actual method is set like this in .js
function anputAccept() { //Statements here };
Can anyone explain exactly what is going on, and why the script fails to run? Why is there a Reference Error? This is caused because the script fails to load?
Put <script type="text/javascript" src="tshirt1.js"></script> to the bottom of the HTML page or you can you can try this:
window.onload = function() {
document.getElementById("pushme").addEventListener("click",inputAccept);
};
I worked on a little startpage for my browser. Now I would like to make some changes to it, so it updates the index.html file depending on a text file, when this got changed. What whould be an efficiant way to solve this problem?
My approach would be to create a text file and read line by line from it and update the html file. In the text file I would store the links shown on my startpage - I thought maybe something like this:
|cat_media
https://mailbox.org,mail
https://netflix.com,netflix
...
http://crunchyroll.com,crunchy
https://jott-uh-be.bandcamp.com,bc
|cat_social
https://pr0gramm.com,pr0
https://stackoverflow.com,stackoverflow
https://twitter.com,twitter
https://instagram.com,insta
When the line starts with the symbol |, it creates a new <div> with the class category and the string in that line (e.G. class= 'category cat_media'). Otherwise, if the line starts with http, it will add a href-link (e.G. <a href='https://mailbox.org'>mail</a>) to the html-code.
I got this website hosted on my raspberry pi with nginx and uploaded it to my github pages.
You don't have to update the index.html file.
You can create dynamic content.
You can use PHP:
You can learn it here:
https://www.w3schools.com/php/default.asp
And here is how to read a file
http://php.net/manual/en/function.fread.php
Or if you cant use PHP you can use Javascript:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(() => {
$.ajax({
url:'your-config-file.xt',
success: function (data){
console.log(data); //this is the config file. just for loop it and modify the dom
}
});
});
</script>
But your config file must contains the string how the links should be shown.
For example:
|catergory one
yt: https://www.youtube.com
I have working code that I want to demo with JsBin but I can't get the AngularJS directive templateUrl to work (it does work with the template value).
http://jsbin.com/guvok/ is trying to reference http://jsbin.com/razit/ but fails.
For the sake of completeness and posterity here's the code:
hello.html
<!DOCTYPE html>
<html ng-app="hello">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
</head>
<body>
<div hello></div>
</body>
</html>
hello.css
.hello__content {
background: #fff;
}
hello.js
var meter = angular.module('hello', [])
.directive( 'hello', function() {
return {
restrict: 'A',
replace: true,
//template: '<p class="hello__content">hello</p>',
templateUrl: 'http://jsbin.com/razit/',
};
});
template.html
<p>hello, world</p>
When I run http://jsbin.com/guvok/, I get the following error in the Javascript console in my browser:
Error: [$sce:insecurl] http://errors.angularjs.org/1.2.19/$sce/insecurl?p0=http%3A%2F%2Fjsbin.com%2Frazit%2F
If you look up "$sce:insecurl", you'll find the AngularJs error reference doc that says,
AngularJS' Strict Contextual Escaping (SCE) mode (enabled by default)
has blocked loading a resource from an insecure URL.
Typically, this would occur if you're attempting to load an Angular
template from an untrusted source. It's also possible that a custom
directive threw this error for a similar reason.
It also offers a few ways to solve the problem, which is essentially a CORS issue.
Put this at the top of your HTML (after the script tag that loads Angular):
<script type="text/ng-template" id="templateURL">
<!-- TEMPLATE MARKUP GOES HERE -->
</script>
Edit: In your case, the ID would be "http://jsbin.com/razit/", that way you wont have to edit your directive. Worst case, change the templateURL to not reference an external jsBin.
Edit #2: Changing the templateUrl to a string value not referencing an external url or with the http protocol, I now see your output in jsBin edit mode.
jsBin here: http://jsbin.com/dutofete/1/
I've searched everywhere for the answer but unfortunately I didn't find anything.
I have a working Angular application that looks like this:
...
<div class="container" ng-app="myApp">
<div class="page-title">
<h1>
Hello
</h1>
</div>
<div ng-view></div>
</div>
...
I'm working with ngRoute to load html partials into the ng-view div.
my JS:
var myApp = angular.module('myApp', [
'ngRoute',
'myControllers'
]);
myApp.config(['$routeProvider', '$httpProvider',
function($routeProvider, $httpProvider) {
$routeProvider.
when('/step1', {
templateUrl: 'template1.html',
controller: 'Step1Controller'
}).
when('/step2', {
templateUrl: 'template2.html',
controller: 'Step2Controller'
}).
when('/step3', {
templateUrl: 'template3.html',
controller: 'Step3Controller'
}).
otherwise({
redirectTo: '/step1'
});
}]);
Up to here, everything works as a charm. I already completed pretty much everything I needed (a multi stepped wizard).
On the last step, I needed to use <script type="text/ng-template" id="specialTemplate.html"></script> to generate some special template (a tree)
So, in my last step page partial (template3.html) I did the following:
<ul>
<li ng-repeat="item in [1,2,3]" ng-include="'specialTemplate.html'"></li>
</ul>
<script type="text/ng-template" id="specialTemplate.html">
Test
</script>
Here I got stuck. I'm getting 404 errors on console (he tries to look up specialTemplate.html in the same directory my browser's url points to), and the template does not load.
When I made some tests I saw that if the ng-include is outside of the ng-view, but inside a clean ng-controller separated from my current working flow, It does find and load the template, but this doesn't help me because I must render the tree within my working steps flow.
Is it impossible to load a <script> based template inside ng-view?
Thanks in advance for your help.
EDIT:
Version: AngularJS v1.3.0-beta.3
it could be that when you try to grab specialTemplate.html from within ngView it changes the url being pointed to by ngInclude. Try hardcoding the path to specialTemplate.html. Or you could try putting your script inside the li because it might also be a scope issue.
If you are testing in a local Windows system, then not serving up your pages from http-server might be the problem.
As a fix, install http-server globally using the commnd:
npm install -g http-server
and remember to use a sudo for Linux system.
Once the server installed, start the server using the command:
http-server
Now, go to http://127.0.0.1:8080/ in your browser and navigate to your desired page.