Hi I have started working on angular2. I came across a scenario where I have to put external javascript file in my angular2 application. I have tried as below.
At first I created testjs.js file and I added the below code
function test() {
alert('TestingFunction')
}
Then in index.html I referenced as below.
<script src="~/ClientApp/Assets/testjs.js"></script>
Then I have fetchdata.component.js file. I added below code into it.
declare var test: any;
f() {
new test();
}
Finally in fetchdata.component.html I added below code.
<h1>
<button (click)='f()'>Test</button>
</h1>
When click the button it prompts below error in browser.
FetchDataComponent.html:26 ERROR ReferenceError: test is not defined
at FetchDataComponent.f (fetchdata.component.ts:15)
Can someone help me in this issue? Any help would be appreciated. Thank you!
Related
My problem is simple. All the possible solutions I searched for online did not address my question.
Google's developer website for Class google.script.run (https://developers.google.com/apps-script/guides/html/reference/run#withSuccessHandler) showcased the method myFunction(...) (any server-side function).
I have copied their exact code and html code and deduced that the function doSomething() does not execute. Nothing gets logged.
I intend to use this to execute an HTML file so that I could play a sound file. I could do this so far with a sidebar popping up from the side, as discussed in this thread: Google Script: Play Sound when a specific cell change the Value.
However, this code provided by Google does not work. Why?
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function doSomething() {
Logger.log('I was called!');
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
google.script.run.doSomething();
</script>
</head>
<body>
</body>
</html>
By using google.script.run you are calling a server-side Apps Script function.
https://developers.google.com/apps-script/guides/html/reference/run
Please double-check that you follow the following steps to do it correctly:
Please make sure that you put the html part of the code in a separate HTML file (which you create through File->New->HTML file) with the name corresponding to the one you are calling in HtmlService.createHtmlOutputFromFile() - in your case Index.html
Select “doGet” as the function to be run.
Deploy the script as a web app - this is the requirement for using Apps Script HTML service. Please find the instructions here: https://developers.google.com/apps-script/guides/web
Make sure that every time after you implement changes in your code, you deploy the script as a NEW project version. This is necessary to update the changes.
Open the current web app URL you obtain after updating your version, to open your html output.
In your case only an empty HTML file will be opened, to test functionality - insert some text in your HTML body, to test the correct functionality. The latter can be confirmed by viewing the Logs after running the code.
I am using Angular 6 and trying to call the mask function of the jquery.maskedinput javascript library in my ts file. The mask function in VS Code was not showing up or compiling so I found a type definition file and added it to the node_modules. Now intellitype finds the mask function and the squiggles go away. However I still get a compile error. What am I missing to have the page compile and use the mask function?
component.ts
/// <reference path="../../../../node_modules/#types/maskedinput/index.d.ts"/>
.....
$("#dob").mask("99/99/9999", { placeholder: "mm/dd/yyyy" });
node_modules/#types/maskedinput/index.d.ts
interface JQuery {
mask(mask: string, options?: JQueryMaskedInputOptions): JQuery;
}
I am not sure what I am missing at this point. Any guidance will help.
Thanks
I found the answer in another post with a similar issue here.
My issue was that I added the reference after my imports and not at the top of the page per documentation. Once I added the line below to the top of my component everything started working.
/// <reference path="../../../../node_modules/#types/maskedinput/index.d.ts"/>
Documentation -
Typescript Triple-Slash Directives
I created a Google Apps Script add-on to display a sidebar on click:
function displayPage_() {
getScriptProperties_()
var htmlTemplate = HtmlService.createTemplateFromFile('PAGE');
var html = htmlTemplate.evaluate()
.setTitle('Connector');
SpreadsheetApp.getUi().showSidebar(html);
}
This successfully loads the file PAGE.html as long as it is simple html. However, when I try to add include like this:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include("STYLESHEET"); ?>
</head>
<body>
</body>
</html>
It throws this error:
[17-02-09 08:55:50:239 MST] Execution failed: ReferenceError: "include" is not defined.
It doesn't matter what is in the include it always fails.
I have done this before and it worked. As far as I can tell, I have this set up just like the other project, but it doesn't work in this project. I assume that I forgot to enable something, but don't know how to tell what is missing because the transcript is vague.
What am I missing? Or, doing wrong?
I got crazy too...
Found it in an example provided in Google Script Reference, what I didn't know was that include() is a user-defined function. Paste this code and it will work:
function include(File) {
return HtmlService.createHtmlOutputFromFile(File).getContent();
};
Let me know if I understood properly.
I am for the first time trying to work on Angular JS . I designed a HTML form which contains hyperlink . Now i want to register a click event on the same hyperlink but it is not happening. I have added CDN reference for the angular JS at the end of Body and adding Javascript code in the head section of the HTML page.
Here is My Hyper Link markup..
<div ng-app="LoginApp" ng-controller="LoginController" class="top-big-link">
<a class="btn btn-link-1" href="" ng-click="Register()">Register</a>
<a class="btn btn-link-2" href="" ng-click="Login()">Login</a></div>
and here is my Angular JS Script in the Head Section ..
<script type="text/javascript">
var app = angular.module('LoginApp', [])
app.controller('LoginController', function ($scope) {
$scope.Register = function () {
$scope.Message = "Button clicked."
}
<pre></pre>});
</script>
Also on checking the developer console of Chrome i am getting following error message ..
Uncaught SyntaxError: Unexpected token <
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.9/$injector/modulerr?p0=LoginApp&p1=Error%3… ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.9%2Fangular.min.js%3A17%3A350)
Please help me to resolve this ..
There is no problem with your event handler: the error says "Syntax Error: Unexpected <". So your angular application did not even start, because the javascript code of your application is invalid.
This particular error, usually means your browser is trying to interpret some HTML code as javascript.
Start by removing the <pre></pre> from your controller code if that's not an artefact from copy pasting in stackoverflow.
If that does not work, it means that you are referencing another HTML file (most likely a 404 error) in a <script src="..."></script> somewhere in your code, or that you have a syntax error somewhere else.
I've been learning MEAN stack technologies for a week now. I'm having a problem using a custom service in Angular. I try to get a .json file, but when the app loads & I examine the loaded resources in the web inspector, the ison file is showing the code from my index.html file. Does anyone know why this is happening and how to fix it?
This is the custom service:
angular.module('StudentService', [])
.factory('Students', ['$http', function($http) {
return $http.get('app/students.json');
}]);
I don't understand how it could be loaded with the title 'students.json' but show up in the web inspector as html code. Any help would be greatly appreciated.
Change your code like this
$http.get('app/students.json')
.then(function(res){
$scope.todos = res.data;
});
return $scope.todos;