The Techies' pub

Ionic 2 – A simple app (Not helloworld or todo list :))

Good day to all.. Once again I would like to apologize first for not posting/replying to stuff here. Anyway, let’s get to Ionic 2.

Oh wait.. Angular 2 is out.. :D.. Thats right..!! Its still beta though, but the internet is buzzing with the simplicity of it. Driftyco released Ionic 2 (Beta) as their response to angular 2 which basically follows the same regulations as Angular 2 and is pretty neat.

Ah, that’s enough; What is this Angular/Ionic 2 and why should I use it rather than using good old Angular 1 ? This is the question most people get nowadays. Well, you are not alone, I too asked the same question. (Is it I too or me too ?, whatever, I had the same thought in mind. )

Okay first of all, Angular 2 follows a component-based architecture; This means that the concept of controllers and $scope which you learned and loved has been removed from AngularJS. Now every single aspect of your app is built as separate components and these components can be merged to make a single app. It has a ton of other features as well like selectors, observables etc., but you get my point right.

So, without further ado let’s get started.

For this demo let us create a simple app that gets the blog posts from the word press freshly pressed API and display it on our app.

The complete code of this demo is present in github and can be found at at the below url:

1) The import statements denote the components which we are importing into our file in order to use them.

2)The @Injectable() denotes that this component can be injected as a service into other components and used.

3) The export class statement denotes the class which we are exporting as a component in this file. Here in this example we export the class WpService which has a constructor and 2 functions namely loadData() and getData().

4) In this load data method we make a http get request. Now usually async requests are handled using promises. But here the request returns a observable. Observables are interesting aspects of angular 2. We then add a .subscribe or a .map on the returned observable to store it in our variable (i.e., this.data here);

Guys, I know I have only touched up on the code; Please view my video where I have explained a bit more about the above code.

Now open the home.js file and enter the below code.

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

import{Page}from'ionic-angular';

import{Inject}from'angular2/core';

import{WpService}from'./wpservice'

@Page({

templateUrl:'build/pages/home/home.html',

providers:[WpService]

})

exportclassHomePage{

staticget parameters(){

return[WpService];

}

constructor(wpservice){

this.service=wpservice;

this.data=null;

this.flag=true;

}

retrieve(refresher){

this.service.loadData();

setTimeout(()=>{

vartdata=this.service.getData();

this.data=tdata.posts;

this.flag=false;

refresher.complete();

},5000);

}

}

Now. Let’s break it down.

1) The @Page directive denotes that the following component is similar to a view. (please correct me if I am wrong).

2) Now if you notice we import the WpService which we wrote previously and assign it to this.service in the constructor so that other functions in the class can use it.

3) We call the loadData() method (present in the service) once. Then a timeout of 5 seconds happens and then the getData() method is called which gets the data and sets it to the local variable (i.e., this.data).

Now lets do the UI part. Open home.html and paste the below code.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<ion-navbar *navbar>

<ion-title>

My App

</ion-title>

</ion-navbar>

<ion-content class="home">

<div[hidden]="!flag">

<h3>Pull down toview the posts!!</h3>

</div>

<ion-refresher(refresh)="retrieved($event)">

</ion-refresher>

<ion-card *ngFor="#item of data">

<ion-card-header>

<ion-item>

<ion-avatar item-left>

<img src="{{item.author.avatar_URL}}">

</ion-avatar>

<ion-card-title>{{item.author.nice_name}}</ion-card-title>

<p>{{item.author.URL}}</p>

</ion-item>

</ion-card-header>

<ion-card-content>

<h2>{{item.title}}</h2>

<div[innerHTML]="'<p>'+item.content+'</p>'"></div>

</ion-card-content>

</ion-card>

</ion-content>

Now, Let’s break down this code.

1) You must have noticed the *navbar in the <ion-navbar>. The asterix is essential. Also, as of today <ion-header-bar> doesn’t exist in Ionic 2.

2) Notice the *ngFor; it is similar to ng-repeat in angular 1 but now the syntax has slightly changed. its *ngFor = “#item of data” and not “item in data”. (I was stuck here for 25 minutes).

3) Notice that I have used [hidden] and [innerHTML]. This is similar to ng-hide/ng-show and generally binding.

Now if you notice there will be a home.sass file in the home directory. This is where you add the styles pertaining to the page.

Also there is a themes directory outside the home directory. If you look inside you will see 4 files. Notice that ionic 2 has separate scss files for ios and android (md stands for material design). Also it has a app.variables.scss.

For the sake of simplicity, I will just show you how to style a single item alone using the app.variables.scss.

Open the app.variables.scss file and add the below line at the bottom.

1

$card-md-title-text-color:red;

Now what has happened here.

1) Open this url and read about theming.-http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/

2) Once done open this url-https://github.com/driftyco/ionic/blob/2.0/ionic/components/card/card.md.scss

You will see all the variables used for styling cards specific to material design. (Android). What we have done is, we have simply given a override for the $card-md-title-text-color variable in our app.variables.scss file, thereby changing the color of the title in the card.

Now I guess you get a general idea on how the styling is done. (Please watch the video so that you would get a better understanding of what I said.)

Okay, that’s it guys.

Now just give the below command (in the shell) to see the app in action.

Thanks bro., I wrote this long back and I am planning to write an updated post soon(with the latest ionic 2 beta). Thanks again for reading my blog. Hope it helped you..

XYZ XYZ

This is awesome
How did you get into this this fast?(perhaps via work?)
I loved the scope and controllers et al😊
Pedantically speaking, ionic and angular2 are good
Ok js is making the same mistake that Java made imo (talking about springmvc or struts vs Jsf with prime or richfaces)
Components are good and maintainable when you write all the components, but in the long run yr app may use 3rd party components. And if there is a bug or extra func needed from a component then project restrictions or licensing issues may not permit you to poke open and repair. That is major when you consider adoption within major IT projects .. Or have to say will never get 3rd party components.. Which might cost you more time and money to do things

bengalliboy

Hi thanks for the article. I could not get that refresh auto to work. I downloaded the code but looks like bug at the end of the video is not resolved. In ionic (1) I see it is working. Do you know on 2 if it is fixed? If so where to get the updated code?
On a second question, can you point me to a CRUD application with ionic2 using php and mysql?
Thanks!