I am trying to check out my ionic project which is built through angular js but unable to make runnable it on plunker. It's working on my local machine, with all rpm packages, etc
<!DOCTYPE html>
<html data-ng-app='starter.controllers'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-touch.js"></script>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- your app's js -->
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
</head>
<body ng-app="starter" style="background-color: #E6E6FA; ">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
Link to Plunker here, also need your suggestions to improve it
jQuery is not loading because plunker needs https. Just change the url to src="https://code....
And you are using ionic, so you should include ionic library.
<script src="https://code.ionicframework.com/1.3.1/js/ionic.bundle.min.js"></script>
Related
I have index.html with all the source Javascripts and ui-view defined in it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title>Projects</title>
<link rel="stylesheet" href="resources/css/style.css">
<link rel="stylesheet" href="resources/css/external/c3.min.css">
<link href="resources/css/external/colorpicker.css" rel="stylesheet">
<link href="resources/css/external/googlechart.css" rel="stylesheet">
<script type="text/javascript" src="scripts/dndTree.js"></script>
<!-- Controllers -->
<!-- Controllers for dashboard -->
<script type="text/javascript" src="app/shared/headercontroller.js"></script>
<script type="text/javascript" src="app/views/homepage/project/projectcontroller.js"></script>
<script type="text/javascript" src="app/views/homepage/conceptmodel/cmdboardcontroller.js"></script>
<script type="text/javascript" src="app/views/homepage/repository/repositorycontroller.js"></script>
<script type="text/javascript" src="app/views/homepage/ontology/ontdboardcontroller.js"></script>
<script type="text/javascript" src="app/views/overview/section/component/componentmanager.js"></script>
<script type="text/javascript" src="app/views/overview/section/component/componenttemplate.js"></script>
<!-- document viewer js -->
<script type="text/javascript" src="app/views/analysis/docviewer/manager/docviewermanager.js"></script>
<script type="text/javascript" src="app/views/analysis/docviewer/model/solrdocument.js"></script>
<script type="text/javascript" src="app/views/analysis/docviewer/controller/docviewercontroller.js"></script>
</head>
<body id="db" class="homepage" ng-app="ipaApp">
<ui-view></ui-view>
</body>
</html>
I have around 150 such js files and currently all files are loaded when the webapp loads, resulting in increased loading time. I want to minify all these files and load files related to dashboard in index.html and others in the children templates for better user experience. I tried to move those script in templates but didn't work out. Is it possible to do so? What could be the best way to solve this?
A common approach is to move script tags to the end of the body tag, so this way, the content (html) is loaded and the scripts are loaded the last, so the user experience is better.
Despite the first time it could take some time to completely load all the resources, after that, you'll see the results, since you won't have to load any other resource again the user experience is so much better than if you load some scripts every time in a different template. That would be distribute the initial time in many portions (for every template). Not to mention that you might switch from one template to another more than once (and this way you load again the same resources). This is kind of a matter of perspective and what your final goal is: invest some time at the beginning and not after that, or just divide that time in minor portions, for every template you load.
With the first approach it would be something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title>Projects</title>
<link rel="stylesheet" href="resources/css/style.css">
<link rel="stylesheet" href="resources/css/external/c3.min.css">
<link href="resources/css/external/colorpicker.css" rel="stylesheet">
<link href="resources/css/external/googlechart.css" rel="stylesheet">
</head>
<body id="db" class="homepage" ng-app="ipaApp">
<ui-view></ui-view>
<script type="text/javascript" src="scripts/dndTree.js"></script>
<!-- Controllers -->
<!-- Controllers for dashboard -->
<script type="text/javascript" src="app/shared/headercontroller.js"></script>
<!-- ... -->
<!-- document viewer js -->
<script type="text/javascript" src="app/views/analysis/docviewer/manager/docviewermanager.js"></script>
<!-- ... -->
</body>
</html>
Hope this help :)
My code is only shown for a split second after returning ionic serve and goes blank. I've everything needed to run this like nodejs, cordova, ionic, jdk, etc.
I'm new to ionic and would appreciate if someone can help me solve this.
This was run on internet explorer.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<h1>asdf</h1>
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
really you are very lost.
if you try to show
<h1>asdf</h1>
well that disappear because is replaced by the angular app in your code
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
you do write your in angularjs for that you can check the docs of angular and ionic.
you can retire the class of body and write direct in index but that is the really bad way
I'm trying to make my own barcode scanner app. It should open like Snapchat which basically just means that when i'm opening the app the barcode scanner should showup immediately and not through clicking a button.
I'm using Cordova and Ionics and I'm currently using the barcode scanner plugin from Phonegap which actually works fine BUT i can't make it work through just opening the app. The screen will just be white. It's working when i'm using a button but in the other case not.
I'm new to Cordova and JavaScript and it would help me a lot if some of you can help!
Thanks a lot :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script type="text/javascript">
function scan() {
console.log("clicked");
cordova.plugins.barcodeScanner.scan(function(result) {
//success callback
alert(JSON.stringify(result));
}, function(error) {
//error callback
alert(JSON.stringify(error));
});
}
</script>
</head>
<body ng-app="starter">
<div class="bar bar-header">
<button class="button icon ion-navicon"></button>
<h1 class="title">Header Buttons</h1>
<button class="button">Edit</button>
</div>
<ion-content class="has-header">
<!--<button class="button button-positive" onclick="scan()">Click here to scan</button>-->
<script type="text/javascript">
scan();
</script>
</ion-content>
</body>
</html>
i would guess that your scripts haven't fully loaded, therefore you need to run scan() once this is complete. A simple way to do this is to add an onLoad attribute to your body tag:
<body onload="scan()">
I have used mobile.js. In my apps using phonegap for developing app
Please check my code
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PlayTradeWin</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="cordova.js"></script>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//some js code here
}
</script>
</head>
<body>
Login
</body>
</html>
login.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PlayTradeWin</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script>
alert("Hello");
</script>
</head>
<body>
Login form here..
</body>
</html>
My page fliping perfectly but When I will going index.html to login.html by clicking of Login link in index.html page my JavaScript alert not working.
use
$( function() {
alert('Hello');
});
I guess this type of js script injection into HTML is not supported by Cordova. You need to do the logic in the index.js script.
Also if you wish to perform a alert you can use the apache cordova plug-in for notifications (you can get it via project config --> plugins).
My ng-click events are firing twice in my Ionic app and I have not been able to figure out how to fix this. To test this error, I have compressed my code to the following (the error is still occurring in the iOS emulator and on the iOS device, however not in the browser nor on android):
Running version (rendered by browser, error is not produced): play.ionic.io/app/2fc7300bf4a6
JS
(function() {
var app = angular.module('nh-launch', ['ionic']);
app.controller('testCtrl', function($scope) {
$scope.testClick = function () {
alert("hello");
};
});
}());
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>NoHarm Safety Application</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="lib/angular-resource/angular-resource.js"></script>
<script src="lib/angular-random-string/src/angular-random-string.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="nh-launch">
<ion-pane>
<ion-content>
<div ng-controller="testCtrl">
<button ng-click="testClick()" class="button button-block button-calm">Test Click</button>
</div>
</ion-content>
</ion-pane>
</body>
</html>
Help is greatly appreciated!
This is a current bug with ionic. It is due to the alert() and $window.alert() functions. I have posted the issue here: https://github.com/driftyco/ionic/issues/4345#issuecomment-139026496