Including directives with phonegap - javascript

I am using yeoman to generate an angular application and deploying it with phonegap to a mobile platform (ios) to be exact, however I am having issues with getting directives to work.
I have a directive called "header" that basically does what it says on the box and displays a header and looks like this.
I am using yeoman to generate an angular application and deploying it with phonegap to a mobile platform (ios) to be exact, however I am having issues with getting directives to work.
I have a directive called "header" that basically does what it says on the box and displays a header and looks like this.
angular.module('myappApp').directive('header', function(contentUpdater) {
function link(scope) {
scope.contentUpdater = contentUpdater;
scope.headerTextThin = scope.contentUpdater.getHeaderTextThin();
scope.headerTextBold = scope.contentUpdater.getHeaderTextBold();
}
return {
restrict: 'E',
link: link,
scope: {
},
templateUrl: 'header.html'
};
});
Even though it shows on the browser, when i simulate with phonegap run ios it doesn't show up. I do have the header in under app/scripts/directives/header.html and the js file in app/scripts/directives/header.js

I don't remember whether Phonegap minifies code by default, but perhaps it is uglifying the Javascript before deploying it on the iOS?
In that case, this should fix the problem:
angular.module('myappApp').directive('header',
['contentUpdater', function(contentUpdater) {
// ...
}]);

Related

AngularJS assertion failure on SharePoint React Script Editor Webpart SPFx Webpart

I have a Microsoft SharePoint 2013 application which consists of AngularJS customized application aspx pages. The application works perfectly fine on SP13.
But now the requirement is to move to SPO Modern Teams site. To prevent a lot of SPFx re-development and time lag, I have used a React Script Editor Webpart SPFx Webpart where I can simply copy the HTML and references that are already developed and working script files.
I am facing an intermittent issue where only on the first page load, it gives the below error:
Error: [ng:areq] Argument 'FormCtrl' is not a function, got undefined
When I refresh again, everything loads properly and works fine. I am unable to troubleshoot and figure out the issue trying multiple combinations and seek for help with this community.
Below is how the application is built on SharePoint 2013 (which works fine) but intermittently when moved to SPO React Script Editor Webpart:
SharePoint aspx page in Pages library.
Content Editor WebPart with reference to text file containing HTML.
Reference to jQuery, AngularJS, etc. and custom script files in HTML.
Custom Script files as:
An App File with definition to the app that is declared in the HTML as ng-app
var app = angular.module('myApp', ['ngRoute']);
A Constants file that is used in the controller
app.constant('config', {
ListName: 'This is the name of the list'
});
A service file. All REST API calls and common methods are defined here and called from controller
app.service('DataAccessLayer', ['$http', '$q', function ($http, $q) {
this.method1(){
....
}
this.method2(){
....
}
});
The main controller file which has the functionality written:
app.controller('FormCtrl', function ($scope, config, DataAccessLayer) {});

Angular routing behaving strange/differently with different browsers

I just finished coding a new web project using AngularJS and Bootstrap. The development took place using Brackets, an editing tool that launches Chrome for testing while functioning as the web server.
So far, everything works as required both when Brackets is used as the server as well as when the whole project is deployed within a Tomcat installation, and this as long as the browser being used is Chrome and the machine is a Windows 10 computer.
Now, I started testing the project using different browsers and devices (e.g tablets, mobiles, etc.) and, oops! I am getting crashes all the time.
It would appear that the first (and perhaps central) issue is coming from the way I implemented and use Angular's routing services (or, at least, this is what is suggested by several posts I found). Two things are happening (depending on the browser and the action triggered) pointing in that direction:
I received many times the error infdig, meaning that there is an infinite reload loop somewhere,
When the user successfully logs into the the system, an object containing the user's details is stored as a $rootScope object, and when a $window.location.href command is used to move to other page, all the user information previously stored disapears (strangely, this s not happening with Chrome, but it is with IE and Edge!).
Unfortunately, I was unable to fully understand what is the proper way of using the routing services.
The structure of the project is:
[MyApp] -- This is the folder containing the whole project under TOMCAT's "webapps" folder
index.html
index.js -- Contails the controller related ot the index.html page
[pages] -- Sub-folder hosting all the pages of the project except for the `index.html`
page1.html
page2.html
:
:
[js] -- Sub-folder hosting the controllers of each and every sub-page
page1.js -- Sub-page controller
page2.js -- Sub-page controller
:
:
Transition to the sub-pages (e.g. page1.html, etc.) takes place using the command $window.location.href = "#page1.html";, and the routing service is defined:
$routeProvider
:
:
.when('page1.html', {
templateUrl: '#/pages/page1.html',
controller: 'Page1Controller'
}
.when('page2.html', {
templateUrl: '#/pages/page2.html',
controller: 'Page2Controller'
}
:
:
Based on some posts related to how to define routing, I also tried:
.when('page1.html', {
templateUrl: 'pages/page1.html',
controller: 'Page1Controller'
}
and
.when('page1.html', {
templateUrl: '/pages/page1.html',
controller: 'Page1Controller'
}
getting errors in both cases (e.g. page not found).
Additionally, it is not clear to me what is the impact of including the statement $locationProvider.html5Mode(true); (when including this, I got an injection error).
How can I properly use this Angular routing service, and how can I set HTML5 mode?
Routing params: the way I've done it and it works for me and its simple is using the same route function I showed before:
Then if you look at 'searchresult/:searchCriteria' :search criteria is already a parameter that I am putting in a JavaScript variable called sys (i.e at the beginning of my JavaScript I declare variable var sys = null;).
Then on the SearchResult Controller I put the value of sys inside a $scope variable let's say $scope.sys = sys;. This gives you the variable both in the scope and in JavaScript if you want to check the values in developer tools console and/or play with them.
To call the pafe http://url/#searchresult/myvalue
Just like before call $location.path("/searchresult/myvalue")
like this you can create a path with many arguments (i.e "/searchresult/myvalue1/myvalue2/myvalue3") and they all will be stored in the variable sys
PS: if you want to change your whole url use window.location.replace('new url') without any $. The difference between this routing and the Angular is that this will refresh the page while angular will only refresh your ng-view
Regarding the page not found issue make sure that templateUrl: 'pages/page2.html' has the same path as in the actual folders
- capital letters
- the s in "pages" is also present in the pages folder
Also make sure that the permission are ok such that your application is not getting denied access to the file. I don't know what OS you are using but make sure your application can access it
Regarding the loop error, to help I would need to see a bit more code, but if you open the application in Chrome and see the error in the developer tools it may give you a hint as of where your application is crashing. The other approach is to start commenting part of the application until you don't get the error to find the problematic line then analyze.
This is an example of a controller I use without problems:

Google Provider Login with Firebase and Ionic

I have been trying to create an Ionic Google login popup with Firebase. However, when the user tries to press the login button, the function is called producing a popup that is surprisingly completely blank.
$scope.login = function()
{
baseRef.authWithOAuthPopup("google", function(error, authData)
{
if (error)
{
alert('Hello');
}
else
{
$scope.auth = authData.google;
$scope.user.set("name", $scope.auth.displayName);
$scope.user.set("image", $scope.auth.profileImageURL)
$scope.user.save();
}
});
};
All my permissions in Firebase and Google have been properly set as well as those in the config file. Does anyone have any idea how I can possibly fix this issue to allow a functional popup to spawn?
I had quite a problem with this also.
It appears to work well with iOS, but no luck with android.
By using the command 'ionic state save' followed by 'ionic state restore' ionic readded the android and iOS platforms. It also added cordova-plugin-inappbrowser, cordova-plugin-whitelist (plugins) to the package.json file.
Next, I created an android build using 'ionic package build android' and send it to my OnePlus 2 using TestFairy.
Finally works, for both google and facebook.
In summary once the package.json file included the relevant plugins, I was able to create an APK file that worked with the firebase $authWithOAuthPopup.
(with these amendments, iOS still seems to work fine)

$window.location.reload no longer working android 4.4+ Ionic Angular

The app is built using the ionic framework.
Its been installed on a new device that's using Android 4.4.
Based on this question I used this code to reload the page:
$scope.reloadRoute = function() {
$window.location.reload();
}
This does not appear to work in Android 4.4+
I have tried the other suggestions from that answer, but they do not work for our case.
I tried this:
location.href = location.origin;
It doesn't work. I need it to reload.

AngularJS and Windows 8 route error

I'm trying to create a HTML5/JS/CSS3 App with angularJS on Windows 8.1 with visual studio 2012. I'm currently stuck on sending over parameters to other views.
When googleing I see several examples using link When I do this in my Windows 8 application and clicking on the link I am getting the following error.
No Apps are installed to open this type of link (unsafe)
When I put the {{:pageId}} code between the A tags it shows its ID.
app.js
var myApp = angular.module('myApp', ['ngRoute', 'ngResource']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when("/", { templateUrl: "views/home.html" })
.when("/page/:pageId", { templateUrl: "views/page.html" })
.otherwise({ redirectTo: "/" });
}]);
What is a solution to solve this problem?
--update--
I have done some more debugging.
In the browser it's all working fine.
In visual studio I have found the following:
<a class="ng-binding" href="unsafe:ms-appx://3595d292-0235-47cd-8db7-cb3019f29114/www/index.html#/page/1" data-ng-href="#/page/1">Select</a>
Looks like VS is adding some code. In the source I haven't include the href item
I have changed the link and all seems fine, also the correct variable is loaded only VS keeps adding 'unsafe:' at the frond of the link.
Problem solved!
seems like the ms-appx that is being added by ms causes the problem. This is being resolved by addeing this following code.
AngularJS 1.2
app.config(['$compileProvider', function($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|ms-appx):/);
}]);
For 1.1.x and 1.0.x, use urlSanitizationWhitelist.
If you use PhoneGap, remember to add file besides https?, otherwise, links will not work.

Categories