Cannot scroll after converting existing angularjs app to ionic - angularjs

I have an existing angularjs app which was working fine until I converted it to ionic. I tested the website on the chrome browser and discovered that I can no longer scroll down to see a long table.
The only change I made was in the html code;
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes, width=device-width">
<title>test-view</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="lib/ionic/js/bower_components/angular-material/angular-material.min.css">
<link rel="stylesheet" href="lib/ionic/js/bower_components/ng-table/dist/ng-table.min.css">
<link rel="stylesheet" href="css/app.css"/>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<!--<script src="../../bower_components/angular/angular.min.js"></script>-->
<!--<script src="../../bower_components/angular-animate/angular-animate.min.js"></script>-->
<script src="lib/ionic/js/bower_components/angular-aria/angular-aria.min.js"></script>
<script src="lib/ionic/js/bower_components/angular-material/angular-material.min.js"></script>
<script src="lib/ionic/js/bower_components/angular-route/angular-route.min.js"></script>
<script src="lib/ionic/js/bower_components/angular-moment/angular-moment.min.js"></script>
<script src="lib/ionic/js/bower_components/angular-google-chart/ng-google-chart.js"></script>
<script src="lib/ionic/js/bower_components/moment/moment.js"></script>
<script src="lib/ionic/js/bower_components/angular-cookies/angular-cookies.js"></script>
<script src="lib/ionic/js/bower_components/ng-table/dist/ng-table.js"></script>
<div ng-include src="'partials/header.html'"></div>
</head>
<body>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers-func.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<div ng-controller="ViewCtrl" class="container">
<table ng-table="tableParams" class="table table-bordered">
<thead>
<tr>
<th>name</th>
<th>symbol</th>
</tr>
<thead>
<tbody>
<tr ng-repeat="vw $data">
<td data-title="'name'" >
{{vw.name}}
</td>
<td data-title="'symbol'">
{{vw.symbol}}
</td>
</table>
</div>
</body>
</html>
How to make the code scrollable?


Wrap this tag over your table.
<ion-content class="has-header" overflow-scroll="true">
<!-- table contents here -->
</ion-content>
The above code will use native scroll instead of js scroll. Note that it may not work with lower versions of Android. As long as you are using Android 4.2 and above, you are quite safe.
Since you are adding a html partial, I assume there is a header on your html. Therefore, use class="has-header".

Related

How do I get my JSON data to show up on the page?

I'm using an API to make a table of all the data. The JSON url is connected (which I verified with a 200 Status). What am I doing wrong? Most importantly, if there is another way to accomplish what I'm trying to do, I'm open.
(function() {
var app = angular.module("RacingApp", []);
app.controller("DriversCtrl", function($scope, $http) {
$http.get("http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK").then(function(response) {
$scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
});
});
})();
<!DOCTYPE html>
<html lang="en">
<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 -->
<title>F1 Racing API</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/main.css">
<!-- 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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="RacingApp">
<div class="container" ng-controller="DriversCtrl">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table table-striped table-bordered table-compressed">
<thead id="table-header">
<tr>
<th colspan="5">
<div class="text-left col-md-6">Drivers Championship Standings</div>
<div class="text-right col-md-6">
</div>
</th>
</tr>
</thead>
<thead>
<tr>
<th>Place</th>
<th>Nationality</th>
<th>Name</th>
<th>Sponsor</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="info in information">
<th scope="row">{{$index + 1}}</th>
<td>{{info.Driver.nationality}}</td>
<td>{{info.Driver.givenName}} & {{info.Driver.familyName}}</td>
<td>{{info.Constructors[0].name}}</td>
<td>{{info.points}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.angularjs.org/1.5.7/angular.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
</body>
</html>

I found a resolution. For whatever reason, the package I received back from the server was MRData.data, which didn't show up in the actual JSON data. It works now!!

How to get AngularJS to perform a calculation inside a template?

The script below does not perform the calculation {{ 5+ 15 }}, it just returns "5+ 15" as seen in this image
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>
<script src="lib/ionic/js/angular/angular-animate.js"></script>
<script src="lib/ionic/js/angular/angular-sanitize.js"></script>
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
<script src="lib/ionic/js/angular/angular.js"></script>
<script src="lib/ionic/js/angular/angular.min.js"></script>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">
<div style="color:#FF00FF" align="center">Ionic Testing</div>
</h1>
</ion-header-bar>
<ion-content>
<div ng-app="FirstModule" ng-controller="myFirstControl">
<input type="text" ng-model="FirstName" name="FirstName">
<input type="text" ng-model="SecondName">
<span ng-bind="FirstName"></span> Full Name: {{ 5+ 15 }}
</div>
</ion-content>
</ion-pane>
</body>
</html>

I just edited your question and noticed that you have ng-app declared twice:
There is one on the <body> tag and another on the first <div> inside <ion-content>.
Remove one of these (doesn't matter which) and your calculation should work as expected.

ionic project show blank page

I work with ionic for create mobile apps so i have:
app.js:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost/cms/controller/mobile.php")
.then(function (response) {$scope.names = response.data.records;});
});
mobile.php
{ "records":[ {"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"}, {"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"}, {"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"}, {"Name":"Around the Horn","City":"London","Country":"UK"}, {"Name":"B's Beverages","City":"London","Country":"UK"}, {"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"}, {"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"}, {"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"}, {"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"}, {"Name":"Bon app'","City":"Marseille","Country":"France"}, {"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"}, {"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"}, {"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"}, {"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"}, {"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"} ] }
index.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>
<!-- 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>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
</body>
</html>
Now, when i serve my project in output i see the blank page and my code not work. what's my problem? how do fix this?

AngularJS not working on Plunker

I'm trying to go through a simple tutorial on AngularJS and can't seem to get past the first step. {{ 10 x 10}} isn't appearing as 100. Any ideas?
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 10*10}}
</body>
</html>

You might have mentioned multiple versions of ng-app (probably in <html> tag).Otherwise your code is working fine
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 10*10}}
</body>
</html>
Here's the demo

End of AngularJS, Build (Minify, concat,...)

I ended my Angular JS app...
and now what?
I have a app with 10 scripts src in index.html, 6 ng includes,...
All this are http requests, and have a relative size...
There are some particular way or command for "compile/build/generate/deploy" end app code? with all included, minified,...
Or I must do this with grunt/gulp :(?
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="Bit2Card" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="Bit2Card" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="Bit2Card" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="Bit2Card" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>App</title>
<meta name="description" content="Generate a credit card on fly with Bitcoins">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="reset.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">
You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.
</p>
<![endif]-->
<div id="app" ng-controller="appController" class="{{viewBack ? 'viewBack' : ''}}">
<ng-include src="'partials/overlays/load.html'"></ng-include>
<ng-include src="'partials/overlays/error.html'"></ng-include>
<ng-include src="'partials/overlays/terms.html'"></ng-include>
<ng-include src="'partials/overlays/qr.html'"></ng-include>
<ng-include src="'partials/overlays/payout.html'"></ng-include>
<ng-include src="'partials/overlays/restart.html'"></ng-include>
<div id="flip">
<div id="frontCard">
<ng-include src="'partials/header.html'"></ng-include>
<div id="panels">
<div id="select" class="panel{{panel === 1 ? ' visible' : ''}}" ng-include="'partials/panels/select.html'"></div>
<div id="pay" class="panel{{panel === 2 ? ' visible' : ''}}" ng-include="'partials/panels/pay.html'"></div>
<div id="get" class="panel{{panel === 3 ? ' visible' : ''}}" ng-include="'partials/panels/get.html'"></div>
</div>
<ng-include src="'partials/footer.html'"></ng-include>
</div>
<div id="backCard" ng-include="'partials/backside.html'"></div>
</div>
</div>
<!--
In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/zeroclipboard/dist/ZeroClipboard.min.js"></script>
<script type="text/javascript" src="bower_components/ng-clip/dest/ng-clip.min.js"></script>
<script type="text/javascript" src="bower_components/qrcode/lib/qrcode.min.js"></script>
<script type="text/javascript" src="bower_components/angular-qr/angular-qr.min.js"></script>
<script type="text/javascript" src="bower_components/angular-translate/angular-translate.min.js"></script>
<script type="text/javascript" src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
<script type="text/javascript" src="scripts/lin2a.min.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
</body>
</html>

I think you should check out: https://www.npmjs.org/package/gulp-html-replace. It will read through that html for you and insert a new script tag in there that points to a bundled version of all those deps.

Resources