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.
Related
Please, I need a final step-by-step to add and use plugins with Ionic.
I lost several weeks trying to use plugins on Ionic but everytime I got plugin function "is not defined". I really need to solve this issue, but I don't got success.
First of all I'm not trying to use native plugins that uses special hardware components like camera. I'm following the steps below:
1) I created my app using cordova
2) I added my plugin using:
cordova plugin add mercadopago-plugin
3) I've inserted this following scripts on my index.html:
<script src="cordova.js"></script>
<script src="app.js"></script>
4) I created a button calling my plugin on my template.html
<button ng-click="startCheckout()"> OK </button>
5) I called my plugin on app.js
.controller('MyCtrl', function($scope) {
$scope.carrinho = allcarrinho;
var publicKey = "TEST";
$scope.startCheckout = function(){
MercadoPago.startCheckout(publicKey, prefId, null, false, success, failure);
}
})
6) I've emulated my app on the browser typing on my admin prompt command:
ionic serve
But when the plugin is called I got this error:
ReferenceError: MercadoPago is not defined
I following everything on documentation:
Plugin's documentation: http://mercadopago.github.io/px-hybrid/
How do I to fix it?
Thanks!
You probably have to inject MercadoPago in your controller:
.controller('MyCtrl', function($scope, MercadoPago /*<--here*/) {
I didn't see your full code but it has to be something like that.
or to have it not break when minifying:
.controller('MyCtrl', ['$scope', 'MercadoPago', function($scope, MercadoPago) { ....
See this
Most Cordova plugins do not work in the browser. You should try on an emulator or simulator.
Either that, or you need to wait for document.ready or ionicPlatform.ready for the plugin to initialize before trying to use it
This plugin makes native calls when you use ˝MercadoPago". It won't work in your browser, you should run it on an Android Emulator or Phone.
Try:
ionic emulate android -l -c
And it should work.
I tried working on the following plunker example which works fine with angular version 1.2.x.
But when the angular version is updated from 1.2.x to 1.3.x.
It does not seem to work.
The views does not seem to change when I click on the other tab.
http://plnkr.co/edit/nmTggEdWIcMW5bMRKiok?p=preview
The following change was made to the plunker.
<script data-require="angular.js#1.3.x" src="http://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script data-require="angular-animate#*" data-semver="1.3.15" src="http://code.angularjs.org/1.3.15/angular-animate.js"></script>
When tried on the chrome, there were no errors generated on the browser console but the views did not change when clicked on the second tab. Browser used Chrome-latest-version.
Might be a duplicate of
AngularJS, animations with ui router which versions work?
PS: I tried different combination of the bootstrap versions and angular-ui-router versions with angular 1.3.x. Was not able to find a successful combination. I use angular-material-design which requires angularjs version to be 1.3.x. Any help on this issue would be appreciated.
I am working with an existing application that I would like to add angular to. The application is using a custom proprietary SPA framework + dojo. The application is built with mainly dojo modules and heavily utilizes AMD modules.
I have imported angular in the head with
<script type="text/javascript" src="lib/angular/angular.js"></script>
I have also added
<html ng-app="myApp">
<script>
angular.module('myApp', [])
</script>
to my index.html.
I have also tried manually bootstrapping via
var app = angular.module('myApp', []);
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
but still
{{1+1}}
Does not evaluate. It remains as {{1+1}}
The only way I get get it to (sort of) work is in my partial view (rendered inside body of index.html) and I manually bootstrap the application via
var app = angular.module('myApp', []);
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
But as soon as I leave the page and come back, the bootstrapping is gone. {{1+1}} shows as {{1+1}} not 2. If I run the above code again, I get an error saying document is already bootstrapped.
No errors are thrown in console..
I am not sure what to try next. Any help? Thanks
Is the page content dynamic, are the other frameworks adding HTML to the page that has Angular syntax in then you are expecting to be evaluated? If so that is the issue.
Please note that Angular is a fully featured framework and that frameworks generally conflict with each other. For Angular to work you need to add Angular code to the page using Angular APIs, such as ng-include, other directives, or a controller and manually compile the HTML being added.
When is the partial view actually rendered?
Unless you actually pass the partial through Angular's $parse service (which happens automatically on bootstrap), Angular can't evaluate the expressions. So, if you are adding the partial to the DOM after the bootstrap, Angular will never process it.
using dojo, you would need to pass the content through the $parse service first, i.e.:
require(["dojo/html"], function(){
content = $parse(someAngularContent);
html.set(node, content);
});
Hello I am using UI Bootstrap for displaying datepicker in my app.
this is my reference order:
<!--ANGULAR CORE-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js"></script>
<!--APPLICATION INIT-->
<script src="app/js/app.js"></script>
<!--JQUERY-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!--BOOTSRAP UI-->
<script src="app/js/libs/ui-bootstrap-tpls-0.11.0.min.js"></script>
I use the tpls version because it supposes to include the templates.
I inject the dependency like that:
angular.module('globapp', ['ngRoute', 'ui.bootstrap'])
when I try to popup the datepicker it doesn't show. In the chrome developer I can see that the code searches for template folder, and I recieve 404 error (datepicker.html, popup.html).
I searched about that in the internet, and everyone tells the same thing: if I use the tpls version, it should provide me the default templates.
thanks
Your app.js has your app init -so that's where your creating your angular module and are hoping to inject bootstrap-ui as a dependency but that script hasn't been loaded yet as it's last in the list.
This would be the first thing to check. Load your scripts in order of least dependent first so jquery first then your core angular, then your plugin libraries and then your app scripts.
What issues might I experience in having two different versions of AngularJS loaded into one page?
Obviously this seems like a stupid thing to do, but my use case is a page that uses AngularJS incorporating a third-party component that drags in its preferred version of AngularJS.
Update:
Found some info:
https://groups.google.com/forum/#!msg/angular/G8xPyD1F8d0/u1QNDNvcwW4J
https://github.com/angular/angular.js/pull/1535
Angular is really not prepared to co-exist with other version. But it's feasible.
First of all load angular library and make sure that before loading window.angular is empty:
<script src="vendor/angular/1.2.0/angular.min.js"></script>
<script src="app/app2.js"></script>
<script>
var angular2 = angular;
window.angular = null; // here we're cleaning angular reference
</script>
<script src="vendor/angular/1.0.5/angular.js"></script>
<script src="app/app1.js"></script>
<script>
var angular1 = angular;
</script>
Note that each application (app1.js, app2.js) for each version of angular should be loaded immediately after loading angular library.
Each JavaScript file of the application shoud be wrapped in self executing function (function(angular) { ... })(angular). Look at the example of app2.js:
(function(angular) {
angular.module('myApp2', []).
controller('App2Ctrl', function($scope) {
$scope.$watchCollection('[a, b, c]', function() {
console.log(angular.version.full);
});
});
})(angular);
Note that here I'm using $watchCollection which is only available for angular 1.2.x. By providing scope of anonymous function for each file you are forcing application to reach angular property instead of window.angular property.
Finally you have to bootstrap the application using manuall method:
<body>
<div id="myApp1" ng-controller="App1Ctrl">
</div>
<div id="myApp2" ng-controller="App2Ctrl">
</div>
<script>
angular1.bootstrap(document.getElementById('myApp1'), ['myApp1']);
angular2.bootstrap(document.getElementById('myApp2'), ['myApp2']);
</script>
</body>
Working plunker here. After running please check console window to see logged versions of angular used.
Great question! Like you, we were unable to uncover much on this topic...we are in the process of deploying a version of Angular with our product which will be embedded within client websites that could also have Angular already loaded.
Here is what we have done:
Modify the Angular source - do not use "window.angular" or "angular" in your implementation, choose some other variable or object property to house it. If you do use "window.angular" and/or "angular", it could break both applications if the versions are different.
Rename all delivered objects (directives, etc); otherwise, the other version of angular could attempt to process your directives.
Rename all CSS classes used by Angular (ng-cloak, etc). This will allow you to style your version of Angular separately from the other version.
Manually bootstrap your application, as described by 'kseb' above.
If you are going to completely name space AngularJS as I have described here, take care to not do a global search and replace because angular does need a "window" reference for registering events, and a few other places.
I just finished doing this at work and I am in the process of testing. I will update this answer with my results.
Matt Burke describes a process to wrap the Angular JS libs in a function to create a closure. Downside is that you cannot load Angular via a public CDN as you have customized the download.
http://www.mattburkedev.com/multiple-angular-versions-on-the-same-page/
Angular 2 will provide a new router with similar features to UI router, but that will also allow to have some routes in Angular 1 and others in Angular 2.
This router is currently being backported to Angular 1, see here a presentation from the developer of the new router explaining how this will work.
The idea behind a common cross-version router with support for both version is to help users upgrade from Angular 1 to Angular 2.