Tutorial: Create a Weather and News Reader App with Ionic and Drupal

Using Drupal CMS and Ionic Framework to create hybrid apps for iOS and Android

Tutorial: Create a Weather and News Reader App with Ionic and Drupal

During the Christmas break, I decided to give myself a challenge: increase my knowledge of app building, AngularJS, and Ionic Framework. Since I didn't know very much about any of them, that was the easy part. I then gave myself a second task - build a hybrid app for my local town that would give us home, current weather, and news tabs, with all content being derived from online data sources.

The tutorials I was reading showed how to do one thing for each app. Hopefully this one will show you how to create an app that does more than one thing and then you can extend it further yourself.

You will need:

  1. Drupal with a view created to list some content (I'm using the articles list from my personal blog)
  2. Ionic Framework (details on how to install Ionic Framework are here)
  3. Views Datasource module (it's the views_json submodule of this that we'll be using). You might also need the CORS module (if your server is not allowing your app to pull data from it - more details later).
  4. To suspend your design thoughts (this app is ugly, but I'm only interested in functionality for this tutorial)

The Drupal Part

  • Download views_datasource module.
  • Enable views_json module from this package.
  • Create a view to list some content.
  • Make sure you are using 'fields' rather than 'rendered entity'.
  • Make sure you give each field a title - this will be used later on when drilling down through the JSON output.
  • Create a page display setting 'format' to 'JSON data document' (I left all the options as default, you can play around with them if you wish)
  • You should get a JSON output.

The Ionic Part

I'm presuming you have installed and set up Ionic following their 'Getting Started' guidelines, and have set up a 'Tabs' app.

Creating New Tabs

To add a new tab, go to your www folder and find the tabs.html file which is inside the templates folder. To add a new tab you can copy/paste from one of the existing ones. I added:

<!-- Weather Tab -->
  <ion-tab title="Weather" icon="icon ion-cloud" href="#/tab/weather">
    <ion-nav-view name="tab-weather"></ion-nav-view>

<!-- News Tab -->
  <ion-tab title="News" icon="icon ion-social-rss" href="#/tab/news">
    <ion-nav-view name="tab-news"></ion-nav-view>
Tabs created for current weather and news feed using Ionic Framework

Notice here how the icons are chosen by icon="" attributes. You can find a list of all the available icons at the Ionicon Cheetsheet. The darkened tab is the currently active one.

The State of your Tabs!

Next we need to add the 'states' that tabs can have, including what template will be used to display the content for each. To do so, you need to navigate to your js folder inside www. Find the app.js file and edit this to add new states. In my case I added states for weather and news, like so:

    .state('tab.news', {
      url: '/news',
      views: {
        'tab-news': {
          templateUrl: 'templates/tab-news.html',
          controller: 'NewsCtrl'
    .state('tab.weather', {
      url: '/weather',
      views: {
        'tab-weather': {
          templateUrl: 'templates/tab-weather.html',
          controller: 'WeatherCtrl'

It should be quite self-explanatory what is going on here. We have set a state for the tab, given it a URl and then told our app what template to use and what controller will set its functions. Make sure you create .html templates to match what you have set here.

The Weather Part

Next I set about actually grabbing the data for the current weather in my local town and adding it as a service in my services.js file in www/js. To do this, I am using forecast.io. (You'll have to sign up for an account to get an API key and then replace YOURAPIKEY in each place you see it in the following code:

(function () {
  'use strict';

  var forecastioWeather = ['$q', '$resource', '$http', 'YOURAPIKEY',
    function($q, $resource, $http, YOURAPIKEY) {
    var url = 'https://api.forecast.io/forecast/' + YOURAPIKEY + '/';

    var weatherResource = $resource(url, {
      callback: 'JSON_CALLBACK',
    }, {
      get: {
        method: 'JSONP'

    return {
      //getAtLocation: function(lat, lng) {
      getCurrentWeather: function(lat, lng) {
        return $http.jsonp(url + lat + ',' + lng + '?callback=JSON_CALLBACK&units=si');

  angular.module('starter.services', ['ngResource'])

  .factory('DataStore', function() {
      //create datastore with default values
      var DataStore = {
          city:       'Portumna',
          latitude:   53.0905,
          longitude:  -8.2337 };

      DataStore.setCity = function (value) {
         DataStore.city = value;

      DataStore.setLatitude = function (value) {
         DataStore.longitude = value;

      DataStore.setLongitude = function (value) {
         DataStore.longitude = value;

      return DataStore;
  .factory('Weather', forecastioWeather);

Note above the '&units=si" addition in the JSON_CALLBACK. This sets the temperature to Celsius. Leave that out if you want to use Fahrenheit.

You will then need to add a new controller in your www/js/controllers.js file. Mine for the weather section looks like this (remember, replace YOURAPIKEY with your API key):

.controller('WeatherCtrl', function($scope,$state,Weather,DataStore) {
  //read default settings into scope
  console.log('inside weather');
  $scope.city  = DataStore.city;
  var latitude  = DataStore.latitude;
  var longitude = DataStore.longitude;

  //call getCurrentWeather method in factory ‘Weather’
  Weather.getCurrentWeather(latitude,longitude).then(function(resp) {
    $scope.current = resp.data;
    console.log('GOT CURRENT', $scope.current);
  }, function(error) {
    alert('Unable to get current conditions');

Next in my tab-weather.html file (in www/templates) I added the following code to display the weather:

<ion-view title="Weather">
  <ion-content class="has-header">
    <!-- Display current location's weather data-->
    <h3>Welcome to {{city}}</h3>
    <h4>Current Weather:</h4>
      <p><weather-icon icon="current.icon" id="current-icon"></weather-icon> {{current.currently.summary}}</p>
      <p>{{current.currently.temperature}} °C</p>
    <h4>Coming Days:</h4>

The (unstyled) finished product looks like this:

Weather results displayed using Ionic Framework

This weather section was created with some help from this BinPress tutorial.

The News Reader Part

We have already added a news tab 'state' in app.js. We now need to add a new controller for it in controllers.js. Here's what I have:

.controller('NewsCtrl', function($scope, $http) {
  $scope.init = function() {
      .success(function(data) {
          $scope.nodes = data.nodes;
          $scope.browse = function(v) {
            window.open(v, "_system", "location=yes");
          window.localStorage["nodes"] = JSON.stringify(data.nodes);
      .error(function(data) {
          console.log("ERROR: " + data);
          if(window.localStorage["nodes"] !== undefined) {
            $scope.entries = JSON.parse(window.localStorage["nodes"]);

$score and $http are both AngularJS objects. In $scope we initialise a function to 'GET' a $http object, the URL of which is the JSON output of the articles on my personal blog. $http allows two outcomes - success and error. Since 'nodes' is our default 'Root object name' in the views formatter in Drupal, we set $scope.nodes to data.nodes.

To ensure links are opened in the inAppBrowser, we simply install that Cordova plugin (Ionic is built on Cordova) by running this command from within our project:

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

Once this far, we can add the tab-news.html template. In that I have the following:

<ion-view title="Portumna News">
  <ion-content ng-controller="NewsCtrl" ng-init="init()" class="has-header">
    <h3>Welcome to Portumna News</h3>
    <div class="list">
      <a ng-repeat="item in nodes" class="item" ng-click="browse(item.node.link)">
        <span ng-bind-html="item.node.summary"></span>

To loop through items in our list we perform an Angular 'repeat' using a key/value setup (in PHP this would be foreach($key as $value)). In the above example I used the word 'item' for my key in the $scope.nodes object, then telling the app that when we click a link, we browse to 'item.node.link' (which is a URL we have within our view in Drupal).

We then create JSON objects from the returned data using the titles that we gave each of the fields in above when creating the views_json view. I called my title field 'title' (no quotation marks) and that allows me to drilldown to  node.title; the body field is called node.summary.

The unstyled version of this section looks like this:

Ionic News Feed via JSON

This section of the tutorial is adapted from Nic Raboy's blog.

If you have any problem seeing your news posts, it may be because of a CORS issue (check the console warnings tab in Firefox). If this is the case, you will need to modify your .htaccess file or add a module such as the Drupal CORS module.

The code used in this app is available on GitHub.

Given that this was my first foray into app building, I'm sure you have plenty of tips for me. In that case, please add them in the comments. Thanks.



Hi there
Thanks for the tutorial. This tutorial is about Drupal 7, but the Headerimage is with Drupal 8 which is a bit confusing.


Annertech's default 'Annertechie' profile image.

The process is the same for Drupal 7 as for Drupal 8. Actually, it's probaby easier in Drupal 8 since RESTful services are part of core. Sorry for any confusion.

Mark Conroy - Lead Frontend Developer & Content Strategist

Hi There ,

Thanks for the turorial , The below error are coming , how can we resolve it ,

controllers.js:31 Uncaught SyntaxError: Unexpected token .
ionic.bundle.js:13438 Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
Error: [$injector:nomod] Module 'starter.controllers' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:13438:12
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:15404:17
at ensure (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15328:38)
at module (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15402:14)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:17894:22
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13691:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17878:5)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:17895:40
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13691:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17878:5)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:13438:12
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:17917:15
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13691:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17878:5)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:17895:40
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13691:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17878:5)
at createInjector (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17800:19)
at doBootstrap (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15080:20)
at bootstrap (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15101:12)
http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=starter&p1=Error%3A…3A%2F%2Flocalhost%3A8100%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A15101%3A12)(anonymous function) @ ionic.bundle.js:13438(anonymous function) @ ionic.bundle.js:17917forEach @ ionic.bundle.js:13691loadModules @ ionic.bundle.js:17878createInjector @ ionic.bundle.js:17800doBootstrap @ ionic.bundle.js:15080bootstrap @ ionic.bundle.js:15101angularInit @ ionic.bundle.js:14986(anonymous function) @ ionic.bundle.js:44079trigger @ ionic.bundle.js:16497defaultHandlerWrapper @ ionic.bundle.js:16787eventHandler @ ionic.bundle.js:16775

Annertech's default 'Annertechie' profile image.

It is very useful tutorial for creating weather app. I have created the weather app. In your tutorial you have added only few location for weather. If I move from one country to other (or) one state to other state. In that case I cannot get the weather information. So, how could I make universal weather app

Annertech's default 'Annertechie' profile image.

Hi Kunal,

If the error is because of your 'starter' app, and the report tells you you may have a misspelling, my feeling is that you probably didn't name your app starter? check in your HTML for 'na-app="starter"' and make sure that you have used that as the name. I'd usually rename it as something more appropriate, such as 'newsreader' or whatever I was expecting the app to do. 'starter' is the default name given by Ionic (you might also need to change that variable in other places in your code as well then, such as in app.js.


Hi Sam,

I'm not sure exactly how you'd make a universal weather app. I haven't looked into the forecast.io API too much. My guess is that where I have 'Portumna' you'd add other options in there to use the phone's geo-location settings to tell the app where in the world you are.

Mark Conroy - Lead Frontend Developer & Content Strategist

Thanks for the great tutorial. It's really useful.

Shouldn't "DataStore.longitude" in the following code block be changed to "DataStore.latitude"?

DataStore.setLatitude = function (value) {
DataStore.longitude = value;

Annertech's default 'Annertechie' profile image.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <h4> <h5> <h6>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.