X
    Categories: AngularjsIonic

Ionic with angularjs example

Ionic with angularjs example

Ionic with angularjs, Ionic is the most top rated tool for native app development. We are using angular js as a bridge between front end and back end. Lets see how to start with Ionic and angularjs.
Here we will see how the ionic and agularjs declare the routing and how to access it.

Click here to see how to install ionic

What we are going to see

Now we are going to see how to create nav tabs, routing and showing respected pages based on url using ionic and angularjs.

Let us consider we have 3 menus

1. Home
2. About
3. Contact

Place the following line in your index.html

<body ng-app="sampleApp">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>

ion-nav-bar => will display the top nav header bar

ion-nav-back-button => Will work like a breadcrum

ion-nav-view => Will show the page contents based on url redirection.

My index.html 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>
  <link rel="manifest" href="manifest.json">
  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.log('Error', err));
    } 
  </script>-->

  <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">

  <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
  <link href="css/ionic.app.css" rel="stylesheet">
  -->

  <!-- ionic/angularjs js -->
  <script src="lib/ionic/js/ionic.bundle.js"></script>

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

  <!-- your app's js -->
  <script src="js/app.js"></script>
</head>
<body ng-app="sampleApp">
      <ion-nav-bar class="bar-positive">
            <ion-nav-back-button>
            </ion-nav-back-button>
      </ion-nav-bar>
      <ion-nav-view></ion-nav-view>
</body>
</html>

Write Routing for your application


In my  app.js

.config(function($stateProvider, $urlRouterProvider, $httpProvider)
{
    $stateProvider
      .state('tabs', {
        url : "/tab",
        abstract : true,
        templateUrl : "templates/tabs.html"
      })
      .state("tabs.home",{
        url : '/home',
        views : {
          'home-tab' : {
              templateUrl : 'templates/home.html',
              controller : 'HomeTabController'
          }
        }
      })
      .state('tabs.about', {
        url : '/about',
        views : {
          'about-tab' : {
            templateUrl : 'templates/about.html'
          }
        }
      })
      .state('tabs.contact', {
        url : '/contact',
        views : {
          'contact-tab' : {
            templateUrl : 'templates/contact.html',
            controller : 'ContactFormController'
          }
        }
      })

      $urlRouterProvider.otherwise('/tab/home');
})

Write templates for your URLs

Templates folder will be under www directory

tabs.html
home.html
about.html
contact.html

tabs.html

<ion-tabs class="tabs-icon-top tabs-positive">

        <ion-tab title="Home" icon="ion-home" href="#/tab/home">
          <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
          <ion-nav-view name="about-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
          <ion-nav-view name="contact-tab"></ion-nav-view>
        </ion-tab>

</ion-tabs>

home.html

<ion-view view-title="Home">
	<ion-content class="padding">
	  <h2 class="text-center">Welcome to Ionic World!!!!!!</h2>
	  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</ion-content>
</ion-view>

about.html

<ion-view view-title="About Us">
	<ion-content class="padding">
	<h3 class="text-center"> This is my sample about us page</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</ion-content>
</ion-view>

contact.html

<ion-view view-title = "Contact us" >
	<ion-content class="padding" >
		 <form ng-submit="submitContactForm()" name = "contactForm" novalidate>
			<div class="list">
				<label class="item item-input item-stacked-label">
			                 <span class="input-label">Your Name</span>
			                    <input type="text" ng-model="contact.name" placeholder="Jane Doe" required>
			           </label>
			                <label class="item item-input item-stacked-label">
			                    <span class="input-label">Email</span>
			                    <input type="text" ng-model="contact.email" placeholder="jane@email.com" required>
			                </label>
			                <label class="item item-input item-stacked-label">
			                    <span class="input-label">Message</span>
			                    <input type="text" ng-model="contact.message" placeholder="It would be great if you could add my #TweetHour" required>
			                </label>
			                <padding>
			                    <button type="submit" class="button button-balanced button-block" ng-disabled="contactForm.$invalid" >
			                        Send
			                    </button>
			                </padding>
			</div>
		</form>
	</ion-content>
</ion-view>

My Full app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('sampleApp', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider, $httpProvider)
{
    $stateProvider
      .state('tabs', {
        url : "/tab",
        abstract : true,
        templateUrl : "templates/tabs.html"
      })
      .state("tabs.home",{
        url : '/home',
        views : {
          'home-tab' : {
              templateUrl : 'templates/home.html',
              controller : 'HomeTabController'
          }
        }
      })
      .state('tabs.about', {
        url : '/about',
        views : {
          'about-tab' : {
            templateUrl : 'templates/about.html'
          }
        }
      })
      .state('tabs.contact', {
        url : '/contact',
        views : {
          'contact-tab' : {
            templateUrl : 'templates/contact.html',
            controller : 'ContactFormController'
          }
        }
      })
      .state('tabs.users', {
        url : '/users',
        views : {
          'users-tab' : {
            templateUrl : 'templates/users.html',
            controller: 'UsersController'
          }
        }
      })

      $urlRouterProvider.otherwise('/tab/home');
})

.controller('HomeTabController', function($scope) {
  console.log('Inside Home Controller');
})

.controller('ContactFormController', function ( $scope, $http ) {
  console.log('Inside Contact Controller');
    $scope.submitContactForm  = function() {
      console.log('Form Submitted');
    };
} )

Results

Thanks for reading this. Hope it will helpful for someone.

Marimuthu: