[Tutorial]: Ionic App Development: Building the buisness app part 3
Repository: Ionic Framework Github Repository
Software Requirements: Visual Studio Code(Or any preferred editor)
A browser(Preferably Chrome)
What you will learn:
Navigating through pages with
navCtrl
and sharing variables usingnavParam
Adding page components
Styling and design methods
Difficulty: Intermediate
Tutorial
In the last tutorial we dealt with starting up a new template and importing bootstrap for all web designers who would like to copy the exact styles from their webpages directly to their applications.
Today well be going a but further deeper into develpment learning how to add and pop pages and use angular directives for this.
Note: In this tutorial we will be using ionics default styling methods to style the application.
Lets begin with our home page.
In our homepage we'll set a simple background image and some cards to display our balance and a few products. So for setting the background well add a class of .background
to our ion-content
tag which is where the page contents will load.
<ion-contents padding:10px class="background">//also added padding different from the default
//code will be here
</ion-contents>
The next thing well do is go to the app.scss
file in our src/app/app.scss
.
The reason were putting this here is because the sass rules applied here as said earlier can be applied to all pages. An alternative to this would be go to the official documentation and find the variable for the background color and change it. This would be found in the theme/variables.scss
and after this go to the official documentation and find out the variable that is default for the background image. This on the other hand isnt too expedient and may be stressful as the variables are numerous.
The next thing well be doing is adding componenets.
Components are default ionic properties you can add to pages for added functionality. An example is what were going to add next which is the card.
Below our header well be adding a simple card which will hold the account balance for the users store
The code should look like this
<ion-card>
<ion-card-header>
<div text-center class="balanceheading">
<h1>
BALANCE
</h1>
</div>
</ion-card-header>
<hr>
<ion-card-content>
<div text-center class="balancecontent">
Your current account balance is
</div><br>
<div text-center class="balance_value">
{{ balance | currency : "N" }}
</div>
</ion-card-content>
<ion-item></ion-item>
</ion-card>
If you look at the contents you'll notice the ion-card
and ion-card content
tags which are peculiar to ionic. With these you could differentiate between the parts of the card by default.
Another thing i did was add some properties such as text-center
to some divs
. This properties dont need to be added to classes. You simply add them to tags to edit text within them without a class. They can be added to any text carrying container, which is a difference between ionic styling and bootstrap or normal html styling.
<ion-card>
<ion-card-header>
<h1 text-center class="balanceheading">Trending products</h1>
</ion-card-header>
<ion-list>
<button ion-item>
<ion-icon name="cart" item-start></ion-icon>
Product 1
</button>
<button ion-item>
<ion-icon name="medical" item-start></ion-icon>
Product 2
</button>
<button ion-item>
<ion-icon name= "pub" item-start></ion-icon>
Product 3
</button>
<button ion-item>
<ion-icon name="paw" item-start></ion-icon>
Product 4
</button>
<button ion-item>
<ion-icon name="beer" item-start></ion-icon>
Product 5
</button>
<button ion-item>
<ion-icon name="planet" item-start></ion-icon>
Product 6
</button>
</ion-list>
</ion-card>
We will also be adding a second card which is intended to show the trending products in the store. For now we just add the card with about 6 products. Well be dealing with the logic behind that later.
On to the products page we'll add another card to give some basic instructions on what you can do on this page. Simply add another card with the following contents.
<ion-card>
<ion-card-header>
Manage your products
</ion-card-header>
<ion-card-content>
Here you can manage all the products in your store and keep accurate count of everything bought to maximize profits
</ion-card-content>
</ion-card>
Dont also forget to add the class .background
to all the pages ion-content
tag so that the background color will add to the all the pages.
Our app.scss
should look like this
.background{
background-color: rgb(154, 210, 243);
}
So on this page we want there to be a list of all the products available in the users store.
For such a purpose we would want to make an editable list that can be looped through using angular, these will be the code
<ion-card>
<ion-list inset>
<ion-list-header>
Your products
</ion-list-header>
//Angular directives used such as *ngFor
<button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
{{ item }}
</button>
</ion-list>
</ion-card>
If your familiar with angular you should notice the ''ngForand
(click)directives. We use this to loop through a certain list to the front end of our program. Of course this would no work yet cause we havent defined our
items`` array.
So go to the typescript document for that file and just to test out try making an array of one or two elements. Do something like this
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { NewproductPage } from '../newproduct/newproduct';
@IonicPage()
@Component({
selector: 'page-products',
templateUrl: 'products.html',
})
export class ProductsPage {
public items:any[];
constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController) {
this.items = ['item1'];
//This makes items accesible from our template
}
createNewProduct(){
this.navCtrl.push(NewproductPage);
}
ionViewDidLoad() {
console.log('ionViewDidLoad ProductsPage');
}
}
We created an array of any values so that we can modify it easily. And if you save the file you would see it added.
The next thing we would want to do is add a button that navigates to a new page we want to create which would give options for creating a new product.
Ionic helps us create new pages with simple terminal commands.
So in your terminal type
ionic g page newproduct
This generates a new page called product. Whenever a new page is created they are a few things we would want to do. Head to your app/app_module.ts
and import the new pages to your app. You simply just import the pages and then include them in @ng declarations
and bootstrap
. You do that like this
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { ProductsPage } from '../pages/products/products';
import { NewproductPage } from '../pages/newproduct/newproduct';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
ProductsPage,
NewproductPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
ProductsPage,
NewproductPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
Then we add a new button to our products.html
and use it to call a function to open that page.
products.html
<button ion-button full (click)="createNewProduct()">
Add a new product
</button>
//and product.ts
createNewProduct(){
this.navCtrl.push(NewproductPage);
}
The navCtrl helps us navigate to new pages easily.
In the next tutorial well deal with more logic.
Our app should look like this at the end of this tutorial.
You can find my code in Github
Thank you for your contribution.
We have been reviewing your contribution and suggest the following:
Your tutorial has very clean and simple code.
Tutorial very well explained.
Good work and thank you for making this contribution.
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
Thank you for your review, @portugalcoin!
So far this week you've reviewed 8 contributions. Keep up the good work!
Hello! Your post has been resteemed and upvoted by @ilovecoding because we love coding! Keep up good work! Consider upvoting this comment to support the @ilovecoding and increase your future rewards! ^_^ Steem On!
![](https://steemitimages.com/640x0/https://codingforspeed.com/images/i-love-coding.jpg)
Reply !stop to disable the comment. Thanks!
Hello! I find your post valuable for the wafrica community! Thanks for the great post! We encourage and support quality contents and projects from the West African region.
Do you have a suggestion, concern or want to appear as a guest author on WAfrica, join our discord server and discuss with a member of our curation team.
Don't forget to join us every Sunday by 20:30GMT for our Sunday WAFRO party on our discord channel. Thank you.
Upvoted.
DISCLAIMER: Your post is upvoted based on curation algorithm configured to find good articles e.g. stories, arts, photography, health, etc. This is to reward you (authors) for sharing good content using the Steem platform especially newbies.
If you're a dolphin or whales, and wish not to be included in future selection, please let me know so I can exclude your account. And if you find the upvoted post is inappropriate, FLAG if you must. This will help a better selection of post.
Keep steeming good content.
@Yehey
Posted using https://Steeming.com condenser site.
Hi @yalzeee!
Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server
Hey, @yalzeee!
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!