Use cordova-universal-links-plugin with AngularJS app

jpduckwo commented 8 years ago

Hi, fantastic work on the plugin it's really helpful and made my life easier. I'm sharing my code for integrating the plugin with an AngularJS app as I had quite a bit of digging around to get this solution to work.

I hope this helps someone else and maybe you can add to the documentation. Probably needs a bit of tidying up:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Usual head stuff -->
    <script type="text/javascript" src="cordova.js"></script> <!-- Cordova JS included first -->
</head>
<body>
    <!-- Placeholder for views -->
    <div ui-view></div>
    <!-- angular.js and other js files included here first -->
    <script type="text/javascript">
    // The callback function that universalLinks will execute when triggered. It need to access the currently running angular app and change the location path and params then apply the location change using $scope. apply();
    function universalLink(eventData) {
        console.log('universal link call: ' + JSON.stringify(eventData));
        var $injector = angular.element(document.body).injector();
        var $location = $injector.get('$location');
        var $scope = angular.element(document.body).scope();
        $location.path(eventData.path).search(eventData.params);
        $scope.$apply();
        console.log(window.location.href);
        console.log($location.url());
        console.log($location.path());
    }

    // Bootstrap the angular app 
    angular.element(document).ready(function() {
        if (window.cordova) {
            console.log("Running in Cordova, will bootstrap AngularJS once 'deviceready' event fires.");
            document.addEventListener('deviceready', function() {
                console.log("Deviceready event has fired, bootstrapping AngularJS.");
                // Bootstrap the app
                angular.bootstrap(document.body, ['app']);
                // Hide splashscreen if using plugin
                navigator.splashscreen.hide();
                // Link the callback function to universalLinks
                universalLinks.subscribe('your_event_name_or_null', universalLink);
            }, false);
        } else {
            console.log("Running in browser, bootstrapping AngularJS now.");
            angular.bootstrap(document.body, ['app']);
        }
    });
    </script>
</body>
</html>

nikDemyankov commented 8 years ago

Thanks for that! I'll add it to the documentation later on: I want to move readme into wikki, since it's quite big now and a bit hard to navigate.

redwind commented 7 years ago

many thank to you !!

raykudo commented 7 years ago

tons of help!!!!

rabruce commented 6 years ago

If you want to have your code live within your angular app instead (so you can perform logic based on the link), you can use $rootScope.$emit() in order fire an event that angular can handle. That way you can avoid injecting your custom logic services into your index.html.

I hope this is helpful, since this issue saved me some serious time.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Usual head stuff -->
    <script type="text/javascript" src="cordova.js"></script> <!-- Cordova JS included first -->
</head>
<body>
    <!-- Placeholder for views -->
    <div ui-view></div>
    <!-- angular.js and other js files included here first -->
    <script type="text/javascript">
    // The callback function that universalLinks will execute when triggered. It need to access the currently running angular app and change the location path and params then apply the location change using $scope. apply();
    function universalLink(eventData) {
        console.log('universal link call: ' + JSON.stringify(eventData));
        var $injector = angular.element(document.body).injector();
        var $rootScope = $injector.get('$rootScope');
        $rootScope.$emit('universalLink', eventData);
    }

    // Bootstrap the angular app 
    angular.element(document).ready(function() {
        if (window.cordova) {
            console.log("Running in Cordova, will bootstrap AngularJS once 'deviceready' event fires.");
            document.addEventListener('deviceready', function() {
                console.log("Deviceready event has fired, bootstrapping AngularJS.");
                // Bootstrap the app
                angular.bootstrap(document.body, ['app']);
                // Hide splashscreen if using plugin
                navigator.splashscreen.hide();
                // Link the callback function to universalLinks
                universalLinks.subscribe('your_event_name_or_null', universalLink);
            }, false);
        } else {
            console.log("Running in browser, bootstrapping AngularJS now.");
            angular.bootstrap(document.body, ['app']);
        }
    });
    </script>
</body>
</html>

app.run(function($rootScope) {
    $rootScope.$on('universalLink', function(event, data) {
        console.log('Did launch application from the link: ', data);
    })
})

nordnet-deprecation-bot commented 5 years ago

👋 Hi! Thank you for your interest in this repo.

😢 We are not using nordnet/cordova-universal-links-plugin anymore, and we lack the manpower and the experience needed to maintain it. We are aware of the inconveniece that this may cause you. Feel free to use it as is, or create your own fork.

🔒 This will now be closed & locked.

ℹ️ Please see #160 for more information.

nordnet / cordova-universal-links-plugin

Use cordova-universal-links-plugin with AngularJS app #83