{"id":2051,"date":"2015-08-12T20:56:27","date_gmt":"2015-08-12T20:56:27","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=2051"},"modified":"2015-08-16T10:17:34","modified_gmt":"2015-08-16T10:17:34","slug":"how-to-redirect-users-if-there-is-no-internet-connection-in-ionic-framework","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/stack-overflow\/how-to-redirect-users-if-there-is-no-internet-connection-in-ionic-framework\/","title":{"rendered":"How to redirect users if there is no Internet connection in Ionic framework?"},"content":{"rendered":"<p><a href=\"http:\/\/stackoverflow.com\/users\/534755\/nikola\"><img loading=\"lazy\" decoding=\"async\" title=\"profile for Nikola at Stack Overflow, Q&amp;A for professional and enthusiast programmers\" src=\"http:\/\/stackoverflow.com\/users\/flair\/534755.png\" rel=\"lightbox[2051]\" alt=\"profile for Nikola at Stack Overflow, Q&amp;A for professional and enthusiast programmers\" width=\"208\" height=\"58\" \/><\/a><br \/>\nI&#8217;m a big fan of <a href=\"http:\/\/stackoverflow.com\/\">Stack Overflow<\/a> and I tend to contribute regularly (am currently in the <a href=\"http:\/\/stackexchange.com\/leagues\/1\/alltime\/stackoverflow\/2008-07-31\/534755?sort=reputationchange#534755\">top 0.X%<\/a>).\u00a0In this category (<a href=\"http:\/\/www.nikola-breznjak.com\/blog\/category\/stack-overflow\/\">stackoverflow<\/a>)\u00a0of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread <a href=\"http:\/\/meta.stackoverflow.com\/questions\/266971\/can-i-post-so-questions-and-answers-in-a-personal-blog\/266973\">here<\/a>.<\/p>\n<p>As you may know, I&#8217;m really into Ionic framework lately\u00a0and am helping out on StackOverflow with the knowledge I gained so far with the framework. In the last\u00a030 days, I&#8217;m the <a href=\"http:\/\/stackoverflow.com\/tags\/ionic\/topusers\">top answerer in the ionic tag<\/a>, and am currently #6 All time answerer:<\/p>\n<p><a href=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/08\/soIonic.jpg\" rel=\"lightbox[2051]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2010\" src=\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/08\/soIonic.jpg\" alt=\"soIonic\" width=\"780\" height=\"750\" srcset=\"https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/08\/soIonic.jpg 780w, https:\/\/nikola-breznjak.com\/blog\/wp-content\/uploads\/2015\/08\/soIonic-300x288.jpg 300w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" \/><\/a><\/p>\n<p>I answered\u00a0<a href=\"http:\/\/stackoverflow.com\/questions\/31915913\/how-to-redirect-users-if-there-is-no-internet-connection-in-ionic-framework\/\">this question<\/a>\u00a0by user<a href=\"http:\/\/stackoverflow.com\/users\/4551075\/florin-simion\">Florin Simion<\/a>:<\/p>\n<p>I want to redirect users to a different page when they&#8217;re not connected to the Internet.<\/p>\n<p>My only question is why this is working:<\/p>\n<pre class=\"lang:default decode:true\">if (window.Connection) {\r\n    if(navigator.connection.type == Connection.NONE) {\r\n        alert(\"Please connect to internet\");\r\n    }\r\n}<\/pre>\n<p>and this is not<\/p>\n<pre class=\"lang:default decode:true\">if (window.Connection) {\r\n    if(navigator.connection.type == Connection.NONE) {\r\n        $scope.state.go('offline');  \r\n    }\r\n}<\/pre>\n<p>My <a href=\"http:\/\/stackoverflow.com\/a\/31916616\/534755\">answer<\/a> was:<\/p>\n<blockquote><p>Because you&#8217;re using <code>$state<\/code> the wrong way. Instead of this:<\/p>\n<pre class=\"lang:default decode:true\">$scope.state.go('offline');<\/pre>\n<p>You should <strong>do it like this<\/strong>:<\/p>\n<pre class=\"lang:default decode:true\">$state.go('offline');<\/pre>\n<p>Remember to inject <code>$state<\/code> in your controller. More information about $state from <a href=\"http:\/\/angular-ui.github.io\/ui-router\/site\/#\/api\/ui.router.state.$state\" rel=\"nofollow\">official docs<\/a>.<\/p>\n<p>By &#8220;<em>Remember to inject $state in your controller&#8221;<\/em> I&#8217;m referring, for example, to this:<\/p>\n<pre class=\"lang:default decode:true\">app.controller('ctrl', function ($scope, $state) {\r\n    $scope.changeState = function () {\r\n        $state.go('someplaceNice');\r\n    };\r\n});<\/pre>\n<\/blockquote>\n<p>If you would want a more in-depth tutorial about network information gathering in Ionic make sure you check the\u00a0<a href=\"http:\/\/www.nikola-breznjak.com\/blog\/codeproject\/check-network-information-change-with-ionic-famework\/\">Check network information change with Ionic framework<\/a>\u00a0tutorial.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%).\u00a0In this category (stackoverflow)\u00a0of posts, I will be posting my&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1991,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43,35],"tags":[],"class_list":["post-2051","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ionic","category-stack-overflow"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2051","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=2051"}],"version-history":[{"count":3,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2051\/revisions"}],"predecessor-version":[{"id":2093,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2051\/revisions\/2093"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/1991"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=2051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=2051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=2051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}