Selfystic ionic crash course

selfystic-crash-course.md

Selfystic crash course gists

Playground so we don't have to install anything, I meant, ANYTHING! Ionic is all about Angular and Cordova.

angularjs

<!-- index.html -->

<div class="list" ng-controller="Hello">
  <label class="item item-input">
    <input type="text" placeholder="Type Your Name" ng-model="firstname">
  </label>
  <h2>Hello, {{firstname}}</h2>
</div>

// app.js

angular.module('app', ['ionic']).controller("Hello", ['$scope', function ($scope) {
		$scope.firstname = '';
}]);

ui-routing

<!-- index.html -->

<ion-nav-view></ion-nav-view>

<script id="templates/main.html" type="text/ng-template">
  <ion-header-bar class="bar-stable">
    <h1 class="title">Awesome App</h1>
  </ion-header-bar>
  <ion-content class="padding">
    <div class="list" ng-controller="HelloCtrl">
      <label class="item item-input">
        <input type="text" placeholder="Type Your Name" ng-model="firstname">
      </label>
      <h2>Hello, {{firstname}}</h2>
    </div>
    <p>How are you? <a href="#/page2">Go to Page 2</a></p>
  </ion-content>
</script>

<script id="templates/page2.html" type="text/ng-template">
  <ion-header-bar class="bar-stable">
    <h1 class="title">Awesome Page 2</h1>
  </ion-header-bar>
  <ion-content class="padding">
    <p>I am Page 2!</p>
  </ion-content>
</script>

// app.js

angular.module('app', ['ionic']).controller("Hello", ['$scope', function ($scope) {
		$scope.firstname = '';
}]).config(function ($stateProvider, $urlRouterProvider) {
		$stateProvider

			.state('main', {
				url: "/main",
				templateUrl: "templates/main.html",
				controller: 'HelloCtrl'
			})

			.state('page2', {
				url: "/page2",
				templateUrl: "templates/page2.html",
			});
  
		// if none of the above states are matched, use this as the fallback
		$urlRouterProvider.otherwise('/main');
});

pull-to-refresh

<!-- index.html -->

<ion-pane ng-controller="Hello">
  <ion-header-bar class="bar-stable">
    <h1 class="title">Awesome App</h1>
  </ion-header-bar>
  <ion-content class="padding">
    <ion-refresher pulling-text="Release now ..." on-refresh="refresh()"></ion-refresher>
    <h2>Hello, {{firstname}}</h2>
    <p>Pull to Refresh!</p>
  </ion-content>
</ion-pane>

// app.js

angular.module('app', ['ionic'])

	.controller("Hello", function ($scope, $timeout) {
		var names = ['Kosala', 'Hasith', 'Chatura', 'Jehan', 'Rashmika', 'Suranga', 'Ruzaik'];

		$scope.firstname = names[0];

		$scope.refresh = function () {
			$timeout(function () {
				$scope.firstname = names[Math.floor(Math.random() * names.length)];
				$scope.$broadcast('scroll.refreshComplete');
			}, 1500);
		};

	});

swipeable-card

Selfystic users followings;

1. Ionic blank template.
2. Ionic Swipe Card - https://github.com/driftyco/ionic-ion-swipe-cards.
3. Ionic Native plugin.
4. Cordova Camera plugin.
5. Cordova Social Share plugin.