I have a mean-stack web site. Initially, views/index.html (having <ui-view></ui-view>) is the entry point of all the pages. It uses angular-ui-router and html5mode. Thus, https://localhost:3000/XXXX in a browser will remain the same (rather than adding #) and show the corresponding content based on the router.
Then, I want the server to serve also an Office add-in. I will need views/addin.html that contains office.js and another router, such that the site serves a set of urls https://localhost:3000/addin/XXXX, and I don't mind if it is html5mode or not (a url can contain # somewhere).
So here is the correpsonding of routes/index.js:
router.get('/addin/*', function (req, res) {
console.log("router.get /addin/*");
res.sendfile('./views/addin.html')
});
router.get('*', function(req, res) {
console.log("router.get *");
res.sendfile('./views/index.html');
});
And here is views/addin.html:
<html>
<head>
<title>F-addin</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
<!--<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>-->
<base href="/" />
</head>
<body ng-app="addinF">
addin content
<ui-view ng-cloak></ui-view>
</body>
<script>
var addinApp = angular.module('addinF', ['ui.router'])
addinApp.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
$stateProvider
.state('addinNew', {
url: '/addin/new',
template: "new page"
})
.state('addinHome', {
url: '/addin/home',
template: "home page"
})
$locationProvider.html5Mode(true);
}]);
</script>
</html>
When office.js is commented as above, https://localhost:3000/addin/new and https://localhost:3000/addin/home in a browser work well. However, when office.js is uncommented, there is an odd behavior: typing https://localhost:3000/addin/new in a browser will change to https://localhost:3000/#/addin/new, then change back to https://localhost:3000/addin/new. And we will see addin content new page appear once and disappear.
With office.js uncommented, if we load a manifest file with <SourceLocation DefaultValue="https://localhost:3000/addin/new"/>, we will see also in the task pane addin content new page appear once and disappear, and then Add-in Error Something went wrong and we couldn't start this add-in. Please try again later or contact your system administrator.
Without html5mode here, .../addin/new or .../addin/home in a browser will only show addin content; the add-in can be loaded, with only addin content too.
My goal is to make an add-in pointing to .../addin/new or .../addin/home work. office.js has to be loaded somewhere. I don't mind if it is html5mode (ie, the url has #), but the behavior in either way is odd or unsatisfactory. Does anyone know how to fix it or have a workaround?
Looking at the debug version of the office.js file:
https://appsforoffice.microsoft.com/lib/1/hosted/office.debug.js
You'll see that the window's history replaceState and pushState functions are set to null:
window.history.replaceState = null;
window.history.pushState = null;
Which disables the ability to manipulate the browser's history and it seems it has Angular thinking the history API is not available, so Angular falls back to hashtag navigation.
In the office.js minified version you can find these two lines by looking for:
window.history.replaceState=e;window.history.pushState=e;
You could remove these two lines of code to re-enable html5mode, but i'm not sure if the office.js plugin will keep working properly.
Related
I am using angularjs routing in my web app, and I have included the $locationProvider and the base tag in HTML head which is <base href="/webapp/"> in order to remove the hash symbol in the URL, it works fine when I redirect using anchor tags e.g. Home but gives a 404 error when I redirect using javascript e.g. window.location.href = '/webapp/home';. Tried everything but so far nothing, any help will be highly appreciated. Thank you in advance.
Try : Home
When you are using angular(JavaScript) routing; JavaScript routing start after # keyword in URL, other wise browser think this is the server side routing trigger; or page will get refresh.
USE : Home
$locationProvider will remove the # after redirecting to the the view.
I am using UI-Router for routes/states in my app and URLs were having "#" so to remove this , I used $locationProvider like -
function configState($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
Added ngRoute in module dependency and added <base href="/" > in my index.html.
Problem -
If I am using it as a normal app like in same tab and navigates to other state, it works BUT whenever I pasted the URL in another tab and hit enter its throwing Cannot GET /app_views/contacts URL is like - http://localhost:9000/app_views/contacts
Though with hash in URL it works in both way manner.
You are likely getting this error because your server is not configured correctly. In other words when you manually enter /app_views/contacts it will make a request to the server for that page. For this to work properly you need configure your server to route all traffic to your index.html page in order for Angular to properly take over and display the correct view.
Here is a related post Reloading the page gives wrong GET request with AngularJS HTML5 mode
I want to create a module that basically includes javascript on to every page on a dotnetnuke site. I can include a js file in the current page,
ClientResourceManager.RegisterScript(this.Page,
"~/DesktopModules/AuthenticationServices/ZapperScanToLogin/view.js",
FileOrder.Js.jQuery);
but what I really want to do is install my module on the home page and it will include javascript on to every page on the dnn site. Is this possible, how can I do it?
I would honestly do this with a modification to your skin, but here are the steps to do it with a module.
Create a module (I recommend starting with my templates http://christoctemplate.codeplex.com)
Add your JS code
Add the module to the homepage
Go to the module settings, choose Display on All Pages
I would add this to your skin, either just manually by adding the reference, or by creating a SkinObject rather than a module.
If you do it as a module it is possible that a user can delete the module from the page, or a number of other things. if this script is a requirement it is best to make it so that users can't break the site by doing something accidentally.
One way to do it is add to the header of the site, under site settings. Logged in as SuperUser:
Go Settings (Cog) Site Settings
Site behavior Tab - Default Pages
At the bottom: Page Output Settings
HTML Page Header Tags: add your script link:
Sample below. Does not show up at bottom of page, shows up top in header, but will be on every page.
<script type="text/javascript" src="/Portals/0/Your-js-here.js"></script>
There ought to be a page template for your module which you can edit and insert the jQuery script reference into the header of (in between the <head> tags). This would then be loaded on each page of the module.
Here are a couple of references that might help:
http://wnsinj.codeplex.com/
http://www.dnnsoftware.com/community-blog/cid/135141/DotNetNuke-Tips-and-Tricks-11-Using-jQuery-in-DotNetNuke
What I ended up doing was including a javascript registration in the js/debug/dnn.modalpopup.js file, which then registers my javascript on the login and registration pages and popup dialogue boxes.
var myView = document.createElement("script");
myView.type = "text/javascript";
myView.src = "/js/view.js";
var myTech = document.createElement("script");
myTech.type = "text/javascript";
myTech.src = "/js/mytech.js";
document.head.appendChild(myView);
document.head.appendChild(myTech);
I am not sure placing the javascript files in that location is ideal or not, but this is the solution that works for me. I think the manual dev work per DNN site will be minimal so I hope it's an acceptable solution.
I am not sure whether I should put the script in the page head, or the body... the order of loading and what not of javascript is a mystery to me.
I have AngularJS setup to use HTML5 routes and it works great on urls like website.com/foo but when I create routes for sub pages, eg: website.com/foo/bar it only shows the correct page when clicking a link to it on my site. If I type the url into my browser and attempt to directly access it I get a blank page section where the ng-view content should be loading.
app.when('/promotion/events', {
templateUrl: '/assets/tpl/promotion/events/home.html',
controller: PromotionEventsCtrl
});
It appears to be a bug in Angular 1.1.5 that is effecting URL parsing in HTML5 routes. Rolling back to 1.1.4 fixes the problem.
More information here: https://github.com/angular/angular.js/issues/2833
Background
I'm attempting to upgrade an iOS app built on Cordova 2.0 to version 2.7.
It's basically a welcome screen that points to a remote search engine (please withhold comments about app validity and likely approval, as we're past that), and we were using the ChildBrowser plugin to enable opening links in a sub browser so as not to trap the user in the Cordova webview.
Cordova 2.7 has a feature called InAppBrowser I am hoping to use instead of ChildBrowser. InAppBrowser does essentially the same thing, aside from missing a button to open in Safari.
Problem
The existing app's remote webpages include the Cordova JS (as well as that for the ChildBrowser plugin) and it works fine for opening links in the sub browser.
My test Cordova 2.7 app doesn't seem to load the Cordova JS correctly when it's being loaded from a remote web page.
I tried using this exact same HTML on the embedded start page and a remote start page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://mydomain.com/mobile/cordova-2.7.0.js"></script>
</head>
<body>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("Ready!!");
}
</script>
</body>
</html>
To test this as the embedded start page, I put this line in config.xml:
<content src="index.html" />
When I run the app, I promptly get the "Ready!" alert.
To test this as the remote start page (I'm aiming to link to the remote page in the final app, I am just using it as the start page for testing. The result is the same if I link from the embedded page.), I put this line in config.xml:
<content src="http://mydomain.com/mobile/index.php" />
When I run the app, I just get the blank screen and no alert.
Further, in cordova-2.7.0.js L. 6255, I changed
console.log('deviceready has not fired after 5 seconds.');
to
alert('deviceready has not fired after 5 seconds.');
With that change, running the app using the remote start page causes the blank page, and then after five seconds, I get the alert "deviceready has not fired after 5 seconds.". So this tells me Cordova JS is not starting correctly. Needless to say, I can't get InAppBrowser to launch links in the sub browser on the remote site, but I can get it working just fine on the embedded start page.
Anyone have any ideas of where to go from here? This is a pretty simplistic example, so I'm assuming this is a Cordova settings problem or a change in the functionality. I appreciate any thoughts, thanks!
Yes, something broke in 2.7 - related to our cordova-cli work. See: https://issues.apache.org/jira/browse/CB-3029
The fix is to add an empty file called "cordova_plugins.json" in your root folder.
I had a similar problem relating to upgrading to Cordova 2.7. However my problem was all my console.logs stopped firing when running the app. I couldn't figure out why for the life of me this was happening. I thought it was because I upgraded jquery.mobile. That wasn't it. I then thought it was an .htaccess issue, that wasn't it either. It turns out, it was Cordova 2.7 that was causing this problem.
I did try adding the .json file on my server, that did not fix the issue.
The fix was going into the 2.7 source and commenting out the following code:
/*comment out this as it is breaking console.logs
var xhr = new context.XMLHttpRequest();
xhr.onload = function() {
// If the response is a JSON string which composes an array, call handlePluginsObject.
// If the request fails, or the response is not a JSON array, just call finishPluginLoading.
var obj = this.responseText && JSON.parse(this.responseText);
if (obj && obj instanceof Array && obj.length > 0) {
handlePluginsObject(obj);
} else {
finishPluginLoading();
}
};
xhr.onerror = function() {
finishPluginLoading();
};
xhr.open('GET', 'cordova_plugins.json', true); // Async
xhr.send();
*/
Replace entire block with a call to the following function:
finishPluginLoading();
My logs are now working again. Only took me 3 days scratching my head.
Hope this helps someone with a similar problem.
If you embed Cordova in the external web page, there will be no way to open the InAppBrowser from within your hybrid app, so Cordova will not be able to load. This is because the InAppBrowser requires Cordova to be fully loaded and initialized before it can be used to fetch a remote page. You need to use your HTML page that you have, with the <script type="text/javascript" src="http://mydomain.com/mobile/cordova-2.7.0.js"></script> as the main entry point for your app. Then you can use the InAppBrowser to open up your remote page. (You could probably do this in the onDeviceReady(), not sure if it would "flash" the page first though.) I don't think the remote page should have any Cordova code in it at all. I'm not sure if it would be possible to even interact with Cordova from the remote page due to the Same Origin Policy (probably you could use features of the InAppBrowser to inject "bridge" code though to get around this.)
As Shazron mentioned the problem is the issue with the file"cordova_plugins.json".
To solve the problem not changing the code you can create the "cordova_plugins.json" file in the root folder and insert a content between quotation marks inside this file.
Mine for example has the following content:
"Just a dummy file required since Cordova 2.6.0"
create a file cordova_plugins.json that contains {}. then go to cordova-2.7.0.js and comment this line require('cordova/channel').onNativeReady.fire(); then when development done, add it back
Like me if you are using Cordova 5.1.1 and want to access native functionality after redirect then copy cordova.js, cordova_plugins.js and plugins folder which is at \platforms\platform_name\assets\www\ and put them on server, finally reference cordova.js inside your html. After every plugin add make sure to update these files and folder.