I've been trying to develope some mobile app and I'm thinking of picking up AngularJS+ZeptoJS.
But there is one problem - I couldn't find anything about accessing the bluetooth actions with Angular. I've looked through some tutorials but haven't find a single word about it. I've been thinking if it is even possible?
I mean - accessing bluetooth in mobile-app ( created in angularjs, converted in phonegap ). Not mobile-web.
I'm quite new with mobile app programming so please don't hurt me :)
And also a little bit desperate to get the answer..
It looks like there is a PhoneGap plugin for accessing Bluetooth:
https://build.phonegap.com/plugins/23
Once you get the plugin installed, you can access it via Angular. I recommend creating a service for interacting with it. It will go a little something like this:
App.factory('bluetooth', function() {
var bluetoothSerial = cordova.require('bluetoothSerial');
return {
sendMessage: function(message) {
// interact with bluetoothSerial
}
};
});
Then, your controllers can require it:
App.controller('appCtrl', function(bluetooth) {
$scope.communicate = function() {
bluetooth.sendMessage("all your base are belong to us");
};
});
Good luck!
Related
I have seen numerous flavors of this question, but cannot seem to find the right answer for my issue.
The problem with the following is the service cannot share data between the other modules/controllers. It does not act as a singleton. Meaning, if I add windows in dashboard and call windowService.getWindows() I will see the windows I added. But if I do the same from myWidget after adding them via the dashboard, or vice versa, the collection in the service is empty as if the other module/controller hasn't added anything. What am I doing wrong here? I expected a single collection of windows to be retained by the service and be accessible from either of my other modules.
Module 1
var dashboard = angular.module('dashboard', [windowServiceModule]);
dashboard.controller('DashboardController', function DashboardController(windowService) {...stuff});
Module 2
var myWidget = angular.module('myWidget', [windowServiceModule]);
myWidget.controller('MyWidgetController', function MyWidgetController(windowService) {...stuff});
Service
var windowServiceModule = angular.module('windowService', []);
windowServiceModule.service('windowService', function() {
var windows = [];
this.addWindow = function(win)
{
this.windows.push(win)
}
this.getWindows = function()
{
return this.windows;
}
});
EDIT: while walking through other answers, I tried this: Share a single service between multiple angular.js apps
That exposed a part of the problem, I think. The above suggests iterating over a $rootScope collection, but in my case, there is only one $rootScope in the collection and it is not the same between dashboard and myWidget. As it is, myWidget is in an iframe and now I'm thinking I need to take a different approach, currently testing a solution similar to the link I left in the comments.
Ok, I'm pretty sure my initial code would have worked fine if the myWidget wasn't being loaded in an iframe. I have a dashboard that can open windows embedded or popped out and I wanted to use the service to manage the windows and handle passing state back and forth since popping out the iframe requires a reload of the page.
Anyways, I now have something like this in place in the service and it is working:
var windowServiceModule = angular.module('windowService', []);
windowServiceModule.service('windowService', function($window) {
...stuff
var parentScope = $window.parent.getScope();
...other stuff
After that you can access anything in the parent's scope with parentScope. I pass in the angular $window.
Just for reference, getScope() already existed in the parent JSP file. This is what is looks like:
function getScope()
{
return angular.element($("#DashboardController")).scope();
}
When I build the hybrid app using crosswalk - android Back button is not working with onsen ui framework(using angular js).
Below is the code which i have used...
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown() {
// Handle the back button
alert("Backbutton is pressed!");
var element = document.querySelector(".navigator-container");
var scope = angular.element(element).scope();
scope.popPage();
}
As #kabaehr mentioned you may need to wait for everything to be ready first. That means either of the following:
document.addEventListener('deviceready', function(){ ... });
ons.ready(function(){ ... });
The other thing which may be specific to Onsen UI is the fact that it's already doing some handling of that event, so you could try to use the API which is given for that.
Here are the docs for that API. Currently it seems like the method which you want is:
ons.setDefaultDeviceBackButtonListener(onBackKeyDown)
Although that method doesn't sound too nice so maybe the name will change in the future.
For now feel free to try if any of these options seem to work for you.
I'm just begining with angularJS and I want add the option of translation to my application.
I tried this fonction with one variable for my first test with 2 button which refer to 2 differents languages, the local language is ENGLISH and the second is FRENSH and it work but the probleme is after refreshing my application, this variable turn to the local language. how can I resolve this problem . this is my code on angularJS.
'use strict';
var app = angular.module('app', ['pascalprecht.translate']);
app.config(function($translateProvider) {
$translateProvider.fallbackLanguage('en');
$translateProvider .translations('en', {
msg : 'Hello',
})
$translateProvider.translations('fr', {
msg : 'bonjour'
});
$translateProvider.preferredLanguage('en');
});
app.controller('Ctrl', function($translate, $scope) {
$scope.changeLanguage = function (langKey) {
$translate.use(langKey);
};
});
Thank you
You will probably want to use some kind of a localStorage service to save the selected language.
You'll have to decide which kind of persistence (by session? by user?) you want to attain, to choose the best model of persistence to use...
You should use a way to persist data during life time of your aplication.
for example you can use cookies.
But if you want to do it angular way you can use $localStorage or $sessionStorage from this repo
there are other repositories as well.
After that when user refresh the page you can check
for language information saved in your session($sessionStorage) or browser($localStorage) and display the right language.
as #MarcoS said, if you want to show another
language for specific users you should store and get language information
from database.
goodluck !
I am using angularJS 1.3 with angularfire and firebase.
I did create some factories that encapsulate the firebase object, and it works very well. The 3 way data binding is really cool.
I am planning to build a large application using firebase for data persistance, but I am facing a massive issue :
In my business model, I want some models/collections to support 3-way data binding, but I want other collections not to be updated live.
Some clients visiting the resulting website might be scared when they see the website's content being updated live - and I don't want that.
Imagine you are reading an article , somehow long and complexe, and you put your attention into a paragraph which you have issues understanding, and suddenly, the paragraph disappears and is replaced by a new one. Now imagine that you have no idea about web development. You might start to think to consult some professionnal about your mental health, or think your computer is hacked. Who knows !
So I would like to disable the 3 way data binding for this article, and avoid this border-line client phone calls. The only solution I found would be not to use fireangular, and use the beyond angularfire documentation section instead, and remove the following lines :
ref.on("value", function(snapshot) {
$timeout(function() {
$scope.data = snapshot.val();
});
});
This would fix the issue, but then in my admin interface, I would have to implement a second Factory so admin users can access the 3 way data binding for articles - Which is not very DRY.
In my artitcle controller, I would have to write something like this :
$scope.loadArticle = function(){
if(UserService.type === 'admin'){
AdminArticleFactory.get(id);
}
else{
ArticleFactory.get(id);
}
}
Is there any other way of setting up firebase to disable the pull updates?
Yeah, that is what I also ran into. Sometimes you will repeat yourself with Firebase. Also when storing data. I would recommend just making a function to save the data that you don't want to be updated instantly.
<button ng-click="saveChanges">save</button>
In controller
$scope.saveChanges = function () {
var obj = $firebaseObject(ref);
obj.foo = "bar";
obj.$save().then(function(ref) {
ref.key() === obj.$id; // true
}, function(error) {
console.log("Error:", error);
});
}
edit
To desync a firebase object/array you can follow this answer: How to disassociate angularFire bound object?
I'm actually doing an app for a stage, which has to be responsive design. So it has to work on Mobile, Computer and Tablet. For this app I need to use the google api Place Autocomplete. The problem with that is that it doesn't work on mobile, whether it's iOS or android... on another forum i found a piece of code which is the following, supposed to resolve this problem :
.directive('disableTap', function($timeout) {
return {
link: function() {
$timeout(function() {
// Find google places div
_.findIndex(angular.element(document.querySelectorAll('.pac-container')), function(container) {
// disable ionic data tab
container.setAttribute('data-tap-disabled', 'true');
// leave input field if google-address-entry is selected
container.onclick = function() {
document.getElementById('autocomplete').blur();
};
});
},500);
}
};
});
The problem is that i've never used Angular JS in my life and i do'nt have the time to learn it now, maybe after i'm done with the app... and this function is supposed to make it works on mobile, but i don't know how to use it. Could you guys give me a hand and explain me how to insert this code in my project and how to use it? I'm really in need and some help would be very appreciated. by the way, i'm not english native so if you didn't udnerstand something in my post just tell i'll try to say it better ^-^
I hope you will be able to help me, thanks :)
This should be the same in jQuery, but you have to adapt it yourself. You require also the underscore.js library. Hope this helps.
window.setTimeout(function() {
// Find google places div
_.findIndex($(document.querySelectorAll('.pac-container')), function(container) {
// disable ionic data tab
container.setAttribute('data-tap-disabled', 'true');
// leave input field if google-address-entry is selected
container.onclick = function() {
$('#autocomplete').blur();
};
});
},500);