Monday, 1 August 2016

Tutorial Ionic Framework (English Language) Ionic Basics : Hello World - Your First Ionic Framework App

In almost every case of learning a new programming language or framework, the first thing you learn to create is the “hello world” application. This app is the most basic app you can make and is your starting point for bigger and better things.

In this article we’ll create the “Hello World” Ionic App, with a couple different variations to get started towards your first Ionic App.

Let’s start with a very basic blank HTML page. We’ll also include a viewport meta tag for proper scaling and import the ionic.min.css and ionic.bundle.js files in the head tag.

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body>
Hello World!
</body>
</html>

If you load this up in the browser, you’ll see “Hello World!” on the screen… but, this isn’t an Ionic app yet. This is just some text.

App Module

For us to really make this an Ionic App, we need to first register it as an app using the ng-app directive on the body tag and defining the app as a module. We’ll also want to import the Ionic module.

First, let’s modify that body tag.

<body ng-app="ionicApp">

… and define the module in an app.js file.

angular.module('ionicApp', ['ionic']);

Notice the name of the module, app matches the value of the ng-app attribute. Don’t forget to include this script AFTER the Ionic script.

<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"><script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script><script src="app.js"></script>

Using Ionic Directives

Now we officially have an Ionic app, so let’s add some Ionic directives in there.

First, lets add a header bar.

<ion-header-bar class="bar-stable"> <h1 class="title">Hello World!</h1></ion-header-bar>

And then a content area.

<ion-content class="padding"> <p>Hello World, how are you?</p></ion-content>

Now, we have a very basic Ionic app up and running.

Adding a Controller

Now, lets add a controller to our app so we can start seeing some more structure. The most basic way to add a controller to our Hello World app is to use the ng-controller directive on our body tag.

<body ng-app="ionicApp" ng-controller="MainCtrl">

We’ll also need to define the controller.

angular.module('ionicApp', ['ionic'])
.controller("MainCtrl",function(){ console.log("Main Controller says: Hello World");});

And just like that, we have a controller.

Adding Routing/States

One major thing we are missing here is multiple pages. Right now we just have one page and in most apps, you most likely have a couple different pages. Ionic uses the Angular UI Router which uses the concept of states. Each state is essentially a page.

Let’s take the page we already have and convert it into a state.

First, lets take the code we currently have in the body and move it to a file templates/main.html where templates is a folder off the root of your project (Most likely “www”).

<ion-header-bar class="bar-stable"> <h1 class="title">Hello World!</h1></ion-header-bar><ion-content class="padding"> <p>Hello World, how are you?</p></ion-content>

Next, Let’s add a ion-nav-view to the body of our index page. This ion-nav-view is where your views/states will be displayed. We’ll also remove the ng-controller directive from our body tag as we will configure the state to use the main controller in our state configuration.

<body ng-app="ionicApp"> <ion-nav-view></ion-nav-view></body>

This leaves us with a very clean index page.

Next, we need to set up our first state. We’ll do this in a .config function using the $stateProvider. We’ll call this state main and make it so the URL will be /main. We’ll also point it to the controller we created before.

.config(function($stateProvider){

$stateProvider
.state('main', {
url: "/main",
templateUrl: "templates/main.html",
controller: 'MainCtrl'
});

});

Here, we are defining the state with the name main, defining the url, and telling it what template to use and what controller. We are still missing one thing, however. We need to tell our app where to go by default. We’ll use the $urlRouterProvider for this.

.config(function($stateProvider, $urlRouterProvider){
$stateProvider

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

$urlRouterProvider.otherwise('/main');
});

If you load this up, we’re back where we were before visually with our Hello World screen. We’re making progress. Let’s add a second route by adding a new template at templates/page2.html. We’ll give it the same look at the main page, but we’ll change the text on it.

<ion-header-bar class="bar-stable">
<h1 class="title">Page 2!</h1>
</ion-header-bar>
<ion-content class="padding">
<p>I am Page 2!</p>
</ion-content>

Let’s modify our main view to link to this one.

<ion-header-bar class="bar-stable">
<h1 class="title">Hello World!</h1>
</ion-header-bar>
<ion-content class="padding">
<p>Hello World, how are you? <a href="#/page2">Go to Page 2</a></p>
</ion-content>

Finally, we’ll need to modify our state configuration to add this state.

.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('main', {
url: "/main",
templateUrl: "templates/main.html",
controller: 'MainCtrl'
})

.state('page2', {
url: "/page2",
templateUrl: "templates/page2.html",
})

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/main');
});

In this case, we aren’t giving our state a controller. Our final javascript for our app is as follows:

angular.module('ionicApp', ['ionic'])
.controller("MainCtrl",function(){
console.log("Main Controller says: Hello World");
})
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('main', {
url: "/main",
templateUrl: "templates/main.html",
controller: 'MainCtrl'
})

.state('page2', {
url: "/page2",
templateUrl: "templates/page2.html",
})

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/main');
});

And you can find a demo of the final code on the Ionic Playground. (NOTE: This uses text/ng-template script tags to hold template markup and the app.js file in automatically included from the JS tab.)