We've built a HTML/JS iOS app using Angular which works perfectly on desktop browsers but when I wrap it up as PhoneGap project and try to run it on my device, it simply loads the splash screen which fades out to a blank white screen. I've been looking around for similar issues with the routing maybe? I just can't figure it out. Can anybody help?
HTML
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/nav.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-grid-12.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script type="text/javascript" src="scripts/app.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
<script type="text/javascript">
var is_ios = /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
if (is_ios) {
$('<link rel="stylesheet" type="text/css" href="css/iosbugfix.css" />').appendTo("head");
};
</script>
<base href="/">
</head>
<body ng-app="appItmt" ng-controller="dataController">
<div ng-view></div>
</body>
</html>
app.js
(function () {
var itmtApp = angular.module("appItmt", ["ngRoute", "cgBusy"]);
itmtApp.config([
'$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/how-to/', {
templateUrl: 'how-to.html',
controller: 'dataController'
})
.when('/privacy/', {
templateUrl: 'privacy.html',
controller: 'dataController'
})
.when('/about/', {
templateUrl: 'about.html',
controller: 'dataController'
})
.otherwise({
templateUrl: 'main.html',
controller: 'dataController'
});
$locationProvider.html5Mode(true);
}
]);
}());
You should wait for the deviceready event before running your JavaScript. See the Cordova documentation for this here.
This signals that PhoneGap/Cordova is ready to go and it is safe to run JavaScript.
Try following code this may help:
Change your config.xml in yourapp/platforms/ios/cordova/ and add following preference:
<preference name="ShowSplashScreenSpinner" value="false" />
The add following code to your app.js:
angular.module('starter.controllers', [])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
setTimeout(function() {
navigator.splashscreen.hide();
}, 100);
});
})
Try rebuilding your application : $ ionic build ios
And try it $ ionic emulate ios.
Hope this helps.
I had the same problem. What makes debugging worse is that app runs ok with ionic run android but not with ionic build android
What I found out is that my app works fine without
<base href="/">
which at the same time means I have to remove
$locationProvider.html5Mode(true);
Then I found the answer here
When building the app base should be changed to <base href=".">
Related
I am having a problem with implementing Highcharts in my Angular/Node/Express app. Using the highcharts-ng directive https://github.com/pablojim/highcharts-ng
I keep getting the following error in my console:
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=stocksApp&p1=Error%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js%3A20%3A390)
I have this in the head of my index.html:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--link custom CSS file -->
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script src="/js/app.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
My template file:
<div class="container">
<highchart id="chart1" config="chartConfig"></highchart>
</div>
My Angular JS config:
angular.module("stocksApp", ['ngRoute', 'highcharts-ng'])
.config(function($routeProvider){
$routeProvider
.when("/", {
templateUrl: "stocks.html",
controller: "mainController",
});
})
Can anyone help me what this error is about?
I presume that you have installed the highcharts-ng.js from the Node and it seems you have not included the same in your <script> block. You can find it under your node_modules directory.
Also as Steve Pitis pointed out, You need move your <script src="https://code.highcharts.com/highcharts.js"></script> before your app.js script inclusion.
Hope this helps!
I have an app using AngularJS. Here is a link of it - Angular App
All the links in the navbar are using default angular router. All the pages work fine when i refresh them, but a page like this loads the content without css and js when i refresh it or go to it directly.
I feel this is a issue with the routing although I am not sure. Here is the app.js file -
angular
.module('jobSeekerApp', [
'ngRoute'
])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about'
})
.when('/companies', {
templateUrl: 'views/companiesall.html',
controller: 'CompaniesallCtrl',
controllerAs: 'companies'
})
.when('/jobs', {
templateUrl: 'views/jobsall.html',
controller: 'JobsallCtrl',
controllerAs: 'jobs'
})
.when('/companies/:id', {
templateUrl: 'views/company.html',
controller: 'CompanyCtrl',
controllerAs: 'company'
})
.when('/contact', {
templateUrl: 'views/contact.html',
controller: 'ContactCtrl',
controllerAs: 'contact'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix = '!';
});
This is the head from index.html -
<head>
<meta charset="utf-8">
<title>Job Seeker</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/animate.css/animate.css" />
<link rel="stylesheet" href="bower_components/jssocials/dist/jssocials.css" />
<link rel="stylesheet" href="bower_components/jssocials/dist/jssocials-theme-flat.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="/styles/main.css">
<!-- endbuild -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Bungee|Carrois+Gothic+SC|Oswald" rel="stylesheet">
<base href="/">
</head>
Thanks everyone for your help, I found the actual problem in another question. I had to put <base href="/"> above other links in the head of index.html. Here is a link to the correct answer. So now index.html looks like this
<head>
<meta charset="utf-8">
<title>Job Seeker</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<base href="/">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/animate.css/animate.css" />
<link rel="stylesheet" href="bower_components/jssocials/dist/jssocials.css" />
<link rel="stylesheet" href="bower_components/jssocials/dist/jssocials-theme-flat.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="/styles/main.css">
<!-- endbuild -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Bungee|Carrois+Gothic+SC|Oswald" rel="stylesheet">
</head>
You are using html5 history mode and that's why it's not able load the css and js files. you need to use url re-writer for serving index.html whole the time so it can load your css and js files and you can have url without hash.
Note:-
You don't notice it until you don't refresh your page. Everything will work till you hit the refresh button and serve you the static html page without the css and js
What happened when you use html-history mode?
You make an request and before angular can react on that request your server find example.html file and serve that and that files don't have the css or js files it's your index.html which contain all thee files so you need to tell your server that just keep serving index.html and later angular will redirect to the requested page which will be shown in the ng-view and will have all the css and js files.
Server side (Source Angular's documentation)
Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html). Requiring a tag is also important for this case, as it allows Angular to differentiate between the part of the url that is the application base and the path that should be handled by the application.
my html page:
enter code here
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="daily">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="js/script.js"></script>
</head>
<!-- define angular controller -->
<body>
<div style="background-color:black" class = "page-header">
Daily
</body>
my login.html
<html>
<body>
<p>
Hello
</p>
<body>
<html>
enter code here
my script.js:
var app=angular.module('daily',[]);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('Home', {
url: '/Home',
templateUrl: 'templates/login.html'
});
$urlRouterProvider.otherwise('/Home');
});
Im getting Module 'daily' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument error. Not understanding the mistake i have done
since you are trying to use ui-router it is dependency to our module so include it.
var app = angular.module('daily', ['ui.router']);
Note: ui-router will not work you should use ui.router.
You have to declare all your dependencies in my script.js:
var app=angular.module('daily',[
'ui.router',
]);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('Home', {
url: '/Home',
templateUrl: 'templates/login.html'
});
$urlRouterProvider.otherwise('/Home');
});
And in your index you didn't include the ui-router js : https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js
Heres My code for my index page, I added ui-view and my app file is called "route-app.js" and have used bower angular ui-router.
<!DOCTYPE html>
<html lang="en" ng-app="router">
<head>
<!-- JS dependencies -->
<!-- AngularJS library -->
<script src="route-app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<!-- AngularJS UI-Router -->
<!-- Our application -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1></h1>
<div ui-view></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
UI router Js file
angular.module('router', ['ui.router'])
.config([function($urlRouterProvider, $StateProvider){
$urlRouterProvider.otherwise('/');
$StateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
})
}]);
Every time I click on the links not pops up. What have I done wrong here.
$StateProvider should be $stateProvider (the first letter is lowercase)
Refer to the documentation here for reference: https://github.com/angular-ui/ui-router.
Also open up your development console, there may be some console errors that might assist you in figuring out what the problem is
angular.module('router', ['ui.router'])
.config(['urlRouterProvider', '$stateProvider', function($urlRouterProvider, $StateProvider){
$urlRouterProvider.otherwise('/');
$StateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
});
}]);
The thing is that, you have used array notation for dependency injection but you actually did not inject anything.
Ok so you have a couple errors.
The first, and the most important, is that you define your custom scripts prior to including angular itself. So if you look at the console you will see a 'Reference Error: angular is not defined' error.
Second and third, as Alex and Vishal noted, the injection is wrong.
Here are the updated HTML (I removed all the unecessary comments from your code to make it clear where I changed anything. You can of course keep them in your page):
<!DOCTYPE html>
<html lang="en" ng-app="router">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<!-- JS dependencies: MUST COME AFTER THE ANGULAR DEPENDENCIES -->
<script src="route-app.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1></h1>
<div ui-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
and the script:
angular.module('router', ['ui.router'])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
});
}]);
As an advice, make use of the browser console (by pressing F12). It will give you the errors occuring in your scripts.
Note: It is possible to include the custom scripts prior to the angular library, but it's pointless and needs extra code to make it work, so don't do it.
In the script file , change the value oftemplateUrl attribute from 'home.html' to './home.html'. You have to give root directory.Just giving the file name will not work.
angular.module('router', ['ui.router'])
.config([function($urlRouterProvider, $StateProvider){
$urlRouterProvider.otherwise('/');
$StateProvider
.state('home', {
url: '/',
templateUrl: './home.html'
})
}]);
First of all, you should use the ui-sref attribute and not a plain href attribute to make ui-router work properly. Second, your link should not contain a hashtag. In this case, it has to be "/", not "#/".
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