Worship Jesus Fellowship Mobile App - Powered with Ionic Framework and Phonegap Cordova

app.css

.side-menu-buttons a{ text-align:center; color:#555; }

.align-center{
    text-align:center;
}

img{
    width:100%;
    height:auto;
    }
    
.width_75{
    width:75%;
    margin-left:12.5%;
    margin-right:12.5%;
}
.width_50{
    width:50%;
    margin-left:25%;
    margin-right:25%;
}
.width_25{
    width:25%;
    margin-left:37.5%;
    margin-right:37.5%;
}

app.js

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

var wjfApp = angular.module('wjfApp', ['ionic']);

wjfApp.filter('links', function (){
    return function(text){
        var newtext = text.replace(/(<([^>]+)>)/ig,"");
        return newtext.replace(/&copy;NET/ig,"");
    };
});

wjfApp.config(function($stateProvider, $urlRouterProvider) {
    // Current state of app - what "url" is it in?
  $stateProvider
    .state('/home', {url: "/home", templateUrl: "home.html", controller: 'homeController'})
    .state('/about', {url: "/about", templateUrl: "about.html", controller: 'aboutController'})
    .state('/daily', {url: "/daily", templateUrl: "daily.html", controller: 'dailyController'})
    .state('/bible', {url: "/bible", templateUrl: "bible.html", controller: 'bibleController'})
    .state('/map', {url: "/map", templateUrl: "map.html", controller: 'mapController'})
    .state('/events', {url: "/events", templateUrl: "events.html", controller: 'eventController'})
    .state('/small_group', {url: "/small_group", templateUrl: "small_group.html", controller: 'smallGroupController'})
    .state('/youtube', {url: "/youtube", templateUrl: "youtube.html", controller: 'youtubeController'});

    // if none of the above are matched, go to this one
    $urlRouterProvider.otherwise("/home");
});

wjfApp.factory('bibleSharedSearch', function($rootScope){
    var bibleSearch = {};
    bibleSearch.book = '';
    bibleSearch.chapterVerse = '';
    
    bibleSearch.searchItem =  function(bibleBook,bibleChapterVerse){
        this.book = bibleBook;
        this.chapterVerse = bibleChapterVerse;
        $rootScope.$broadcast('handleSearch');
    };
    
    return bibleSearch;
});

wjfApp.controller("mainController", function($scope){
    
    $scope.leftButtons = [
        {
          type: 'button-clear button-icon icon ion-navicon',
          content: '',
          tap: function() {
              $scope.sideMenuController.toggleLeft();
          }
        }
    ];
  
});

wjfApp.controller("homeController", function($scope){
});

wjfApp.controller("aboutController", function($scope){
});

wjfApp.controller("dailyController", function($scope){
});

wjfApp.controller("bibleController", function($scope, $http, bibleSharedSearch){
   $scope.show = true; // By default, show the search form, and hide the cards
   $scope.bibleBooks = ['Genesis','Exodus','Leviticus','Numbers','Deuteronomy','Joshua','Judges','Ruth','1 Samuel',
   '2 Samuel','1 Kings','2 Kings','1 Chronicles','2 Chronicles','Ezra','Nehemiah','Esther','Job','Psalms','Proverbs',
   'Ecclesiastes','Song of Songs','Isaiah','Jeremiah','Lamentations','Ezekiel','Daniel','Hosea','Joel','Amos','Obadiah',
   'Jonah','Micah','Nahum','Habakkuk','Zephaniah','Haggai','Zechariah','Malachi','Matthew','Mark','Luke','John','Acts',
   'Romans','1 Corinthians','2 Corinthians','Galatians','Ephesians','Philippians','Colossians','1 Thessalonians','2 Thessalonians',
   '1 Timothy','2 Timothy','Titus','Philemon','Hebrews','James','1 Peter','2 Peter','1 John','2 John','3 John','Jude','Revelation'];
   
   $scope.$on('handleSearch', function(){
       
       $http.jsonp("http://labs.bible.org/api/?passage=" + bibleSharedSearch.book + " " + bibleSharedSearch.chapterVerse + "&type=json&callback=JSON_CALLBACK").success(function(response){
          $scope.show = false; // Hide the Form Box
          $scope.searchResults = response; // Store response to searchResults variable to iterate over
          // Edit the right buttons category to add a "Search Bible" button.
          $scope.rightButtons = [
                    {
                      type: 'button-clear button button-positive',
                      content: 'Search Bible',
                      tap: function() {
                          $scope.rightButtons = []; // Remove the "Search Bible" button
                          $scope.show = true; // Show the form for the user.
                      }
                    }
                ];
       });
   });
    
});

wjfApp.controller("bibleForm", function($scope, bibleSharedSearch){
       // On submitting of the form scope
       $scope.submit = function(){
           if($scope.bibleBook === undefined || $scope.bibleChapterVerse === undefined){
               return false;
           }else{
               // Start the service to bridge bibleForm controller with parent bibleController;
               bibleSharedSearch.searchItem($scope.bibleBook,$scope.bibleChapterVerse);
           }
           
       };
});

wjfApp.controller("mapController", function($scope){
   
});

wjfApp.controller("eventController", function($scope){
   
});

wjfApp.controller("smallGroupController", function($scope){
    
});

wjfApp.controller("youtubeController", function($scope){
   
});

bible.html

<ion-view title="'Holy Bible'" left-buttons="leftButtons" right-buttons="rightButtons">
  <ion-content has-header="true" padding="true">
      
      <form ng-submit="submit()" ng-controller="bibleForm" ng-show="show">
      <div class="list list-inset">
        <div class="item align-center">
            Bible Search - Search By Book, Chapter, and Verse
        </div>
        <div class="item item-body align-center">
            <p>To make a search for the scripture, select a Bible Book (e.g. Genesis, Corinthians, etc.), and then type the corresponding
            chapter and verse in the following textbox through typing. Subsequent results will then show up for you.</p>
        </div>
        <label class="item item-input">
          <span class="input-label">Book</span>
          <select ng-model="bibleBook" ng-options="c as c for c in bibleBooks">
          </select>
        </label>
        <label class="item item-input">
          <span class="input-label">Chapter:Verse</span>
          <input ng-model="bibleChapterVerse" type="text">
        </label>
      </div>
          
          <input type="submit" id="submit" value="Search Bible" class="button-positive button button-block"/>
      </form>
      
      <div class="list card" ng-repeat="verse in searchResults" ng-show="!show">
          <div class="item item-avatar">
            <img src="img/bible.png" />
            <h2>In the Book of {{verse.bookname}}</h2>
            <p>Chapter {{verse.chapter}}, Verse {{verse.verse}}</p>
          </div>
          <div class="item item-body">
              <p>{{verse.text | links}}</p>
          </div>
      </div>
  </ion-content>
</ion-view>

home.html

<ion-view title="'Worship Jesus Fellowship'" left-buttons="leftButtons">
  <ion-content has-header="true" padding="true">
      <div class="row responsive-md">
          <div class="col">
              <img src="img/wjf_logo.jpg" class="width_50"/>
          </div>
          <div class="col col-center">
              <h1 class="align-center">Welcome to Worship Jesus Fellowship</h1>
              <h2 class="align-center">A church you can call home</h2>
          </div>
      </div>
      <h3 class="align-center">Mission</h3>
      <p class="align-center">WJF cares to bring people to grow deeper in their relationship with Jesus,
          to be ardent for Jesus to everyone they meet and to advance and make
          disciples where God leads them may it be at home, workplace, marketplace or
          other places.
      </p>
      <h3 class="align-center">Description</h3>
      <p class="align-center">Worship Jesus Fellowship is a Bible-believing Church
          which offers biblical Christian values and morals.
      </p>
      
      <div class="card">
          <div class="item item-text-wrap">We are committed to</div>
          <div class="item item-divider">Growing in the Word</div>
          <div class="item item-divider">Growing in our Faith</div>
          <div class="item item-divider">Growing in our Worship</div>
          <div class="item item-divider">Growing in our Vision</div>
          <div class="item item-divider">Growing in our Abilities</div>
          <div class="item item-divider">Growing in Fellowship</div>
      </div>
      
      <p class="align-center">We hope you can find home with us, as we grow together in
          the relationship we have with Christ.</p>
  </ion-content>
</ion-view>

layout.html

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html ng-app="wjfApp">
    <head>
        <title>WJF Application</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <!-- Ionic Framework CSS with App CSS -->
        <link href="https://oss.maxcdn.com/libs/ionic/0.9.09/css/ionic.css" rel="stylesheet" />
        <link href="app.css" rel="stylesheet">
        <!-- Ionic Framework bundled with Angular Javascripts and App JS -->
        <script src="http://code.ionicframework.com/0.9.26/js/ionic.bundle.js"></script>
        <script src="app.js"></script>
    </head>
    <body ng-controller="mainController">
        <ion-side-menus>
            
            <!-- Center Content -->
            <ion-pane ion-side-menu-content>
                <!-- Header Bar -->
                <ion-nav-bar animation="nav-title-slide-ios7" type="bar-stable"></ion-nav-bar>
                <!-- Where views are injected -->
                <ion-nav-view></ion-nav-view>
            </ion-pane>
            
            <!-- Left Menu -->
            <ion-side-menu side="left">
                <ion-header-bar class="bar bar-header bar-positive" title="'Main Menu'"></ion-header-bar>
                <ion-content has-header="true" class="side-menu-buttons list">
                    <a class="item item-icon-left" href="layout.html#/home"><i class="icon ion-home"></i>Home</a>
                    <a class="item item-icon-left" href="layout.html#/bible"><i class="icon ion-bookmark"></i>The Bible</a>
                    <a class="item item-icon-left" href="layout.html#/about"><i class="icon ion-person"></i>About WJF</a>
                    <a class="item item-icon-left" href="layout.html#/daily"><i class="icon ion-android-mail"></i>From the Pastor's Desk</a>
                    <a class="item item-icon-left" href="layout.html#/map"><i class="icon ion-map"></i>Location</a>
                    <a class="item item-icon-left" href="layout.html#/events"><i class="icon ion-calendar"></i>Events</a>
                    <a class="item item-icon-left" href="layout.html#/small_group"><i class="icon ion-person-add"></i>Small Groups</a>
                    <a class="item item-icon-left" href="layout.html#/youtube"><i class="icon ion-videocamera"></i>Youtube Channel</a>
                </ion-content>
            </ion-side-menu>

        </ion-side-menus>
    </body>
</html>