My introduction page has to open first time and then after it has to open side menu app. here I could able to display introduction page for the firsttime when app is installed, but the problem here i could able to display playlists page but navigation bar is not displaying.
Here is My Code:
https://www.dropbox.com/s/ome1w3isn41hjch/menu.zip?dl=0
getting error in Mobile browser console like this
See the screen shot the nav-bar is empty
bundle.js error shown because of injector error occupied in app.js
so check your app.js angular inject elements.
you missed ng-cordova.js
install using bower from above link..!and <script src="lib/ng-cordova.min.js"></script> in index.html
index.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 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>
<script src="lib/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
Related
I am converting an existing bootstrap theme to react js. Having copied the required folders (css, fonts, images, and js) into react public folder, and add the link to each files into public/index.html file as seen below;
<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="%PUBLIC_URL%/fonts/flaticon/flaticon.css">
<link rel="stylesheet" href="%PUBLIC_URL%/fonts/font-awesome/fontawesome.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/vendor/slick.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/vendor/bootstrap.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/custom/main.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/custom/index.css">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="%PUBLIC_URL%/js/vendor/jquery-1.12.4.min.js"></script>
<script src="%PUBLIC_URL%/js/vendor/popper.min.js"></script>
<script src="%PUBLIC_URL%/js/vendor/bootstrap.min.js"></script>
<script src="%PUBLIC_URL%/js/vendor/slick.min.js"></script>
<script src="%PUBLIC_URL%/js/custom/slick.js"></script>
<script src="%PUBLIC_URL%/js/custom/main.js"></script>
</body>
</html>
It appears that the css files in the head session work correctly except for the js files in the body session. After inspecting the page for error via browser, i found this..
DevTools failed to load source map: Could not load content for http://localhost:3000/css/vendor/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for http://localhost:3000/js/vendor/popper.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for http://localhost:3000/js/vendor/bootstrap.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
How can i fix this as nothing seem to be working after several attempt including disable/enable javascript/css from browser inspect -> settings (gear) as well as using npm install bootstrap jquery popper.js
This is my index.html file. I have used angularjs , bower components etc. I have used angular ui view to store header, content, footer files as templates in another folder. When I try to open "index.html" is mozilla(using it for a long time) the website opens perfectly(with all the css and scripts loaded perfectly) , but in some other browser it just shows a blank screen. I have checked in Networks developers option , there is no error in mozilla but lots of 304 and 404 errors in other browsers.Are there some issues on loading the styles and scripts on other browsers or some cached data issues?
<!DOCTYPE html>
<html lang="en" ng-app="medicalApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>temp_App</title>
<!-- links to various stylesheets-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/components-font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog-theme-plain.min.css" rel="stylesheet">
<link href="../bower_components/ng-dialog/css/ngDialog-theme-default.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
</head>
<body>
<!-- I have used angular ui-view and store header, content, footer files as templates-->
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../bower_components/ng-dialog/js/ngDialog.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
</body>
</html>
It is impossible to say since we can't directly interrogate your pages/scripts. Typically a white screen in an Angularjs application is indicative of a script error (unable to load a dependency or template usually). The Console should give you the answer. Firefox is pretty forgiving, which is why I prefer to use Chrome. In the failing browser look for angular errors for dependency loading.
It might be the order you are loading scripts. Other than that I can't see anything on the surface that would a problem.
I am trying to create a simple text file in my android device (cordova 6.0.0 and Ionic 1.7.14) but every time its prints the error object hence file is not created. I tested this with Samsung/ Huawei and HTC devices but the result is same. app.js and index.js is as follows and request any help.
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic','ngCordova'])
.controller('MyCtrl', function($scope, $cordovaFile) {
//----------------------------create file---------------------
document.addEventListener('deviceready', function () {
$cordovaFile.createFile("cordova.file.dataDirectory", "xcendant.txt", false)
.then(function (success) {
// success
alert(success);
alert("success!");
// console.log("Elaa");
}, function (error) {
// error
alert(error);
alert("fail");
});
})
}
<!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 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="js/ng-cordova.min.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>
</head>
<body ng-app="starter" ng-controller="MyCtrl">
</body>
</html>
#ajantha, I m not familiar with ionic framework. But if you are using Cordova file plugin with Android 6.0, there is a permission issue in plugin itself which results in failure of folder creation.This issue is still open in Apache issue tracker and in progress.will send the link on the same shortly.
Update: The issue is fixed in Cordova file plugin version 4.2.0. The Apache issue tracker reference link is https://issues.apache.org/jira/browse/CB-10798
i'm trying to implements animation on a element directive repeated with ng repeat :
<ven-activity class="animate" ng-click="selectActivity($index)"activite="activite" ng-repeat="activite in data.activites | filter :{hide:true}"></ven-activity>
I have followed a lot of tutorial or guide for that but until now it never worked.
here is my css :
.animate {
...
...
}
.animate.ng-leave.ng-leave-active,
.animate.ng-enter {
...
...
}
.animate.ng-enter.ng-enter-active,
.animate.ng-leave {
.....
.....
}
my headers :
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/angular-animate/angular-animate.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/Controllers/venActivityCtrl.js"></script>
<script src="js/Directives/venActivity.js"></script>
</head>
and my main module :
angular.module('starter', ['ionic','ionic-material','ngAnimate'])
I can't figure out why it won't work if anyone can help
thank you :)
There was a conflict in my script import between ionic and angular-animate. if ionic is used in the app there is no need to include neither angular nor angular-animate but still need to include the module in the app.
I have an interesting problem with the Cordova InAppBrowser plugin on ios where it will only start working after I leave the app. For example, when I hit a button in the app that should load the InAppBrowser, nothing happens. I can wait 5 or 10 minutes and nothing will happen. If I double tap home and bring up the recent apps view, the InAppBrowser loads immediately. If I hit home then return to the app, it loads right away. After it loads the first time, it works immediately every subsequent time without having to leave the app.
I've confirmed this is what is happening with breakpoints on the init of the InAppBrowser view and view controller in xcode. They only get called after leaving the app.
The app is a Sencha-Touch app on the latest framework and the xcode project and plugins were generated/installed using the latest version of Cordova and from the command line. The only file i've modified in the project from that generated by Cordova (aside from my apps files in www) is the index.html:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MyWebApp</title>
<script>
var Ext = Ext || {};
Ext.theme = {
name: "Default"
};
</script>
<script src="sencha-touch-all.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<link rel="stylesheet" href="resources/css/application.css">
<script src="resources/js/currencyFormatter.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>