I know this is asking many times but i cannot find a solution. I have a ionic app and i want to get the device UUID. Here are my codes:
Here is my index.html;
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-touch/angular-touch.min.js"></script>
<script src="lib/angular-mocks/angular-mocks.js"></script>
<script src="bower_components/moment/min/moment.min.js"></script>
<script src="bower_components/angular-moment/angular-moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<script src="lib/bootstrap-sweetalert/dist/sweetalert.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
My controller;
.controller('AppCtrl', function($scope, $rootScope, $state, $ionicPlatform, $cordovaDevice) {
$scope.uuid = "";
$ionicPlatform.ready(function() {
if (ionic.Platform.isAndroid()) {
$scope.uuid = $cordovaDevice.getUUID();
} else {
console.log('It is not an android');
};
});
})
When i run the code console is give me
Uncaught ReferenceError: device is not defined
I import ngCordova to app.js module too. I did everything right but still i cannot handle it. Can anyone tell me what am i doing wrong?
Try changing your import order of your script on top of your index page.
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
Please also check if you have installed the cordovaDevice plugin using the command?
cordova plugin add org.apache.cordova.device
The problem was based on the .js files which listed in index.html. I don't know why but when I import <script src="cordova.js"></script> to index.html it is ok. But when call cordova.js from another file for example <script src="js/cordova.js"></script>, it does not work. So, I changed my index.html like;
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-touch/angular-touch.min.js"></script>
<script src="lib/angular-mocks/angular-mocks.js"></script>
<script src="bower_components/moment/min/moment.min.js"></script>
<script src="bower_components/angular-moment/angular-moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<script src="lib/bootstrap-sweetalert/dist/sweetalert.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
And it is ok.
Related
I am trying to create a quiz application.so for that i created a module and controller using angular js , i dont know the problem it showing the
ReferenceError: angular is not defined
<!DOCTYPE html>
<html ng-app="codeWar">
<head>
</head>
<body>
<div class="container">
<div class="page-header">
<h1 class="text-success">Raja's Programming Quiz</h1>
<h3>
<small>Learn about the programming languages below before you decide to take on <thead>
<strong>Programming Quiz</strong></small>
</h3>
</div>
<div class="" ng-controller="listCtrl as list">
<p ng-repeat="pLanguage in list.data">
{{pLanguage}}
</p>
</div>
</div>
<!-- Our Application scripts -->
<script type="text/javascript" src="js/controller/list.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script src="angular/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
I created list module to load the json data in the view
list.js
(function() {
angular
.module("codeWar")
.controller("listCtrl", ListController);
function ListController() {
var view_model = this;
vm.data = programmingLanguageData;
}
var programmingLanguageData = [
{
language:"C",
image_url:"https://lh3.ggpht.com/vrKC4cLAuEFf2-FdDfc02iuCHa5TnPRd-uecZZY8vCzxFnCN-C0PGZ-qsTKeKSIVacA=w300",
paradigm:"Imperative (Procedural) , Structured",
creator:"Dennis Ritchie",
},
{
//json data
}
]
})();
app.js
(function() {
angular
.module("codeWar", []);
})();
Error in log
ReferenceError: angular is not defined - list.js:2:5
ReferenceError: angular is not defined - app.js:2:7
Error: No module: codeWar - angular.min.js:17:76
You need to import angular before using it
<script src="angular/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controller/list.js"></script>
use this example http://jsfiddle.net/Lvc0u55v/3332/
try to change the sequence of the js order upper angularjs then your local script, It should work...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script type="text/javascript" src="js/controller/list.js"></script>
<script type="text/javascript" src="js/app.js"></script>
Give this a try
<script type="text/javascript" src="js/controller/list.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="angular/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
If it doesn't work then put all your scripts between </body> and </html>.
You should load angular.js first
Your scripts order should be like this:
<script src="angular/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controller/list.js"></script>
This is my gulp code for cache busting the js files and it works fine:
gulp.task('getAllJsFiles', function() {
gulp.src('src/app/**/**/*.js')
.pipe(cachebust.resources())
.pipe(gulp.dest('src/app/js/'))
});
The problem I have is, how do I now wire up these files so that my app uses them?
I'm using angular and typescript.
Currently the app.component.js file becomes: Current the app.component.js file becomes: app.component.e072d853.js as an example.
I'm guessing I would just wire that up?
Here is my index file stripped down a bit:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/"></base>
<!-- inject:css -->
<link rel="stylesheet" href="/css/styles.e072d853.css">
<!-- endinject -->
<!-- Js libs -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
<script type="text/javascript" src="/safariPolyFix.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js"></script>
<script>
System.config({
transpiler: 'typescript',
defaultJSExtensions: true,
typescriptOptions: {
emitDecoratorMetadata: true,
},
packages: {
'angular2-google-maps': {
defaultExtension: 'js'
}
}
});
</script>
<script type="text/javascript" src="/angular2_google_maps.js"></script>
<script type="text/javascript"src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script type="text/javascript"src="https://code.angularjs.org/tools/typescript.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/angular2.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/router.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/http.js"></script>
<script type="text/javascript" src="/firebase/firebaseNew.js"></script>
</head>
<body id="container">
<app></app>
<script type="text/javascript">
//Not sure if I need to do something here??????
System.import('/app/app.component.js');
</script>
</body>
</html>
Heres the js part of my gulp file (which works fine):
gulp.task('getAllJsFilesAndCacheBust', function() {
gulp.src('src/app/**/**/*.js')
.pipe(cachebust.resources())
.pipe(gulp.dest('src/app/js/'))
});
I just need to know how to wire up the app.component.js thats now this: app.component.685d875q.js. I cant seem to get that imported
I have been looking all over, but I can not seem to find a simple Player example for midi.js http://mudcu.be/midi-js/ .
The Player example is so complex I cannot get it to work in my page....What am I missing?
<script src="./js/MIDI/AudioDetect.js" type="text/javascript"></script>
<script src="./js/MIDI/LoadPlugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Plugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Player.js" type="text/javascript"></script>
<script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script>
<!-- extras -->
<script src="./inc/Base64.js" type="text/javascript"></script>
<script src="./inc/base64binary.js" type="text/javascript"></script>
<script type="text/javascript">
MIDI.Player.loadFile("start.mid",MIDI.Player.start);
MIDI.Player.start();
</script>
You missed some imports. For a midi player, you should use the script tags from the demo-MIDIPlayer.html file.
<script src="./js/MIDI/AudioDetect.js" type="text/javascript"></script>
<script src="./js/MIDI/LoadPlugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Plugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Player.js" type="text/javascript"></script>
<script src="./js/Widgets/Loader.js" type="text/javascript"></script>
<script src="./js/Window/Event.js" type="text/javascript"></script>
<script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script>
<!-- jasmid package -->
<script src="./inc/jasmid/stream.js"></script>
<script src="./inc/jasmid/midifile.js"></script>
<script src="./inc/jasmid/replayer.js"></script>
<!-- extras -->
<script src="./inc/Base64.js" type="text/javascript"></script>
<script src="./inc/base64binary.js" type="text/javascript"></script>
Also, you need to load the plugin, before you can start playing a file.
window.onload = function () {
MIDI.loadPlugin({
callback: function() {
MIDI.Player.loadFile("start.mid", MIDI.Player.start);
}
});
}
I'm trying to setup an elFinder window on my website. So I downloaded the latest release of from GitHub and followed it's instructions.
I included every file they asked for:
<!-- elFinder -->
<script type="text/javascript" src="../includes/elfinder/js/elfinder.min.js"></script>
<script type="text/javascript" src="../includes/elfinder/js/i18n/elfinder.nl.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.dialog.js"></script>
And I include this into my head-section as well:
<script type="text/javascript">
$().ready(function() {
var elf = $('#elfinder').elfinder({
lang: 'nl', // language (OPTIONAL)
url : '../includes/elfinder/php/connector.php' // connector URL (REQUIRED)
}).elfinder('instance');
});
</script>
But for some reason, all I get is this image:
But those files are, obviously, included... So I'm wondering what I'm doing wrong since I can't get my finger on the issue...
Why don't you combine the jQuery UI files into one?
Yes the order of includes does matter.
Here a working demo.
Here is the code
HTML
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://elfinder.org/demo/css/elfinder.min.css" />
</head>
<div id="elfinder"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="http://elfinder.org/demo/js/elfinder.min.js" ></script>
Javascript
$().ready(function() {
var f = $('#elfinder').elfinder({
url : '/connector'
}).elfinder('instance');
});
have you tried changing the order of inclusion?
<!-- elFinder -->
<script type="text/javascript" src="../includes/elfinder/js/elfinder.min.js"></script>
<script type="text/javascript" src="../includes/elfinder/js/i18n/elfinder.nl.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.dialog.js"></script>
Let me know ;)
I'm trying to add two different javascript functions to my header:
1) is for a lightbox (see code below) and the
2) is for a local scroll (code below). When I place them both in my header tag, as seen below, one or the other will not work at all--depending on the order in which I place them the tag-- when I go to view my page.
Q: how can I get all these js. files to work when I view my page?
<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
\\\\and this one below////
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js"></script>
<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.localScroll.defaults.axis = 'y';
$.localScroll();
});
</script>
You are using prototype w/ jQuery make sure you have jQuery.noConflict(); after your jquery framework script and prototype framework and before you run any main scripts. It is not recommended to use more than one JavaScript framework at the sametime.
<header>
<link rel="stylesheet" href="/lightbox2.04/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js">
</script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery.localScroll.defaults.axis = 'y';
jQuery.localScroll();
});
</script>
</header>
give this a try