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 using navParam
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 ouritems`` 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