I'm developing a mobile application with Phonegap and AngularJS, and the application is working fine so far in desktop browser. Although, when I build it into an APK, some of the code of the application doesn't work.
First of all, I've seen this topic Phonegap - app works on desktop, not on mobile and the issue continues.
index.html
<!DOCTYPE html>
<html ng-app="home">
<head>
<meta charset="utf-8" />
<title>My new Application</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<link rel="shortcut icon" href="/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="public/css/angular/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="public/css/angular/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="public/css/angular/mobile-angular-ui-desktop.min.css" />
<link rel="stylesheet" href="public/css/global.css" />
</head>
<body>
<div class="app">
<div ng-include="'application/views/header.html'" style="margin-bottom: 51px"></div>
<div ng-view="">
</div>
<div ng-include="'application/views/footer.html'"></div>
</div>
<script srC="cordova.js"></script>
<script type="text/javascript" src="public/js/angular/angular.min.js"></script>
<script type="text/javascript" src="public/js/angular/angular-route.min.js"></script>
<script type="text/javascript" src="application/controllers/home.js"></script>
</body>
</html>
home.js
var app = angular.module('home', [
'ngRoute'
]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : '/application/views/home/home.html',
controller : 'home_controller'
})
});
app.controller('home_controller', ['$scope', '$location', function($scope, $location){
console.log('im here..');
alert('im here..!!');
}]);
I tried to "debug" by setting console.log and alert messages, but none of them shows up.
For debug, I'm using http://debug.build.phonegap.com/ weinre.
Conclusion: my application shows up normally, it loads the header.html and the footer.html, but not the home.html (nor shows up messages).
I also tried to set up the controller in the body ng-controller="home_controller" but the route configuration should do the same.
Related
I was trying to include external javascript and html into my angular app.
Here is the author's tutorial which works in jsfiddle
<!-- header source -->
<script src="https://www.givengine.org/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="https://www.givengine.org/components/chart-controller/chart-controller.html">
<!-- embed the browser in the web page -->
<chart-controller
title-text="A 2-minute starter of building a genome browser with GIVE"
ref="hg19"
num-of-subs="2"
coordinate='["chr18:19140000-19450000", "chr18:19140000-19450000"]'
group-id-list='["genes", "CHi-C_promoter"]'
></chart-controller>
So I did it according for my angular app, added the script ref to index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EpiMiner</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://localhost:40080/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="http://localhost:40080/components/chart-controller/chart-controller.html">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.html
<chart-controller
title-text="A 2-minute starter of building a genome browser with GIVE"
ref="hg19"
num-of-subs="2"
coordinate='["chr18:19140000-19450000", "chr18:19140000-19450000"]'
group-id-list='["genes", "CHi-C_promoter"]'
></chart-controller>
But I got an "chart-controller is not a known element" error. Not too much experience with angular. Suggestion are appreciated. Thanks
I'm trying to set up a simple app with angular 1.5 and ng-admin,I imported all the dependencies and done everything right but angular can't find the ng-admin module even though I have imported it
this is my html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gestionale Clienti</title>
<link rel="icon" type="image/png" href="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src-="utilities/ng-admin.min.js"></script>
<link rel="stylesheet" href="utilities/ng-admin.min.css">
<link rel="stylesheet" href="styles/css_compiled/base.css" />
</head>
<body ng-app="gestionale">
<div ui-view></div>
<script src="bundle.min.js"></script>
</body>
</html>
this is my javascript:
'use strict';
angular.module('gestionale',['ng-admin']);
and the error I get is : Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=gestionale&p1=Errorogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.0%2Fangular.min.js%3A20%3A449)
thanks in advance,any help would be appreciated.
You have a typo
<script src-="utilities/ng-admin.min.js"></script>
should be
<script src="utilities/ng-admin.min.js"></script>
Also, ng-admin currently doesn't support Angular 1.5. Use ng-admin 0.9 it with Angular 1.3, or the master branch (future 1.0) with Angular 1.4.
I have a phonegap/jquerymobile app that I can't seem to get pagecontainer #change to work for. I have tried the most up to date syntax I could find, but seem to be missing something.
function goToCards() {
console.log('got to goToCards');
$(':mobile-pagecontainer').pagecontainer('change', '#cardsPage');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="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, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>BibHub Mobile</title>
</head>
<body>
<div class="app" data-role="page" id="loginPage">
<div data-role="header">
<h1>Biphub</h1>
</div>
<div data-role="content">
go to cards
</div>
</div>
<div class="app" data-role="page" id="cardsPage">
<div data-role="header">
<h1>Biphub</h1>
<h2>Your UID is <span id="uidSpan"></span></h2>
</div>
<div data-role="content">
<p>Your card stack is currently empty. Way to go!</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
When I run the app in xcode I successfully log 'got to goToCards'. However, there is no page change or any error. A normal non-js function link works to transition the page. Any ideas?
The pagecontainer widget and its methods were introduced in jQuery Mobile version 1.4. You appear to be using a really old version (1.0). Can you upgrade both jQuery and jQuery Mobile versions?
If not, you need to use $.mobile.changePage : API DOC
I have made a simple program that displays a toolbar using the AngularJS Material Design framework that works on Google Chrome and Opera,however does not work in Firefox, as in, the toolbar is not displayed,only the text inside it is.The code for the html is as follows:
<!doctype html>
<html lang="en" ng-app="toolbarTest">
<head>
<meta charset="utf-8">
<title>SideNav Test</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="C:\angular\angular-phonecat\app\bower_components\angular-material\angular-material.css">
<link rel="stylesheet" href="C:\angular\angular-phonecat\app\bower_components\angular-material\themes\indigo-theme.css">
</head>
<body>
<script src="C:\angular\angular-phonecat\app\bower_components\angular\angular.js"></script>
<script src="C:\angular\angular-phonecat\app\bower_components\angular-aria\angular-aria.js"></script>
<script src="C:\angular\angular-phonecat\app\bower_components\angular-animate\angular-animate.js"></script>
<script src="C:\angular\angular-phonecat\app\bower_components\hammerjs\hammer.js"></script>
<script src="C:\angular\angular-phonecat\app\bower_components\angular-material\angular-material.js"></script>
<script >
angular.module('toolbarTest', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
});
</script>
<div ng-controller="AppCtrl">
<md-content flex class="md-padding">
<md-toolbar md-theme="indigo">
<h2 class="md-toolbar-tools">
<span>Toolbar: blue-theme</span>
</h2>
</md-toolbar>
</md-content>
</div>
</body>
</html>
When I go to console in Firefox, I get the message "ReferenceError: angular is not defined".
Thank you,any help is appreciated.
update: it wasn't working because Firefox apparently needs the syntax "file:///" before absolute paths.
My app is "working" fine, but, when I press F5 in browser my problem appears.
My app is organized this way:
nodeJs + express, in Express :
app.use(express.static('public'));
app.use( app.router );
app.use(function(req, res) {
res.sendfile(__dirname + '/public/index.html');
});
my angular routes:
app.config(function($locationProvider, $routeProvider) {
$locationProvider
.html5Mode(true)
.hashPrefix('!');
$routeProvider
.when('/', { templateUrl: '/page/home.html'})
.when('/activate/:token', { templateUrl: '/page/activate.html'})
.otherwise({ redirectTo: '/' });
});
and everything is working fine until i refresh the page,
if i'm on localhost:1234/activate/999
it appear refreshing good the page, but it stamp in console this error
Error: Template must have exactly one root element. was:<!DOCTYPE html>
<html ng-app=app xmlns="http://www.w3.org/1999/html">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
bla
bla
bla
all my index.html!
what can be the problems?
any solutions?
edit:
my home:
<div>
<section id="feature_slider" class="">
//...
</section>
<div id="showcase">
//...
</div>
<script type="text/javascript" src="/js/index-slider.js"></script>
</div>
mi activate:
<div>
test
</div>
my index.html
<!DOCTYPE html>
<html ng-app=app xmlns="http://www.w3.org/1999/html">
<head>
<title>tite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="/css/bootstrap-overrides.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/theme.css">
<link rel="stylesheet" href="/css/index.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/lib/animate.css" media="screen, projection">
<link rel="stylesheet" href="/css/sign-in.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/myCss.css" type="text/css"/>
</head>
<body class="pull_top">
<navbar>
//...
</navbar>
<ng-view> Loading...
</ng-view>
<!-- starts footer -->
<footer id="footer">
//...
</footer>
<!--Preload-->
<script src="/js/jquery-1.10.1.min.js"></script>
<!-- Scripts -->
<script src="/js/bootstrap.min.js"></script>
<script src="/js/theme.js"></script>
<!--Angular-->
<script type="text/javascript" src="/js/angular.min.js"></script>
<!--<script type="text/javascript" src="/js/angular-ui.min.js"></script>-->
<script type="text/javascript" src="/js/ui-bootstrap-0.5.0.min.js"></script>
<script type="text/javascript" src="/angular/app.js"></script>
<!--Angular Controller-->
<script type="text/javascript" src="/angular/login/loginController.js"></script>
<script type="text/javascript" src="/angular/menuNavBar/menuController.js"></script>
<script type="text/javascript" src="/angular/login/logOutController.js"></script>
<script type="text/javascript" src="/angular/login/registerController.js"></script>
<!--Angular Services-->
<script type="text/javascript" src="/angular/alertBox/messageBoxController.js"></script>
<!--Router-->
<script type="text/javascript" src="/angular/router/router.js"></script>
</body>
This is a problem commonly encountered when using a "catch-all" route that returns index.html (which you have to do when using Angular's html5 mode).
I don't know what your public folder structure looks like, but your Angular is making a request for activate.html that doesn't match its actual location (as served by Express). It may be because you have a leading slash in your templateUrl:
{ templateUrl: '/page/activate.html'})
but that depends on what your public folder looks like. "/page/activate.html" assumes that the "page" folder is at the root of your public folder. If it isn't, then that's your problem. You should have:
{ templateUrl: 'path/relative/to/public/folder/page/activate.html'})
which I'm guessing in your case would be something like:
{ templateUrl: 'views/page/activate.html'})
(It doesn't seem likely there would be a folder called "page" at the root of public/.)
Your express middleware attempts to handle the request for
http://localhost:1234/page/activate.html
but nothing successfully handles it, so your catch-all route just returns index.html, which has multiple root elements, causing Angular to throw a fit. Angular expected activate.html but it got index.html instead.
This will happen whenever the client makes a request that Express can't handle, because the catch-all router will return index.html. You can get your browser in an infinite loop as it continuously loads index.html, which loads Angular, which (erroneously) loads index.html, which loads Angular, etc.
Look at the request your browser is making for activate.html and make it match the actual location (as served by Express) of activate.html.
Try use the specify the templateUrl with the absolute path from the root of the views.
For example, suppose you have configured and views is in the public folder
app.set('views', __dirname + '/public');
then change the path to the template to
/public/page/home.html