I am learning Angular2 using JavaScript(No TypeScript) with the help of this video. The code worked fine, until I started using a service. It starts to give me the following error -
Uncaught ReferenceError: Class is not defined
I understand that Class is not defined in JavaScript, but I assume that it's a part of Angular2 library. Here's my complete app.js code -
(function() {
var Component = ng.core.Component;
var bootstrap = ng.platformBrowserDynamic.bootstrap;
var QuoteService = Class({
constructor:function () {
this.quotes = quotes;
},
getRandomQuote: function (params) {
var randomIndex = Math.floor(Math.random()*quotes.length);
return this.quotes[randomIndex];
}
});
var RandomQuoteComponent = Component({
selector:'random-quote',
template:'<em>{{quote.line}}</em> - {{quote.author}}'
})
.Class({
constructor:function () {
var quoteService = new QuoteService();
this.quote = quoteService.getRandomQuote();
}
});
var AppComponent = Component({
selector: 'my-app',
directives:[RandomQuoteComponent],
template:
'<h1>Random Quotes</h1>'+
'<p><random-quote></random-quote></p>'
})
.Class({
constructor: function () {
//empty
}
});
document.addEventListener('DOMContentLoaded',function () {
bootstrap(AppComponent);
})
var quotes = [
{
"line": "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.",
"author": "Brian W. Kernighan"
},
{
"line": "Walking on water and developing software from a specification are easy if both are frozen.",
"author": "Edward V Berard"
},
{
"line": "It always takes longer than you expect, even when you take into account Hofstadter's Law.",
"author": "Hofstadter's Law"
},
{
"line": "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.",
"author": "Rick Osborne"
},
{
"line": "In theory, there is no difference between theory and practice. But, in practice, there is.",
"author": "Jan L. A. van de Snepscheut"
},
{
"line": "Measuring programming progress by lines of code is like measuring aircraft building progress by weight.",
"author": "Bill Gates"
},
{
"line": "There are 2 hard problems in computer science: cache invalidation, naming things, and off-by-1 errors.",
"author": "Leon Bambrick"
},
{
"line": "Nine people can't make a baby in a month.",
"author": "Fred Brooks"
},
{
"line": "If debugging is the process of removing software bugs, then programming must be the process of putting them in.",
"author": "Edsger Dijkstra"
},
{
"line": "The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.",
"author": "Tom Cargill"
}
];
})();
This line var QuoteService = Class({...}); is responsible for this error. Any idea what could be going wrong in this case?
I think you should write as follows:
var Class = ng.core.Class;
var QuoteService = Class({ ...
https://angular.io/api/core/Class
Related
I have implemented my app in English, and I am looking for a way to cover 3 other langs.
I have thought to create a module langs.js
and then, create a map like this one:
const texts = {
"spanish": {
"home": {
"header": "Hello",
"footer": "World"
},
...
},
...
}
But... is that the way? Any ideas? This is my fist time doing something like this.
Trying to add hovers to add hovers to my VS Code extension. I was able to syntax highlighting and commands to work, but stuck on adding this hover feature.
I think my blocker is how to properly implement the HoverProvider API. I'm doing a simple test below for a hover provider that activates when a series of tokens are recognized as the keyword HELLO. The hover I've implemented in my testing. I'm using vsce package to package and test my extension locally.
My command for the extension works, but when I hover over the word "HELLO", my hover does not appear.
./client/extension.js
const vscode = require('vscode');
function activate(context) {
console.log('Congratulations, your extension "star-rod" is now active!');
let disposable = vscode.commands.registerCommand('extension.mamar', () => {
vscode.window.showInformationMessage("The Star Rod... is powerful beyond belief. It can grant any wish. For as long as we can remember, Bowser has been making wishes like, for instance... 'I'd like to trounce Mario' or 'I want Princess Peach to like me.' Of course, Stars ignore such selfish wishes. As a result, his wishes were never granted.");
});
context.subscriptions.push(disposable);
vscode.languages.registerHoverProvider('javascript', {
provideHover(document, position, token) {
const range = document.getWordRangeAtPosition(position);
const word = document.getText(range);
if (word == "HELLO") {
return new vscode.Hover({
language: "Hello language",
value: "Hello Value"
});
}
}
});
}
function deactivate() { }
module.exports = {
activate,
deactivate
}
./package.json
{
"name": "star-rod-script",
"publisher": "sonicspiral",
"displayName": "Star Rod Script",
"description": "Syntax highlighting for Paper Mario 64 ROM patching tool",
"version": "1.0.1",
"repository": {
"type": "git",
"url": "https://github.com/gregdegruy/star-rod.git"
},
"categories": [
"Programming Languages"
],
"activationEvents": [
"onCommand:extension.mamar",
"onLanguage:star-rod-script"
],
"engines": {
"vscode": "^1.31.0"
},
"main": "./client/extension.js",
"contributes": {
"capabilities": {
"hoverProvider": "true"
},
"commands": [
{
"command": "extension.mamar",
"title": "Mamar"
}
],
"languages": [
{
"id": "star-rod-script",
"extensions": [
".bpat",
".bscr",
".mpat",
".mscr"
],
"aliases": [
"Star Rod Script",
"mscr"
],
"configuration": "./language-configuration.json"
}
],
"grammars": [
{
"language": "star-rod-script",
"scopeName": "source.mscr",
"path": "./syntaxes/mscr.tmLanguage.json"
}
]
},
"devDependencies": {
"js-yaml": "^3.12.1",
"vscode": "^1.1.29"
}
}
Your code allowed me to get Hovers working in my first extension. I think your mistake is having javascript as the selector: vscode.DocumentSelector. Is that there from code you copied? That should probably be set to star-rod-script for your extension.
I also don't have "capabilities": {"hoverProvider": "true"} in mine. I changed your code to:
disposable = vscode.languages.registerHoverProvider('star-rod-script', { // or 'star rod script'
//....
});
context.subscriptions.push(disposable);
I don't know the nuances of how you apply your extension to certain documents, but it doesn't look like you're trying to apply the hover to javascript docs. You need the selector to include the docs your extension works with. In my case that's covered by my extension name which is the language mode that shows up in the vscode status bar. More info on document-selectors.
Not sure if it's needed, but I also took the return and pushed it onto the subscriptions array. Works without that, but I think that's proper??
Your package.json looks a bit odd. I bet your extension is not activated. The "contributes/capabilites" value is something I haven't seen before. Remove that and instead change your activationEvents to:
"activationEvents": [
"onLanguage:star-rod-script"
],
I have created an intent in Alexa console and corresponding function in AWS Lambda (Javascript) and it's working for the most part as expected. However I can't seem to gather the slot values.
exports.handler = function (event, context, callback) {
const alexa = Alexa.handler(event, context, callback);
alexa.APP_ID = APP_ID;
let config = new Map();
let character = this.event.request.intent.slots.character.value;
if (!character)
character = 'default';
let handlers = getHandlers(config);
alexa.registerHandlers(handlers);
alexa.execute();
};
The error I'm receiving in the Alexa test is mostly not helpful and I'm generally finding debugging Alexa quite painful. I have tried testing directly from within Lambda and passing a JSON payload but I'm unsure if this would work anyway.
Can someone comment on whether this.event.request.intent.slots.character.value; would be correct? I can't see this on official AWS pages but in other peoples' examples.
Lastly, the payload from Alexa test has this included:
"request": {
"type": "IntentRequest",
"requestId": "amzn1.echo-api.request.43808260-5aaa-4837-9f28-4eaccb7c9b3c",
"timestamp": "2018-05-31T00:49:08Z",
"locale": "en-AU",
"intent": {
"name": "playSeinfeldQuoteIntent",
"confirmationStatus": "NONE",
"slots": {
"character": {
"name": "character",
"confirmationStatus": "NONE"
},
"position": {
"name": "position",
"confirmationStatus": "NONE"
}
}
}
}
I would have expected it to have the values on the slots included here but they're not so this may be the issue.
Any suggestions would be really helpful.
Edit: I found that I was capturing the values OK but the first letter of each variable was being capitalised. I guess because they are peoples' names Alexa is capitalising them. I hadn't considered that.
Can you guys teach me on how to use jsoniq to display both of the book name which is robin cruose and tom jones? i've gone through some research but no matter how i do, it's always wrong.
{
"books": {
"reader": {
"Read": {
"book": {
"name": "Robinson Crusoe",
"author": "Daniel Defoe"
}
},
"HaventRead": {
"book": {
"name": " Tom Jones",
"author": "Henry Fielding "
}
},
"_type": "Ken Rawing"
}
}
}
This is how i did in zorba.io and it got lots of error, i am very sure the way i did is totally wrong. Please teach me
for $reader in collection("books"),
$read in collection("books"),
$book in collection ("books")
where $reader.type eq "Ken Rawing"
return $book
Getting some leaf values from a JSON document is done with the navigation syntax, which is the . notation.
It doesn't need a for clause, as iteration is implicit with the ..
Assuming the object is stored in the variable $content, $content.books.reader navigates to the object with the fields Read and HaventRead. Calling jnlib:values() then gets the two objects in there, and then one continues all the way to the name with .book.name.
The query is like so (most of it is actually the input document itself, which is typically stored in a file or a data store instead):
jsoniq version "1.0";
import module namespace jnlib = "http://jsoniq.org/function-library";
(: That's the input document, stored in a global variable :)
declare variable $content := {
"books": {
"reader": {
"Read": {
"book": {
"name": "Robinson Crusoe",
"author": "Daniel Defoe"
}
},
"HaventRead": {
"book": {
"name": " Tom Jones",
"author": "Henry Fielding "
}
},
"_type": "Ken Rawing"
}
}
};
(: That's the query :)
jnlib:values($content.books.reader).book.name
Mind the jsoniq version="1.0";, which activates the native JSONiq parser (the default parser on try.zorba.io is XQuery).
It can also be tested in zorba.io
Note
JSONiq also exists as an extension to XQuery, in which case navigation is done with function calls, as the . is a valid character in XML names. However, it is not recommended to use this unless you have XML to deal with as well.
jnlib:values($content("books")("reader"))("book")("name")
There are a number of functions I want to use across various couchdb view map functions.
I am trying to use the commonjs require pattern.
Using the following design doc why does the test1 require statement work whereas the test2 require statement does not seem to work ?
How else can I reuse functions across multiple couchdb views ?
{
"_id": "_design/app",
"_rev": "29-876296b1278db067378635a5f3309aa3",
"views": {
"test1": {
"map": "function (doc) {\n var setting1 = require('views/lib/config').setting1;\n emit(doc._id, setting1);\n }"
},
"test2": {
"map": "function (doc) {\n var fn1 = require('views/lib/sharedFunctions').fn1;\n emit(doc._id, fn1(doc));\n }"
},
"lib": {
"config": "exports.setting1 = 'a';exports.setting2 = 42",
"sharedFunctions":"exports.fn1 = function (doc) {\n return 'fn1 read doc ' + doc._id;\n }"
}
}
}
further info: I am currently using the 'grunt-couchapp' plugin for managing the uploading of my design docs from my project src directories
Just adding this as the answer so that this question stops appearing unanswered. The OP found that upgrading to 1.3 (from 1.2) fixed the problem.