How to open an url using location service

Question

I have difficulties using <a href, so i try to find another workaround. The plan is to use ng-click to invoke an url, and reload the page using that url.

This is my html :

<li class="item" ng-click="go_to()">
    <img src="img/ionic.png">
    <p>Beginners Guide</p>
</li>

Which call :

app.controller("listController", ['$scope', '$location', function ($scope, $location) {
    $scope.go_to = function () {
        alert("a"); //CALLED
        var url = "http://google.com";
        $location.url(url); //NOT LOADED
    }
}]);

The end goal is, i just want my apps to open the url when the <li> is clicked

Thanks a lot for your help

Answer 1

You can use

$window.location.href = 'http://google.com'

Full code should look like

    app.controller("listController", ['$scope', '$location', '$window', function($scope, $location, $window) {
    $scope.go_to = function() {
        alert("a"); //CALLED
        var url = "http://google.com";
        $window.location.href = url;
    };
}]);

Answer 2

One simple way which always worked for me was :

<a href="...">
<li class="item" ng-click="go_to()">
    <img src="img/ionic.png">
    <p>Beginners Guide</p>
</li>
</a>

Answer 3

You could use $window.open(url, '_blank')

OR

You could look at this answer, in which I have made a such changes that you could redirect to other page, from ui-router state itself.

You can also customize ui-router by adding parameter external, it can be true/false.

$stateProvider
.state('external', {
     url: 'http://www.google.com',
     external: true
})

Then configure $stateChangeStart in your state & handle redirection part there.

Run Block

myapp.run(function($rootScope, $window) {
  $rootScope.$on('$stateChangeStart',
    function(event, toState, toParams, fromState, fromParams) {
      if (toState.external) {
        event.preventDefault();
        $window.open(toState.url, '_self');
      }
    });
})

Working Plunkr

Answer 4

Its better to use $stateProvider and you also need to add whitelist plugins to access external resources.

Use $stateProvider like this

.config(function($stateProvider, $urlRouterProvider) {

        // Ionic uses AngularUI Router which uses the concept of states
        // Learn more here: https://github.com/angular-ui/ui-router
        // Set up the various states which the app can be in.
        // Each state's controller can be found in controllers.js
        $stateProvider

            // setup an abstract state for the tabs directive
            .state('tab', {
                url: '/tab',
                abstract: true,
                templateUrl: 'templates/tabs.html'
            })

            // Each tab has its own nav history stack:

            .state('tab.dash', {
                url: '/dash',
                views: {
                    'tab-dash': {
                        templateUrl: 'templates/tab-dash.html',
                        controller: 'indexController'
                    }
                }
            })

            .state('tab.chats', {
                url: '/chats',
                views: {
                    'tab-chats': {
                        templateUrl: 'templates/tab-chats.html',
                        controller: 'CenterListController'
                    }
                }
            })
            .state('tab.chat-detail', {
                url: '/chats/:centerId',
                views: {
                    'tab-chats': {
                        templateUrl: 'templates/chat-detail.html',
                        cache:true,
                        controller: 'CenterDetailController'
                    }
                }
            })

            .state('tab.manual-Location', {
                url: '/manualLocation',
                views: {
                    'tab-account': {
                        templateUrl: 'templates/tab-account.html',
                        controller: 'ManualLocationController'
                    }
                }
            })
            .state('tab.manual-Location-List', {
                url: '/manualLocationList/:locationID',
                views: {
                    'tab-account': {
                        templateUrl: 'templates/manualLocationList.html',
                        controller: 'ManualLocationListController'
                    }
                }
            })
            .state('tab.manual-Location-Detail', {
                url: '/manualLocationDetail/:centerId',
                views: {
                    'tab-account': {
                        templateUrl: 'templates/manual-Location-Detail.html',

                        controller: 'ManualLocationDetailController'
                    }
                }
            });

        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/tab/dash');

    });

Answer 5

The $location service is not designed to navigate away and reload the current page. It is designed for single page applications.

https://docs.angularjs.org/guide/$location

The $location service allows you to change only the URL; it does not allow you to reload the page. When you need to change the URL and reload the page or navigate to a different page, please use a lower level API, $window.location.href.

If you are trying to navigate to a different page, use:

$window.location.href = "http://www.google.com";

If you are using ui-router. You can use <a ui-sref="" as a way to navigate to different routes. Which is really just a wrapper around $state.go

Answer 6

YOU CAN USE THE FOLLOWING CODE FOR THIS PROBLEM

$window.open("http://google.com", "_blank");

This will open the url in next tab

http://plnkr.co/edit/hfQ18sdHHzEgkF4vEYs5?p=preview

This is one of the working solution for your question

$scope.go_to = function() {
    alert("a"); //CALLED
    var url = "http://google.com";
    $window.open(url, "_blank");
};

Answer 7

Finally found the culprit :)

Its because i commented this single code in my index :

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

After that, i just need to use a basic href