{"id":2085,"date":"2015-08-15T10:03:25","date_gmt":"2015-08-15T10:03:25","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=2085"},"modified":"2015-08-16T10:16:50","modified_gmt":"2015-08-16T10:16:50","slug":"check-network-information-change-with-ionic-famework","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/codeproject\/check-network-information-change-with-ionic-famework\/","title":{"rendered":"Check network information change with Ionic framework"},"content":{"rendered":"

TL;DR<\/h3>\n

In this tutorial, I’m going to quickly show you how to get network information change<\/strong> with Ionic framework. What do I mean by network information change<\/em>? Well, if you need to detect when your phone gets on the Internet, or loses connection, you can do so with this example code. Additionally, you can get the type of the network your phone is connected to (WIFI for example).<\/p>\n

Finished project<\/h3>\n

You can clone the finished project from Github: https:\/\/github.com\/Hitman666\/IonicNetworkInfo<\/a>, and you can see how it actually looks like on the image below (nothing fancy, this is a test project after all ;)):<\/p>\n

\"networkInfoIonic\"<\/a><\/p>\n

Step by step on how to make this yourself<\/h3>\n

Here are the quick steps in recreating the exact same app:<\/p>\n

    \n
  1. Start a new Ionic project by doing:\n
    ionic start IonicNetworkInfo blank\r\n<\/pre>\n<\/li>\n
  2. Then, change the directory to the newly created IonicNetworkInfo:\n
    cd IonicNetworkInfo<\/pre>\n<\/li>\n
  3. Install ngCordova<\/a> with Bower<\/a>:\n
    bower install ngCordova<\/pre>\n
    If by some chance you don’t have bower installed, you can install it with npm<\/a>:<\/p>\n
    npm install bower -g<\/pre>\n
    <\/li>\n
  4. Open up the www\/index.html<\/strong> file in your favorite editor, and add the reference to ngCordova (just above the cordova.js script):\n
    <!-- This is what you should add, the cordova below you'll already have -->\r\n<script src=\"lib\/ngCordova\/dist\/ng-cordova.min.js\"><\/script>\r\n\r\n<!-- cordova script (this will be a 404 during development) -->\r\n<script src=\"cordova.js\"><\/script><\/pre>\n<\/li>\n
  5. Install the\u00a0ngCordova network plugin<\/a>\u00a0by executing the following command in your Terminal\/Command prompt (you should do this from the root directory of your app; so, in our case the IonicNetworkInfo<\/strong>\u00a0directory):\n
    cordova plugin add org.apache.cordova.network-information<\/pre>\n
    To check if you have successfully installed the plugin, you can run the following command (from the root directory – I won’t be repeating this anymore; when I say you should run some command from the Terminal\/Command prompt that, in this case, means from the root directory of the application):<\/p>\n
    cordova plugin list<\/pre>\n
    You should see the following output:<\/p>\n
    > cordova plugin list                                                                                                                           \r\ncom.ionic.keyboard 1.0.4 \"Keyboard\"\r\norg.apache.cordova.network-information 0.2.15 \"Network Information\"<\/pre>\n<\/li>\n
  6. Open up the www\/js\/app.js<\/strong> file and add ngCordova<\/strong> to the dependencies list, so that basically the first line looks like this:\n
    angular.module('starter', ['ionic', 'ngCordova'])<\/pre>\n<\/li>\n
  7. Create a new controller in the www\/js\/app.js<\/strong> file called MyCtrl<\/strong>, with the following content:\n
    .controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) {\r\n    document.addEventListener(\"deviceready\", function () {\r\n\r\n        $scope.network = $cordovaNetwork.getNetwork();\r\n        $scope.isOnline = $cordovaNetwork.isOnline();\r\n        $scope.$apply();\r\n        \r\n        \/\/ listen for Online event\r\n        $rootScope.$on('$cordovaNetwork:online', function(event, networkState){\r\n            $scope.isOnline = true;\r\n            $scope.network = $cordovaNetwork.getNetwork();\r\n            \r\n            $scope.$apply();\r\n        })\r\n\r\n        \/\/ listen for Offline event\r\n        $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){\r\n            console.log(\"got offline\");\r\n            $scope.isOnline = false;\r\n            $scope.network = $cordovaNetwork.getNetwork();\r\n            \r\n            $scope.$apply();\r\n        })\r\n\r\n  }, false);\r\n})<\/pre>\n
    In this controller you attach an event listener on the deviceready<\/strong>\u00a0event (because it could be that the device would not have been yet initialized when this code runs) and you get the network information with:<\/p>\n
    $cordovaNetwork.getNetwork();<\/pre>\n
    The information, about weather you’re connected to the internet is obtained with the following line:<\/p>\n
    $scope.isOnline = $cordovaNetwork.isOnline();<\/pre>\n
    Then, you register two events $cordovaNetwork:online<\/strong>\u00a0and $cordovaNetwork:online<\/strong>\u00a0which trigger when the device gets online\/offline. In them you then just update the $scope variables ().<\/p>\n
    Just for reference, the whole content of the www\/js\/app.js<\/strong> file should be:<\/p>\n
    \/\/ Ionic Starter App\r\n\r\n\/\/ angular.module is a global place for creating, registering and retrieving Angular modules\r\n\/\/ 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)\r\n\/\/ the 2nd parameter is an array of 'requires'\r\nangular.module('starter', ['ionic', 'ngCordova'])\r\n\r\n.run(function($ionicPlatform, $cordovaNetwork, $rootScope) {\r\n  $ionicPlatform.ready(function() {\r\n    \/\/ Hide the accessory bar by default (remove this to show the accessory bar above the keyboard\r\n    \/\/ for form inputs)\r\n    if(window.cordova && window.cordova.plugins.Keyboard) {\r\n      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);\r\n    }\r\n    if(window.StatusBar) {\r\n      StatusBar.styleDefault();\r\n    }\r\n\r\n  });\r\n})\r\n\r\n.controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) {\r\n    document.addEventListener(\"deviceready\", function () {\r\n\r\n        $scope.network = $cordovaNetwork.getNetwork();\r\n        $scope.isOnline = $cordovaNetwork.isOnline();\r\n        $scope.$apply();\r\n        \r\n        \/\/ listen for Online event\r\n        $rootScope.$on('$cordovaNetwork:online', function(event, networkState){\r\n            $scope.isOnline = true;\r\n            $scope.network = $cordovaNetwork.getNetwork();\r\n            \r\n            $scope.$apply();\r\n        })\r\n\r\n        \/\/ listen for Offline event\r\n        $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){\r\n            console.log(\"got offline\");\r\n            $scope.isOnline = false;\r\n            $scope.network = $cordovaNetwork.getNetwork();\r\n            \r\n            $scope.$apply();\r\n        })\r\n\r\n  }, false);\r\n});<\/pre>\n<\/li>\n
  8. In the index.html<\/strong> file, inside the ion-content<\/strong> tag paste the following content:\n
    <div class=\"card\">\r\n                <div class=\"item item-text-wrap\">\r\n                    <h1>Network: {{network}}<\/h1>\r\n                <\/div>\r\n            <\/div>\r\n\r\n\r\n            <div class=\"card\">\r\n                <div class=\"item item-text-wrap\">\r\n                    <ion-toggle ng-model=\"isOnline\" ng-checked=\"item.checked\">\r\n                        <h1 ng-show=\"isOnline\">I'm online<\/h1>\r\n                        <h1 ng-show=\"! isOnline\">I'm offline<\/h1>\r\n                    <\/ion-toggle>\r\n                <\/div>\r\n            <\/div><\/pre>\n
    Basically what we do here is we show the contents of the network<\/strong> variable (which is attached to the $scope<\/strong> via the controller). Also, by using the ion-toggle<\/strong>\u00a0component we show the “I’m online” \/ “I’m offline” notifications.<\/p>\n
    Just for reference, the content of the whole index.html<\/strong> file should look like this:<\/p>\n
    <!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset=\"utf-8\">\r\n    <meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width\">\r\n    <title><\/title>\r\n\r\n    <link href=\"lib\/ionic\/css\/ionic.css\" rel=\"stylesheet\">\r\n    <link href=\"css\/style.css\" rel=\"stylesheet\">\r\n\r\n    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above\r\n    <link href=\"css\/ionic.app.css\" rel=\"stylesheet\">\r\n    -->\r\n\r\n    <!-- ionic\/angularjs js -->\r\n    <script src=\"lib\/ionic\/js\/ionic.bundle.js\"><\/script>\r\n\r\n    <script src=\"lib\/ngCordova\/dist\/ng-cordova.min.js\"><\/script>\r\n    <!-- cordova script (this will be a 404 during development) -->\r\n    <script src=\"cordova.js\"><\/script>\r\n\r\n    <!-- your app's js -->\r\n    <script src=\"js\/app.js\"><\/script>\r\n<\/head>\r\n<body ng-app=\"starter\" ng-controller=\"MyCtrl\">\r\n\r\n    <ion-pane>\r\n        <ion-header-bar class=\"bar-stable\">\r\n            <h1 class=\"title\">Ionic Blank Starter<\/h1>\r\n        <\/ion-header-bar>\r\n      \r\n        <ion-content padding=\"true\">\r\n            <div class=\"card\">\r\n                <div class=\"item item-text-wrap\">\r\n                    <h1>Network: {{network}}<\/h1>\r\n                <\/div>\r\n            <\/div>\r\n\r\n\r\n            <div class=\"card\">\r\n                <div class=\"item item-text-wrap\">\r\n                    <ion-toggle ng-model=\"isOnline\" ng-checked=\"item.checked\">\r\n                        <h1 ng-show=\"isOnline\">I'm online<\/h1>\r\n                        <h1 ng-show=\"! isOnline\">I'm offline<\/h1>\r\n                    <\/ion-toggle>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/ion-content>\r\n    <\/ion-pane>\r\n<\/body>\r\n<\/html><\/pre>\n<\/li>\n<\/ol>\n
    Testing time<\/h3>\n
    In order to test this application you should run it on your device (because you can’t disable network <\/a>in iOS simulator).<\/p>\n
    First, in case you haven’t, add the desired platform (execute this command from the root of the directory). For iOs execute:<\/p>\n
    ionic platform add ios<\/pre>\n
    Or, for Android execute:<\/p>\n
    ionic platform add android<\/pre>\n
    Just a quick note – in order to build the app for iOs, you need to be running this on Mac machine (sure, there are ways around it, but TBH, I’m not a fan of them). As for Android, you can normally run it on your Windows machine (if, of course you have all the SDKs in place. I’ll write about setting these up in another tutorial, so will update the link here when the post will be published, for those who want to see this kind of information<\/em>).<\/p>\n
    If you have an Android device<\/strong> plugged to your computer (and all the SDKs in place) you can run the following to commands to get your application running on your Android device:<\/p>\n
    ionic build android && ionic run android<\/pre>\n
    To get this application running on your iOS device<\/strong>, you first have to build the application, and you can do this by executing the following command:<\/p>\n
    ionic build ios<\/pre>\n
    Now, open up the IonicNetworkInfo\/platforms\/ios<\/strong> folder and you should see the following content:<\/p>\n
    \"Screen<\/a><\/p>\n
    Next, open up IonicNetworkInfo.xcodeproj<\/strong> file with Xcode:<\/p>\n
    Make sure that your iOS device is connected to your Mac computer, select it from the dropdown menu and click run:<\/p>\n
    \"XcodeRun\"<\/a><\/p>\n
    Now, experiment with the application by turning your WIFI on\/of, turning your Cellular network (if you have it) on\/off, and basically enjoy seing the information chage automatically :). Surely, you can do way more advanced stuff based on this simple example, but I hope this will get you started…<\/p>\n
    That’s all folks, I hope this will prove to be useful to someone. If you have any questions, or you’ve noticed some blatant blunder that I may have made, please don’t hesitate to share it in the comments, I’ll make sure to reply promptly.<\/p>\n","protected":false},"excerpt":{"rendered":"
    TL;DR In this tutorial, I’m going to quickly show you how to get network information change with Ionic framework. What do I mean by network information change? Well,…<\/p>\n","protected":false},"author":1,"featured_media":2086,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,43],"tags":[],"class_list":["post-2085","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codeproject","category-ionic"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2085","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=2085"}],"version-history":[{"count":3,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2085\/revisions"}],"predecessor-version":[{"id":2821,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2085\/revisions\/2821"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/2086"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=2085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=2085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=2085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}