Angular 2 in Phonegap doesn't work (plain javascript) - javascript

I build a website with angular 2 in plain javascript and everything it's working ok in browser, but when I try to build phonegapp app or use it with Phonegap Mobile app it doesn't work.
In index.html I have:
<body>
<app>Loading app...</app>
<!-- 1. Load libraries -->
<script src="libs/angular/2.0.0-beta.3/angular2-polyfills.js"></script>
<script src="libs/angular/2.0.0-beta.3/Rx.umd.js"></script>
<script src="libs/angular/2.0.0-beta.3/angular2-all.umd.js"></script>
<!-- 2. Load our 'modules' -->
<script src='app/services.build.js'></script> <!-- All our services, as server comunication -->
<script src='app/components.build.js'></script> <!-- All the components -->
<script src='app/app.component.js'></script> <!-- App component, main one -->
<script src='app/main.js'></script> <!-- Main -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
phonegapApp.initialize();
</script>
</body>
And on main.js I have:
var phonegapApp = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
ng.platform.browser.bootstrap(AppComponent,[
ng.router.ROUTER_PROVIDERS,
new ng.core.Provider(ng.router.LocationStrategy, {useClass: ng.router.HashLocationStrategy})
]);
}
};
So I include ng.platform.browser.bootstrap when device is ready. (Also tried with document.addEventListener('DOMContentLoaded', function() {...} but with same result.
All that I can see it's Loading... so <app>Loading...</app> it's not interpreted by angular.
Do you have any idea what I should change to work? Thanks.

You need to add shims to make it working on phonegap. That can be either es6-shim.js/es5-shim.js
Probably that will solve your issue.

Related

I Got f.getClientRects is not a function error due in my project i use juqery.min.js file 2 times in layout for different purpose

This is first ,
src="~/Scripts/jquery-3.2.1.min.js"
This is 2nd ,
2. src="https://code.jquery.com/jquery-3.2.1.min.js".
both are needed because, i have use some third party control,
out if this some control need first and some need 2nd.
Help?
To load juqery.min.js file 2 times in layout for different purpose use jQuery.noConflict():
<!-- load local jQuery 3_2_1 -->
<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var jQuery_local_3_2_1 = $.noConflict(true);
</script>
<!-- load jQuery 3.2.1 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var jQuery_3_2_1= $.noConflict(true);
</script>

Adding app.js to angular application

I'm triying to add bootstrap ui modules to an angular project. In every tutorial I read that after download the module i'm supposed to add a directive (angular.module(for example: 'App', ['ui.carousel']) to certain file that in some forums i've read is called app.js. This file doesnt exist in my project. The question is: Should I create it? Where? Is a controller necesary? How is the flow that this must follow? Then I should add it to the index.html?
Getting advanced here with components without even knowing the basics. I recommend starting with just controllers (without components). But, here is a basic example of how scripts are added:
<!DOCTYPE html>
<html ng-app="myApp">
<!-- Adding scripts here. The order matters: angular.js first, then its dependancies, e.g. ui-bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div>
<!-- main body -->
<div>
<hello-world name="World"> </hello-world>
</div>
</div>
<!-- ng-template simulates a separate file -->
<script type="text/ng-template" id="my_component.html">
<input class="form-control" ng-model='$ctrl.name'><br><span>Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!</span>
</script>
<!-- This script can be also written as:
<script src="/app.js"></script>
if the file `app.js` is located in root directory of the server,
which should contain the AngularJS code below
-->
<script>
var app = angular.module('myApp', ['ui.bootstrap']); // injected dependancies
app.component("helloWorld", {
templateUrl: "my_component.html",
/* component template */
bindings: {
name: '#'
},
controller: function() {
this.myName = 'Karolyn'; // use of `this` requires `$ctrl` in the template HTML
}
});
</script>
</body>
</html>

How to load external script after Angular 2 loads

I have dynamic navigation bar which fetch data from API.
The problem is the list items in the navigation bar does not toggling consistently. It works sometimes and doesn't most of the time.
There are no script error in the console window, its clean.
The script for the navigation panel toggle is from the Metronic template itself in the file called layout.js
I am suspecting its because the layout.js loads before the angular renders in DOM sometimes. It that case the toggle doesn't work properly.
Any Suggestions please !
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="/systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="~/assets/layouts/layout/scripts/demo.min.js" defer type="text/javascript"></script>
<script src="~/assets/layouts/global/scripts/quick-sidebar.min.js" defer type="text/javascript"></script>
<script src="~/assets/layouts/global/scripts/quick-nav.min.js" defer type="text/javascript"></script>
#*<script src="~/Scripts/jquery-1.10.2.min.js"></script>*#
<script src="~/assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="~/assets/layouts/layout/scripts/layout.js" defer></script>
<!-- END THEME LAYOUT SCRIPTS -->
Try this:
Import the AfterViewInit from #angular/Core and implement it's function.
Make sure your layout.js is referenced in the scripts for your app in the angular-cli.json.
In your component.ts import your layout.js like this:
import {layout} from 'file/location/layout.js';
Edit your layout.js file to have its current code wrapped with this:
var extJs = (function() {
return{
getExtJs: function() {
//js code goes here
}
}
Back in your component declare a variable that refers to the one in layout.js:
declare var extJs: any;
Then call the layout.js function when the view has finished loading:
ngAfterViewInit(): void {
extJs.getExtJs();
}

Angular and Material Design Light

I'm triyng to implement MDL in a simple Angular app.
The issue is that even if I put the MDL javascript file before the angular javascript files MDL components that rely on MDL doesn't work.
This is my scripts order:
<script src="js/material.min.js"></script>
<script src="js/jquery.swipebox.min.js"></script>
<!-- load angular, ngRoute, ngAnimate -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
<script src="js/functions.js"></script>
How can I make other javascript libraries work with angular?
I found this and worked for me
angular.module(...)
.run(function($rootScope, $location, $timeout) {
$rootScope.$on('$viewContentLoaded', function() {
$timeout(function() {
componentHandler.upgradeAllRegistered();
});
});
})

Using Ember.js for Single Page Website (not really a web app)

I just want to try using Ember.js for a website I am doing (Disclaimer: I am a Java web developer, GWT).
So far what I have tried is to slap the whole body tag code into like this
<body>
<script type="text/x-handlebars">
<!-- The whole page -->
</script>
</body>
Now, I just want to take advantage of Ember.js stuff like components, models and validation for my website.
Here's a run down of the dependencies involved:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js" type="text/javascript"></script>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Ember -->
<script src="js/libs/handlebars-v3.0.0.js"></script>
<script src="js/libs/ember-template-compiler-1.10.0.js"></script>
<script src="js/libs/ember-1.10.0.debug.js"></script>
<script src="js/app.js"></script>
app.js
App = Ember.Application.create();
App.Router.map(function() {
});
The thing is, when I put the body into a x-handlebars script the jQuery plugins (like bxslider, carousel, etc.) that used to work would not work with the stuff that was inside the script tag.
What could be wrong with my approach?
What is rendered in your <script type="text/x-handlebars">Script</script> is being rendered after your JQuery code has run. You can fix this by modifying using the didInsertElement event in your view or component to run any code that is needed to initialize the elements in the view that was rendered.
didInsertElement: function() {
this.$().DoStuff();
}
There are a number of other questions on StackOverflow - including, for instance, this one - addressing similar issues, so you should be able to adapt their approaches.

Categories