It's my first time to start working on mobile apps using angular and ionic so forgive me if this is just a simple problem. I tried googling about this issue but to no avail. Here's the problem, I tried recreating the sample app created using Ionic in the link below.
link here
I used the IBM MobileFirst environment to run my application. The issue is, if I didn't add a lot of < br > tags before the closing tag of the body, the display would look like the one on the right (see attached image).
Anyone can tell me why this is happening?
Code snippet from image on the left:
....
....
<script src="ionic/js/ionic.bundle.js"></script>
<!-- New lines to load our modules -->
<script src="app/app-main.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
Code snippet for the one on the right
....
....
<script src="ionic/js/ionic.bundle.js"></script>
<!-- New lines to load our modules -->
<script src="app/app-main.js"></script>
</body>
</html>
So basically, it only gets fixed if I add lots of < br > tags before the body's closing tag. Isn't Ionic suppose to adjust to the full height? or the natural height of its contents?
Note: let me know if you cant see the image
There is pre-existing CSS in Worklight that may cause this. You can attempt at fixing it by adding:
html, body {
height: 100%;
}
It is suggested that instead of using Hybrid apps, you'll use Cordova apps in MobileFirst 7.1. Integration with Ionic is then much simpler. Read more here: https://www.raymondcamden.com/2015/03/23/working-with-ibm-mobilefirst-and-the-ionic-framework/
Related
Note: I am NOT upgrading an ng1 app. I'm trying to get an ng1 and ng2 app to live side-by-side (or rather nested).
We have roughly the following html showing how we are trying to use two frameworks on the page at once:
Angular 1: The whole page is controlled by Angular 1. But we have used ng-non-bindable to tell the ng1 application to ignore the div in the middle of the page.
Angular 2: Just the element in the middle of the page should be bootstrapped as Angular 2.
<html ng-app="app">
<head></head>
<body ng-controller="appController">
<header>Angular 1 Stuff</header>
<div ng-non-bindable>
<ng2-app></ng2-app>
<script src="bundle.js"/>
<!-- bundle.js is the output from webpack and should bootstrap <ng2-app> -->
</div>
<footer>Angular 1 Stuff</footer>
</body>
</html>
Our app works just fine when we run it on its own without trying to integrate into this ng1 application page.
When we run it after integration however, we are getting an error saying there is a conflict with the global require method.
The ng1 application is using requirejs
The ng2 bundle is the typical output from webpack (using typescript-loader)
Both requirejs and webpack use require but in different contexts.
How can I resolve the conflict?
If you are curious why we do it this way: We are trying to bootstrap a new app on a page that also has an Angular 1 app. Our company has the global header/footer and the content of every page as a separate deployed applications. This allows teams to work on pages as stand-alone projects. One team wants to try and use Angular 2 for their new application on one of our new pages.
This question itself can raise thousand of other questions.It is not at all easy to answer this question so fully because you are talking about two major MVC based architectures(Angular1 and Angular2) together.
See how to use angular2 within angular1. Successfully I can bootstrap angular2 app within angular1 app.
It is extremely important to know how you have implemented your angular1 architecture. But if you are angular1&2 guy, you'd probably find ways on your own.
Angular2 App within Angular1 App
Index.html
<body ng-app="app" ng-controller="appController">
<header>{{myValue}}</header> //belongs to angular1
<div ng-non-bindable>
<my-app></my-app>
<!-- angular 2 app bootstrapping -->
</div>
<footer>Angular 1 Stuff</footer>
<script>
var app=angular.module("app",[]);
app.controller("appController",function($scope){
$scope.myValue="Nyks";
})
</script>
i'm trying to create a chart in my Ionic App using angular-chart.js, when i add the required code to the app and test it in the desktop, the chart apears correctly but when i build the app and test it in the phone the whole page where is supposed to be the chart goes blank and doesn't show anything.
I tried with another angular plugin to create charts but had the same result, both of them uses chart.js
Do you know another angular-chart framework that works with Ionic? or have any idea of what the problem could be?
Thanks a lot for the help
The way you include the style sheet's in Ionic framework will have the drawback to display the charts in simulator or in mobile device. I am uploading a sample project on Charts by using Ionic framework in github.
1.Please follow the steps in readme.md file of github
2.Download the required files to run the project
3.Having any queries please reply
I think the drawback for your project is the way of css file's you include
I followed like this
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" href="lib/angular-chart.js/dist/angular-chart.css">
<link href="css/style.css" rel="stylesheet">
I also had issues on android with Charts.js/angles.js, when testing using another useful set of ionic chart examples on github. Angular-nvD3, Highcharts or Google charts may be better options.
I could not get completion for my angular js eclipse based file. I know there could be lot of tutorials for setting up proper angular js for eclipse. But i read and followed the same and didn't worked still.
I also followed official link-> [Angular JS Eclipse Github setup link][1]
I installed, “Angular JS” from “Eclipse->Help Menu->Eclipse Marketplace”
It got installed and restarted.
Then, Eclipse->New->Static web project
Then, Convert the project to Angular. Right click Project, Configure-> Convert to Angular JS project
Then, Adding new html files. Right click Project, New->HTML file
Simple code:
<!DOCTYPE html>
<html lang="en-US" ng-app>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div>
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
It works fine. Runs in the browser well.
My problem is, why does not it show the completion help when I type on "ng-" and use control + space in mac eclipse ? When I move cursor on "ng", it gives help of "div" tag rather than "ng" help. I want to just type "ng-" and get the list of available methods by just press control + space in mac eclipse
I can understand that there is some angular installation problem. But, none of the existing solution solved my issue.
I have created an MFP project with the MFP CLI
After creating the project, I ran "yo mobileangularui" in the project root to install Mobile Angular UI
This scaffolds out a Mobile Angular UI project with AngularJS and Gulp
I am minifying all the js and css files, including the MFP javascript files and putting them in the MFP common folder with gulp
Everything loads fine when I view it in the MFP console, but not on localhost.
My problem is that the sidebars do not work when I click on them. I am not getting any errors. I log a message console.log when I click the menu button and it comes through fine, but it doesn't open the side bar.
If I build this project with out MFP everything works fine.
Not sure whats going on as everything with MFP seems to load fine in the console.
Some images:
https://drive.google.com/file/d/0B48-zmJJTxrYamgtcEtiNi1OMmc/view?usp=sharing
https://drive.google.com/file/d/0B48-zmJJTxrYeG1NUHNpbHA0ZUE/view?usp=sharing
I have never used AngularJS Mobile UI tooling, but the WL is undefined error (that is discussed in the comments) is occurring because of the way you are injecting source to the index.html.
This is how the resulting (part of the) HTML should look:
...
...
<script src="worklight/cordova.js"></script>
<script src="worklight/wljq.js"></script>
<script src="worklight/worklight.js"></script>
<script src="worklight/checksum.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="js/app.min.js"></script>
But this is how it's actually looking:
...
...
<script src="worklight/cordova.js"></script>
<script src="worklight/wljq.js"></script>
<script src="worklight/worklight.js"></script>
<script src="worklight/checksum.js"></script>
<script src="cordova.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="js/app.min.js"></script>
As you can see there are two Cordova references, one correct (worklight/cordova.js) and one incorrect (cordova.js)
The extra cordova.js is apparently coming from gulpfile.js at line #148 where it inject.push (path-to-cordova.js). This injection should be removed or handled differently because MFP already uses Cordova and injects it. Use MFP's.
You can also fix the header. It seems to happen because of the following in app.min.css:
.app-body, .app-content {
height: 100%;
overflow: hidden;
display: block;
padding: 0;
}
Change padding: 0 to padding-top: 25px;. But that may be iOS-specific... meaning you will not see it when previewing the app in the MFP console, because there is no status bar there unlike in the iOS Simulator/device.
The problem with angular mobile ui was my manual bootstraping of angular for MFP
i was using
angular.element(document).ready(function(){
angular.bootstrap(document, ['yoMAUI']);
location.hash = '/';
});
When I need to bind to that body and not the document like so
var body = document.getElementsByClassName("body") ;
angular.element(document).ready(function(){
angular.bootstrap(body, ['yoMAUI']);
location.hash = '/';
});
Is this going to mess with MFP at all, it all? seems to be running fine in the console
I have created an app using phonegap for iphone, android and windows.
iphone and android works fine but in windows phone I am able to see only home page there is something issue with angularjs routing when I touch on any link it display page not found. Or ng-href is not redirecting to respective page.
Please help its the crical and wierd issue for me.
Thanks,
Vijay
You will need to provide more details and some code snippet of your app, otherwise it'll be difficult to answer your question.
I encountered similar issue before, and these are the things that I did to solve it:
Specify namespace in your html and put the ng-app in the html tag
<html xmlns:ng="http://angularjs.org" ng-app="app" id="ng-app">
Manually run your angular on device ready event
document.addEventListener('deviceready', function() {
angular.bootstrap(document, ['app']);
}, false);
Make sure you have included ngRoute, in your index.html
<script src="lib/angular-route.js"></script>
and in your angular
var app = angular.module('app', ['ngRoute']);
Watch out for jQuery if you are using any, sometimes it is the jQuery that is causing the problem/ incompatible.
There is also XHR problem: https://github.com/angular/angular.js/issues/4288#issuecomment-26429558, so just make sure you are using the latest Phonegap.
Just some of the general answer that I could give, hope it solve your issue.