I had a look on the following official document of Ionic
http://docs.ionic.io/docs/io-config
First it didn't work (when I run the command to add a new key it always finish with the same error "Unauthorized configuration value") and then, the document doesn't describe how to get/find the values in my angular controllers (should I use $ionicCoreSettings?).
It would be for me really useful to have a configuration file where I could put my variables, specially the url of my backend, since this one during the development period doesn't have a fixed IP.
Any idea or best practice to suggest about storing and resolving such variables?
I solved my question using angular constant.
To define the constant I add a look at the solution of #Linkmichiel in
is there a way in Angularjs to define constants with other constants?
and I added the use of the constant in the html with the solution of #Nimo using rootscrope in
Can I directly access module constant from HTML under AngularJS
Related
I have an existing angular application and I want to start changing some of it to a vueJS application.
My application, in dev mode, loads all scripts in the main html file (in production mode its bundled into app.js but I want to start testing to dev mode).
I want to change on of the states to use vue, so I read it's possible in the following way: https://medium.lucaskatayama.com/migrating-from-angular-to-vuejs-71277cdc3dd9
However, I want to use a .vue files syntax and I don't know if that's possible without using webpack or any other bundler in dev mode.
So my question is - Is that possible? Can I use .vue files inside my ng app with the current configurations? Furthermore, is there a nice way to webpack only the vue files and components (even though I have to initialize them inside and angular controller as it seems).
If there are any good tutorials for adding vue into angular app, I would love to get them, as I failed finding good ones.
Thanks
ngVue member here :)
At Dawex (the company I'm working at), we're using Vue within a big AngularJS application, with ngVue. It's in production for several months now and it works very well. You can find more informations on this article I wrote before last summer: https://medium.com/dailyjs/how-to-migrate-from-angularjs-to-vue-4a1e9721bea8. Hope that helps!
That could be tough, because the build for the vue code will basically be a separate application.
One thing you could do is build them as completely different parallel apps, use two build steps, include two javscript files and then use window.postMessage to communicate between the two.
So for example your current application will come to a point where a particular div is to contain vue code instead of angular. You could then post a message from your angular code, telling the vue app to load into that div, e.g.:
window.postMessage({ app: 'vue', bind: '#vue-content' })
The vue app, instead of binding on DOMContentReady would listen to window events, and then bind to the element it receives. It would then communicate back to the host app by posting messages also. This would keep them fairly seperate and allow you to build them independently.
I am working on a project that uses Angular1, we hit the problem where when we change an html template the users will not see the change until a hard refresh is performed. Ideal would be to have the cache service to check a timestamp and invalidate the cached file. As an example now I edited a template used by the $stateProvider.
My questions is what solutions or best practices are used to solve the problem?
P.S since our JS files are combined in 1 file we fixed the problem there by appending a timestamp in the script tag from our PHP backend
Interesting question! We've had the same issue in a project that uses Angular1.x. We solved it using angular-cache-buster.
It basically helps you put a httpInterceptor. All you need is have ngCacheBuster in module dependency injection, and inject httpRequestInterceptorCacheBusterProvider in the .config of your app to set the match list.
For example,
httpRequestInterceptorCacheBusterProvider.setMatchlist([/.*api.*/], true);
this tells it to cache everything except REST api requests. You can learn more about the configuration here.
I am using angular-translate in my angular application.
I have set default language to German using
$translateProvider.preferredLanguage('de')
I am also using $translate.use(langKey) which sets the languages at runtime.
But when i sets the language to english at runtime and then after that when i reload the page it sets the language again to German. what i want is that
After a refresh the page should be loaded in the language that it was set to before.
Is there something in angular which i can use or I have to write my own logic to implement the above.
There are already some implementations for storing the chosen language built into angular-translate (via add-on modules). Have a look at https://angular-translate.github.io/docs/#/guide/10_storages which provides built-in solutions for cookies and localstorage. Dealing with this manually is not that trivial as it looks at first sight.
With the module it is as easy as dropping in one javascript file and adding the following call when configuring the translate provider:
$translateProvider.useLocalStorage();
you can use localstorage to keep the value in the cache, just inject the service $window in your controller and use this sintax:
$window.localStorage.setItem('lan', 'en');
the cache keep the value even after the browser is closed.
When you update the page just check if the key is present.
if($window.localStorage.getItem('lan') === 'en'){
//do something
}
Local storage is bound to a specific domain,
You can see use the tab resources of the chrome web tools to check the existing key-value pairs
more info in the doc
https://developer.mozilla.org/it/docs/Web/API/Window/localStorage
I have a little issue with passing an angular variable as an argument in the action attribute of a commandlink.
I tried: action="#{saisieConge.setCongeWithId({{row.congeId}})}"
and action="#{saisieConge.setCongeWithId(row.congeId)}"
Either way, it is not working :( We just start to integrate angular in our web application and change everything from jsf to angular would be to much of work at ounce. That is way I need to find a way to combine the two.
I would like to avoid passing the angular variable as a param or with f:setPropertyActionListener which would need to create a variable in my bean.
Thanks !
in order to make nice urls, I decide to remove the # from my ulrs using the tip from the following question Removing the fragment identifier from AngularJS urls (# symbol) Now, I realized that my urls are not working if I try a direct access to them. from the given example in the related question if put the url below directly in the browser http://localhost/phones
I'll get a 404.
Any idea how to solve this?
You need to write server side code that will generate the page that you were previously depending on the client-side JavaScript to generate.
This will then be the initial view for that URL.
If the client supports JavaScript (and the JavaScript doesn't fail for any reason) it will then take over for future interactions.
Otherwise, the regular links and forms you (should) have in the page will function as normal without JS.