I am New to angular js and ionic mobile apps, I am getting one error.My doubt is if the user open the app at that time i need to get mobile details like device name,version,model e.t.c..For that i wrote separate controller..
<!-- Module File -->
var moduleName = angular.module('InfoModule', ['ngRoute','ui.bootstrap','ngTouch','ngAside','ngDialog','ionic'])
.run(['$rootScope','$location','StorageService',
function ($rootScope,$location,StorageService) {
$rootScope.appInitDone = false;
$rootScope.currentPage = "home";
$rootScope.loginStatus = 0;
}]);
<!-- Controller -->
moduleName.controller('PlatformController', function ($scope,$filter,$rootScope,$apply,$location,$ionicPlatform, $cordovaDevice) {
$ionicPlatform.ready(function() {
$scope.$apply(function() {
// sometimes binding does not work! :/
// getting device infor from $cordovaDevice
var device = $cordovaDevice.getDevice();
console.log(device);
$scope.manufacturer = device.manufacturer;
$scope.model = device.model;
$scope.platform = device.platform;
$scope.uuid = device.uuid;
console.log($scope.uuid);
});
});
});
<!--This is Home Html File-->
<div ng-controller="PlatformController"></div>
<div ng-controller="HomeController">
<input type="textbox" name="searchBox" placeholder="Search Form SomeThing" class="form-control" data-ng-model="someType" ng-click="Search()" style="height:40px;margin-top:50px;"/>
</div>
<!--Injected Links -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.1.0/css/ionic.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.1.0/js/ionic.min.js"></script>
I am getting $cordovaDevice Error and $Injector Mobuler error
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.12/$injector/modulerr?p0=InfoMod…p%3A%2F%2F127.0.0.1%3A50666%2Fjs%2FScriptFiles%2Fangular.min.js%3A17%3A381)
And also where we need to call the Plat Form Controller to get device information .......Please help me.......If you have any other ideas or examples please give me the solution..please....
And Also I tried another way...In module i wrote another way...Like bellow
<!-- If tried Like this i am Getting Injector Modular like above error -->
var infomoduler = angular.module('InfoModule', ['ngRoute','ui.bootstrap','ngTouch','ngAside','ngDialog','ng-bootstrap-datepicker','angular-loading-bar','infinite-scroll','ionic'])
.run(['$rootScope','$location',
function ($rootScope,$location) {
$rootScope.appInitDone = false;
$rootScope.currentPage = "home";
$rootScope.loginStatus = 0;
ionic.Platform.ready(function(){
// will execute when device is ready, or immediately if the device is already ready.
});
var deviceInformation = ionic.Platform.device();
var isWebView = ionic.Platform.isWebView();
var isIPad = ionic.Platform.isIPad();
var isIOS = ionic.Platform.isIOS();
var isAndroid = ionic.Platform.isAndroid();
var isWindowsPhone = ionic.Platform.isWindowsPhone();
var currentPlatform = ionic.Platform.platform();
var currentPlatformVersion = ionic.Platform.version();
ionic.Platform.exitApp(); // stops the app
}]);
var infomoduler = angular.module('InfoModuler', ['ngRoute','ui.bootstrap','ngTouch','ngAside','ngDialog','ng-bootstrap-datepicker','angular-loading-bar','infinite-scroll','ionic'])
.run(['$rootScope','$location','$ionicPlatform','$apply','$cordovaDevice',
function ($rootScope,$location,$ionicPlatform,$apply,$cordovaDevice) {
$rootScope.appInitDone = false;
$rootScope.currentPage = "home";
$rootScope.loginStatus = 0;
ionicPlatFormBuddy();
function ionicPlatFormBuddy(){
$ionicPlatform.ready(function() {
$scope.$apply(function() {
// sometimes binding does not work! :/
// getting device infor from $cordovaDevice
var device = $cordovaDevice.getDevice();
debugger;
console.log(device);
$scope.manufacturer = device.manufacturer;
$scope.model = device.model;
$scope.platform = device.platform;
$scope.uuid = device.uuid;
console.log($scope.uuid);
});
});
}
}]);
Is it Correct to write the code In Module Please Give me the Solution..please..
Please add this plugin
cordova plugin add org.apache.cordova.device
Add below line of code in any of your controller file,
Controller
$ionicPlatform.ready(function() {
//find application version
if (window.cordova) {
var uuid = $cordovaDevice.getUUID();
var cordova = $cordovaDevice.getCordova();
var model = $cordovaDevice.getModel();
var platform = $cordovaDevice.getPlatform();
var platformVersion = $cordovaDevice.getVersion();
var mobileDetails = {
'uuid': uuid,
'cordova': cordova,
'model': model,
'platform': platform,
'platformVersion': platformVersion,
};
console.log('Mobile Phone details:', mobileDetails)
}
});
In order to get access to the device's details, you need to install the device plugin (org.apache.cordova.device).
navigate to your ionic/cordova project (where www lives) and type the following command.
cordova plugin add cordova-plugin-device
To get more detail about ngCordova take a look at this link
Note, you need to have ngCordova plugin added to your project. You can download it from here or via bower:
bower install ngCordova
In your code include the ngCordova script e.g.
<script src="../js/ng-cordova.js"></script>
Related
I'm learning Solidity (for smart contracts) and now need to design a UI to interact with a deploy contract.
Note: If the question is not relevant to this forum, please kindly let me know (instead of downvoting) and I'll remove it.
My HTML and .js files are as below. The problem is that, when I include both "distribute()" and "update_exchange_rate()" functions in .js file, my HTML file would not work. But I wouldn't have any problem if I remove either of them from .js file.
Question: Why am I having this problem? How to solve the above problem? Can I have multiple functions (definitions) in window.app?
Edit: If I put both functions in .js files, I also get webpack error. But the error will disappear if I remove one of the functions.
<!DOCTYPE html>
<html>
<head>
<script src="./app.js"></script>
</head>
<body>
<h1>MetaCoin</h1>
<h2>Example Truffle Dapp</h2>
<br>
<br><label for="amountB">Exchange rate:</label><input type="text"
id="amountA" placeholder="e.g., 95"></input>
<br><label for="receiverA">ReceiverA:</label><input type="text"
id="receiverA" placeholder="e.g., 95"></input>
<br><label for="receiverB">ReceiverB:</label><input type="text"
id="receiverB" placeholder="e.g., 95"></input>
<br><br><button id="send1" onclick="App.distribute()">Send
MetaCoin</button>
<br><br>
<br><label for="amountB">Exchange rate:</label><input type="text"
id="amountB" placeholder="e.g., 95"></input>
<br><br><button id="send2"
onclick="App.update_exchange_Rate()">update_exchange_Rate</button>
<br><br>
<br>
</body>
</html>
and my js file is:
import "../stylesheets/app.css";
import { default as Web3} from 'web3';
import { default as contract } from 'truffle-contract'
import metacoin_artifacts from '../../build/contracts/MetaCo.json'
var MetaCo = contract(metacoin_artifacts);
var accounts;
var account;
window.App = {
start: function() {
MetaCo.setProvider(web3.currentProvider);
web3.eth.getAccounts(function(err, accs) {
if (err != null) {
alert("There was an error fetching your accounts.");
return;
}
if (accs.length == 0) {
alert("Couldn't get any accounts! Make sure your Ethereum client is
configured correctly.");
return;
}
accounts = accs;
account = accounts[0];
});
},
setStatus: function(message) {
var status = document.getElementById("status");
status.innerHTML = message;
},
distribute: function() { // XXX Here is where the problem occures!
var amountA = parseInt(document.getElementById("amountA").value);
var receiver1= document.getElementById("receiverA").value;
var receiver2 = document.getElementById("receiverB").value;
var meta;
MetaCo.deployed().then(function(instance2) {
meta = instance2;
return meta.distribute(receiver1,receiver2, amountA,{from: account});
})
}
update_exchange_Rate: function() { // XXX Here is where the problem occures!
var amountB = parseInt(document.getElementById("amountB").value);
var meta1;
MetaCo.deployed().then(function(instance3) {
meta1 = instance3;
return meta1.update_exchange_Rate(amountB,{from: account});
})
}
};
window.addEventListener('load', function() {
if (typeof web3 !== 'undefined') {
console.warn("Using web3 detected from external source. If you find
that your accounts don't appear or you have 0 MetaCoin, ensure you've
configured that source properly. If using MetaMask, see the following
link.
Feel free to delete this warning. :)
http://truffleframework.com/tutorials/truffle-and-metamask")
// Use Mist/MetaMask's provider
window.web3 = new Web3(web3.currentProvider);
} else {
console.warn("No web3 detected. Falling back to http://localhost:8545.
You should remove this fallback when you deploy live, as it's
inherently
insecure. Consider switching to Metamask for development. More info
here:
http://truffleframework.com/tutorials/truffle-and-metamask");
// fallback - use your fallback strategy (local node / hosted node +
in-dapp id mgmt / fail)
window.web3 = new Web3(new
Web3.providers.HttpProvider("http://localhost:8545"));
}
App.start();
});
Let's take only this button, the other has the exact same problem...
<button id="send2" onclick="App.update_exchange_Rate()">update_exchange_Rate</button>
The onclick attribute expects to receive a Function. That function is then called on every click. But the function does not return a function itself...
App.update_exchange_Rate() will get executed as soon as that part is seen by the browser, and it's return value used. But that's not what we want! We want that function to be executed... So we'd need to give the function, and not the call to the attribute, like so:
<button id="send2" onclick="App.update_exchange_Rate">update_exchange_Rate</button>
or
<button id="send2" onclick="function(){App.update_exchange_Rate();}">update_exchange_Rate</button>
Now, if you do that you'll certainly end up in a scope you are not expecting. You aren't using this in the function so I'll skip that scoping part, you can read about it later if need be.
I have an error with my injection in the controller using angular.js
and I know that this is my problem because when I removed ngCookie the error on my console disappeared.
I have read on the web that it is ok the way i'm trying to do it - but for some reason the problem won't go away.
I tried changing the order of ngCookies and ngRoute, tried to write only one of them but I need them both, tried to change my version of angular - but still nothing work.
here is my controller
var mymedical = angular.module("mymed",['ngRoute','ngCookies']);
mymedical.controller('getPersonalCtrl',['$scope','$http',function($scope,$http) {
$http.get("http://localhost:3000/privateData").success(function(data){
$scope.insertDataToDB = data;
console.log(data);
});
}]);
mymedical.controller('insertPersonalCtrl',['$scope','$http',function($scope,$http){
var data = {};
data.email = $scope.email;
data.Tags = $scope.Tags;
data.title = $scope.title;
data.Info = $scope.Info;
data.Category = $scope.Category;
data.file = $scope.file;
data.Recommendation = $scope.Recommendation;
}]);
mymedical.controller('loginCtrl',['$scope','$http','$cookies', function($scope,$http,$cookies){
var user = {};
console.log("i'm in the controller of login");
//user.email = $scope.
//console.log($scope.email);
user.email=$scope.myemail;
user.pass = $scope.pass;
$scope.putCoockie = function(value){
var cook=$cookies.get('cookieEmail');
$cookies.put('cookieEmail',value);
console.log(value);
}
$http.post('http://localhost:3000/getUser', user).then()
}]);
how can I solve this?
Make sure you are loading the correct reference of ngCookies,
<link rel="stylesheet" href="style.css" />
<script src="//code.angularjs.org/1.2.14/angular.js"></script>
<script src="//code.angularjs.org/1.2.13/angular-route.js"></script>
<script src="//code.angularjs.org/1.2.9/angular-cookies.js"></script>
<script src="app.js"></script>
DEMO
Make sure you include ng cookies after ng route in your html page.
I am using the following in my demo project and it is working like charm.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-cookies.min.js"></script>
Also, can you show us the error in console?
So I'm trying to load all the AngularJS scripts which I need in my app when the index.html file loads.
For this I've made this piece of code
<head>
...
AngularJS libaries loads
...
<script>
var main = {
root: [
'core.js'
]
};
var iterateScripts = function(folder, path){
for(var key in folder){
if(key.toLowerCase() === 'root'){
for(var i = 0; i < folder[key].length; i++){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = path + '/' + folder[key][i];
// console.info('script : '+ script.src)
document.getElementsByTagName('head')[0].appendChild(script);
}
} else {
var newPath = path + '/' + key;
// console.info('path : ', newPath, folder[key])
iterateScripts(folder[key], newPath);
}
}
};
iterateScripts(main, 'app/main');
console.info(document.getElementsByTagName('head')[0])
</script>
</head>
This loads the files okay, but I get this error
AngularJS error explanation
After testing back and forth I've concluded that the problem is because the page loads while AngularJS is compiling, which creates the error.
If this is true, how can I load my angular app in a similar fashion before the body tag loads?
You'll have to bootstrap angular yourself instead of using ng-app. Here is the documentation on it: https://docs.angularjs.org/guide/bootstrap.
Once all your scripts are finished loading then you'll run a piece of code that looks similar to this:
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
Which tells angular it is ready to start.
I want to see that 2 contorller called by 1 contorller.
How to make it call? PS. B is in the iframe tag.
Please help me.
now html source structure
A.html (A.js)
B.html (B.js) A children tag - iframe
now js source (A.js)
var app = angular.module('upload',[nUpload]); //nUpload is other module
app.controller('upload',[$scope,nupload,
function($scope,nupload){ //nupload is service of nUpload module
.... //fileupload
}]); ----- **1contorller**
B.js (js file is in the other html tag (iframe))
var app = angular.module('progress',['']);</br>
app.controller('progress',[$scope,,,,] function($scope,,){
... //draw progress }
); ----- **2contorller**
I dream of sources (A.js)
app.controller('upload',,,,
function(,,,){
B.progress = "10%"
}
Mmm.. to share objects between controllers you need an factory.
Try this:
A.js
var app = angular.module('upload',[nUpload,'container']);
app.controller('upload',[$scope,nupload,'Progress',
function($scope,nupload,Progress){
Progress.setProgress("10%");
}]);
B.js
var app = angular.module('progress',['container']);
app.controller('progress',[$scope,'Progress',,, function($scope,Progress){
var progressData = Progress.getProgress();
}]);
container.js
var app = angular.module('container',[]);
app.factory("Progress",[function(){
var progress = "0%";
return {
getProgress: function() {
return progress;
}
setProgress: function(data) {
progress = data;
}
}
}]);
Hope this help you.
;D
I am relatively new to JavaScript and subsequently Node + Express.IO. I am trying to build a page that will track in real time connections made by different 'users' to the server. Consequently, when I do include all the functions from the io module, my prompt() and alert do not work anymore. I am running nodemon app.js from my terminal and no compilation errors are showing up when I do so. The alert and prompt work again when I remove all the io functions.
These are the contents of my index.ejs <body> tag:
<body>
<h1>Chatroom</h1>
<script>
alert("Hello!");
var name = prompt("What is your name?");
io.connect();
io.emit.('got_a_new_user', {name: name});
io.on('new_user', function(data) {
//render this new info in the HTML
var users = data.users;
console.log(users);
if (users != undefined) {
console.log("\n\n\n" + users);
// if users is defined, append the new division containing the username
}
});
io.on('disconnect_user', function(data) {
var users = data.users;
if (users != undefined) {
// If users is defined remove the corresponding HTML element
}
});
</script>
<div id="container">
</div>
</body>
Any help would be much appreciated.
Adding example for the comment added by UKatz,
You will have to connect socket.io from the client as follows,
index.ejs
<script src="http://ip:port/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect('http://ip:port');
socket.emit('got_a_new_user', {name: name});
</script>
Check socket.io documentation for how to connect socket.io with client.