Adding Pages To ionic App

Adding Pages To ionic App

Adding pages to an ionic app is just as easy as it is to start a new app project when you use the ionic CLI. One of the core concepts of Angular 2 and ionic is developing everything in a  modular ethos. Modular ionic code will allow you to “cut and paste” app parts over and over and you can quickly build apps for clients.

ionic generator CLI command creates a page and its subsequent files are placed in a folder titled the name of the page. The generate command creates an .html, .scss, and a .ts file in a root folder /pages. use a camel-casing syntax for you page name if the title is multiple words.

 

ionic g page myPage

√ Create app/pages/my-page/my-page.html
√ Create app/pages/my-page/my-page.ts
√ Create app/pages/my-page/my-page.scss

 

.ts

.ts is Typescript. TypeScript compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any JavaScript engine that supports ECMAScript 3 (or newer). No need to worry about Typescript at the moment. Its not a requirement to have full knowledge when using ionic. You can learn more about Typescript as you learn ionic and Angular.

.scss

.scss is a sass file. You place page specific css into this file. ionic also includes an app wide SCSS file. SASS variables and such can be placed here. When you are developing during inonic serve, all your .scss files get compiled into one css file the app will use. No extra sass, gulp, grunt compilation set up is needed. ionic has done the work for you!

.html

This file should be self explanatory. It’s your template file for the page. This file will contain what is called components. Components are html elements, think <div> or <p>. If you are following this from the WordPress App tutorial, components are like WordPress’ shortcodes. Components are extra elements that your app reads and then executes code specific to that component. This code that is executed is in the .ts file. We’ll go over the components more later. ionic comes with tons of components you can use, you may not ever need to create custom components as ionic has included a lot of UI elements expected in various apps.

 

WordPress Pages vs ionic App Pages

Think of pages in your ionic app like templates of a WordPress site not pages you create in the WordPress Admin. WordPress uses the same template for every page (page.php) or for every single post (single.php). Plan out your app to use this same method. You wouldn’t use generate CLI command to create a page for every blog post in your app. You would create a “template” for a single post and one to list your posts.

Later in the series I’ll show you how to use the same app page to list your posts and display a single post by using a selected item conditional. You could create a new page but its a lot of extra files and code you don’t really need. With regards to apps, less code and files the better. Phones are extraordinary devices but they’re not infallable when bogged down.

Using the generate command only creates the page files. The component has to be imported into your app where you want to use it. This is why i suggest you create each starter app and look through the code. Each type of app can structure the page code differently based on app type. If you are using the tabs starter then the tabs need to be added in the main app file so the tabs are ready after app launch.

Open /src/app/app.module.ts

This file should have the tab / page imports from the starter set up. New pages are not added to this file when you use the generate command. Create a new import using the same code as the other imported tabs / pages. Note, you do not need the .ts file extension.

import { MyPage } from '../pages/my-page/my-page';

Also need to add the page to declaration and entry components. See the image below. MyPage is the export class name in your page’s .ts file. You only need to add this to app.module.ts if you are creating a tabs based app. Pages you navigate to from each tab can be imported in the tab / page class. Since non tab pages are do not need to be loaded until you navigate. Tabs however need to be loaded at app runtime and thats why they are added to  app.module.ts. They are separate views with their own navigation.

import page into main module

Open /src/pages/tabs/tabs.ts

This file will be your tabs class. Think of it like a template part in WordPress. Add the import to the class like the other tab items. Also need to add a reference to the tab root. This will create a connection to the html template. When you click tab4Root it will load MyPage.

Tab class

Open /src/pages/tabs/tabs.html

Add the html for ion-tab component with the corresponding parameters for myPage class.

tabs component html

The tab should now be visible in the apps tab bar.

tab bar

I chose tabs to highlight the pages because its a little more difficult to understand than other navigation types. Create other starters like side menu and view the pages setup to learn more. Check out other tutorials in WordPress mobile app series.

Leave a Reply

Your email address will not be published. Required fields are marked *

Bitnami