I'm pretty new to Angular. I'm trying to incorporate the openPGP library to my app (client side). I need some help on how to incorporate a javascript library to the Angular App. Thanks!
I'm reading through the openPGP docs https://github.com/openpgpjs/openpgpjs
and the example provide in the docs is below:
var openpgp = require('openpgp');
var key = '-----BEGIN PGP PUBLIC KEY BLOCK ... END PGP PUBLIC KEY BLOCK-----';
var publicKey = openpgp.key.readArmored(key);
var pgpMessage = openpgp.encryptMessage(publicKey.keys, 'Hello, World!');
I prefer not to use require to source in openPGP to my app. So I've tried
var openpgp = window.openpgp; which seems to not throw any error here. However, I get TypeError: Cannot read property 'key' of undefined error.
I should mention that I have installed openpgp using bower install.
I'm still trying to figure out what I can do to refer to openPGP in the Angular app. Thanks.
If you're on the client-side, use a script tag, like
<script src="/path/to/openpgp.js"></script>
instead of require()
Related
I am building a UI into a JAR for Spring Server. I have a bunch of Angular JS pages. I want to pass in a command line argument to my jar that tells it where the API server is like so:
java -jar application.jar --api=http://ip:9000
So my application.properties file has:
url=${api:http://localhost:9000}
The way I am currently doing is it just having a hardocoded js config file and on each of my .html pages:
<script src="../js/appName/config.angular.js"></script>
Which contains:
var configData = {
url:"http://localhost:9000"
};
And called in each file:
$scope.apiUrl = configData.url;
How do I tap into the applications.properties file that I can override with my JAR command line parameter during runtime vs. the way it has been coded now.
When you pass a value from command line and the same property name is present in properties file then spring boot overrides the value from command line. So to achieve what you want do something like this
In application.properties
#this is default value
app.url=localhost:8080
Create a class to map the properties value or you can use existing class or something else based on your project structure.
#Component
public class Sample {
#Value("${app.url}")
private String url;
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
}
Now when your execute a jar with argument --app.url="someserver:9090" the value will be overriden and you can use this value anywhere.
Note it will also work if you try to access the properties value directly in jsp using expression.
Try it, it works. I have used the same thing in my latest project which is a composite microservices and each component need each others url.
[Edit]
Reference : http://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-external-config.html
Am I getting it right: The client part is delivered by the application? So the part of the last sentence 'during runtime' has more the meaning of 'bootstrap/initial loading', right? One (old school) approach is to provide the entry html (e.g. index.html) through the application (a simple template engine) and provide the needed information with a setter in a JS config object:
// pseudo js code with thymeleaf
<script th:inline="javascript">
/*<![CDATA[*/
myConfig.url = [[${#httpServletRequest.remoteHost}]];
/*]]>*/
</script>
This is just a sample that will only set the remote host name but I think you get the idea.
Side note: I still don't really get why do you have to set this. If the application contains the client code, why do you work with absolute URLs for remote calls? (Disclaimer: I have only experience in Angular(2) and not with AngularJS)
I'm on single page app using typescript and angular.
I'm using ng.Resource to fetch data from webapi
productResource.get({ userName: login.userName, password: login.password }, (data: Models.ICompany) => {
this.localStorageService.set<Models.ICompany>("CompanyData", data);
});
I've added angular-local-storage.d.ts file and also installed angularlocalstorage
but when I try to store the promise returned from webapi I'm getting an error "unable to get propery 'set' of undefined or null reference". Also I could not find 'set' / 'get' methods in angular-local-storage.js file. I'm guessing the error is producing because the 'set'/'get' methods are unknow in .js file.
Could you please help me to resolve this issue.
Or is there any best way to store the data in browser using angular.
I was having some trouble using localstorage in typescript too. What I did was:
I found a js file on github with some functions to access localstore. I wrote the same js file in Typescript and used that file. This has a cookie fallback.
here is the link to my version :
https://gist.github.com/davidcarm/eedb29feb25a7130d0f9ac01a7d11d3f (scroll to bottom)
once you imported the SimpleStore.ts file you just use these functions:
constructor(private simpleStore: SimpleStore){}
// to save a value
simpleStore.store('value_name',value);
// to access a value
simpleStore.store('value_name',undefined);
// to delete a value
simpleStore.store('value_name',null);
Cheers!
I get the following error "ReferenceError: printStackTrace is not defined",
when I tried to use StackTrace in my angular aplication.
stacktrace.js changed the API for v1.0.
You'll want to use
var callback = function(frames) { console.log(frames); };
var errback = function(err) { console.log(err.message); };
StackTrace.get().then(callback).catch(errback);
as suggested by the docs.
If all you want to do is parse an Error you can just use error-stack-parser
Please refer to the v0.x -> v1.x migration guide if you were using the old version.
By the way, if you need to use version 0.x you can find it in the stable branch on GitHub
I am trying to get Browserify working Marionette. More precisely I'm trying to figure out how to require the commands Backbone.Wreqr.Commands.
I keep getting this error
Uncaught TypeError: Cannot read property 'Commands' of undefined
With this code
Backbone = require('../shims/backbone');
module.exports = new Backbone.Wreqr.Commands;
This is my setup
main.coffee (browserify entry point)
app = require('./app')
Backbone = require('./shims/backbone')
commands = require('./config/commands')
shims/backbone
module.exports = Backbone
shims/marionette
module.exports = Backbone.Marionette
config/commands
Backbone = require('../shims/backbone')
module.exports = new (Backbone.Wreqr.Commands)
As you can see from above I decided to not use browserify for the main dependencies so essentially I'm including them in the page globally but then using these custom shims above to include them in my app.
The problem I'm having is it seems Wreqr does not exist on the Backbone object. I guess that sort of makes sense as I saw in the source this is added with the Marionette library.
But how exactly do I reference it here?
I found a somewhat related problem with require-js https://github.com/marionettejs/backbone.marionette/issues/1297
Officejs library can be used inside angular controller as following way by adding library reference https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js to index page
function sendRequest() {
// Create a local variable that contains the mailbox.
var mailbox = Office.context.mailbox;
mailbox.makeEwsRequestAsync(getItemRequest(mailbox.item.itemId), callback);
}
function callback(asyncResult) {
var result = asyncResult.value;
var context = asyncResult.context;
// Process the returned response here.
}
is there any better way to handle these kind of libraries inside angular js project ?
Yeoman generater is there. it has option to create angular project
https://www.npmjs.com/package/generator-office