{"id":198,"date":"2017-07-01T18:00:43","date_gmt":"2017-07-01T16:00:43","guid":{"rendered":"http:\/\/blog.via-internet.de\/?p=198"},"modified":"2023-04-22T17:21:44","modified_gmt":"2023-04-22T15:21:44","slug":"ionic-app-from-scratch","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2017\/07\/01\/ionic-app-from-scratch\/","title":{"rendered":"Ionic | App from Scratch"},"content":{"rendered":"\n

Prepare Environment<\/h1>\n\n\n\n

Install Node.JS<\/h2>\n\n\n\n
$ LATEST=18.16.0 \n$ nvm install $LATEST --latest-npm node --version  \n$ npm --version \n$ nvm alias latest $LATEST\n$ nvm alias default $LATEST <\/pre>\n\n\n\n
Install Ionic<\/h2>\n\n\n\n
$ npm -g install ionic@latest\n$ ionic -version<\/pre>\n\n\n\n
Create an app from Template<\/h2>\n\n\n\n
ionic start --list\nionic start sidemenu sidemenu\nionic start super super<\/pre>\n\n\n\n
Introduction: First App<\/h1>\n\n\n\n
Prepare the base Application<\/p>\n\n\n\n
Create basic structure from template<\/h2>\n\n\n\n
$ ionic start app_from_scratch sidemenu --type angular\n$ cd app_from_scratch<\/pre>\n\n\n\n
Some name changing<\/h2>\n\n\n\n
To keep the structure of the filenames the same, i like to change the name for the routing module (changing the dash to a dot)<\/p>\n\n\n\n
from<\/p>\n\n\n\n
app-routing.module.ts<\/pre>\n\n\n\n
to<\/p>\n\n\n\n
app-routing.module.ts<\/pre>\n\n\n\n
Show base app<\/h2>\n\n\n\n
$ ionic serve -c<\/pre>\n\n\n\n
\"bildschirmfoto-2016-11-16-um-18-04-31\"<\/a><\/figure>\n\n\n\n
Add a page<\/h2>\n\n\n\n
Create a new page with the name “About”\n<\/p>\n\n\n\n
$ ionic generate page About<\/pre>\n\n\n\n
Add import to app.components.ts\n<\/p>\n\n\n\n
  public appPages = [\n    { title: 'Home', url: '\/home', icon: 'home' },\n    { title: 'List', url: '\/list', icon: 'list' },\n    { title: 'About', url: '\/about', icon: '' }\n  ];<\/pre>\n\n\n\n
Add item to app-routing.module.ts<\/p>\n\n\n\n
const routes: Routes = [\n  { path: '', redirectTo: 'home', pathMatch: 'full' },\n  { path: 'home', loadChildren: '.\/home\/home.module#HomePageModule' },\n  { path: 'list', loadChildren: '.\/list\/list.module#ListPageModule' },\n  { path: 'about', loadChildren: '.\/about\/about.module#AboutPageModule' }\n];<\/pre>\n\n\n\n
Save the file now, and you will see the sidemenu entry:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Looks great, but… where is the sidemenu?<\/p>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
Ok, if you check the home page html code (home.page.html), you will find a button for the side menu<\/p>\n\n\n\n
<ion-header>\n  <ion-toolbar>\n    <ion-buttons slot=\"start\">\n      <ion-menu-button><\/ion-menu-button>\n    <\/ion-buttons>\n    <ion-title>Home<\/ion-title>\n  <\/ion-toolbar>\n<\/ion-header><\/pre>\n\n\n\n
Missing in about.page.html:<\/p>\n\n\n\n
<ion-header>\n  <ion-toolbar>\n    <ion-title>About<\/ion-title>\n  <\/ion-toolbar>\n<\/ion-header><\/pre>\n\n\n\n
So, we had to add the desired code snippet<\/p>\n\n\n\n
<ion-header>\n    <ion-toolbar>\n      <ion-buttons slot=\"start\">\n        <ion-menu-button><\/ion-menu-button>\n      <\/ion-buttons>\n      <ion-title>About<\/ion-title>\n    <\/ion-toolbar>\n  <\/ion-header><\/pre>\n\n\n\n
Add some Ionic Components<\/h2>\n\n\n\n
Look at the Ionic Preview App<\/a>, or read the documentation<\/a>, if you what to dive in immediately.<\/p>\n\n\n\n
Or just copy some code from the documentation<\/a> page and try by yourself:<\/p>\n\n\n\n
\"bildschirmfoto-2016-11-16-um-19-01-22\"<\/figure>\n\n\n\n
\"bildschirmfoto-2016-11-16-um-18-58-48\"<\/figure>\n\n\n\n
We describe the steps to add additional components in detail in this blog<\/a>.<\/p>\n\n\n\n
Directory structure of an application<\/h1>\n\n\n\n
One possible way to build an app is:<\/p>\n\n\n\n
    \n
  • create a base app from blank template<\/li>\n\n\n\n
  • add desired pages, code and components<\/li>\n<\/ul>\n\n\n\n
    To find out the necessary steps to add an new page or component, look into the templates and compare a template with the blank template. the differences are the required steps to an a component.<\/p>\n\n\n\n
    For example, if you want to add tabs to your app, then compare the blank template with the tabs template:\n<\/p>\n\n\n\n
    $ ionic start starter_tabs  tabs  --type angular --no-deps --no-git --no-link\n$ ionic start starter_blank blank --type angular --no-deps --no-git --no-link<\/pre>\n\n\n\n
    The diff command shows the changes between the two templates:<\/p>\n\n\n\n
    $ diff -r -w starter_tabs starter_blank<\/pre>\n\n\n\n
    diff -r -w starter_blank\/ionic.config.json starter_tabs\/ionic.config.json\n2c2\n<   \"name\": \"starter_blank\",\n---\n>   \"name\": \"starter_tabs\",\ndiff -r -w starter_blank\/package.json starter_tabs\/package.json\n2c2\n<   \"name\": \"starter_blank\",\n---\n>   \"name\": \"starter_tabs\",\nOnly in starter_tabs\/src\/app: about\ndiff -r -w starter_blank\/src\/app\/app-routing.module.ts starter_tabs\/src\/app\/app-routing.module.ts\n5,6c5\n<   { path: '', redirectTo: 'home', pathMatch: 'full' },\n<   { path: 'home', loadChildren: '.\/home\/home.module#HomePageModule' },\n---\n>   { path: '', loadChildren: '.\/tabs\/tabs.module#TabsPageModule' }\n8d6\n< \ndiff -r -w starter_blank\/src\/app\/app.module.ts starter_tabs\/src\/app\/app.module.ts\n3c3\n< import { RouterModule, RouteReuseStrategy, Routes } from '@angular\/router';\n---\n> import { RouterModule, RouteReuseStrategy } from '@angular\/router';\n9d8\n< import { AppComponent } from '.\/app.component';\n10a10\n> import { AppComponent } from '.\/app.component';\nOnly in starter_tabs\/src\/app: contact\ndiff -r -w starter_blank\/src\/app\/home\/home.module.ts starter_tabs\/src\/app\/home\/home.module.ts\n0a1,2\n> import { IonicModule } from '@ionic\/angular';\n> import { RouterModule } from '@angular\/router';\n3d4\n< import { IonicModule } from '@ionic\/angular';\n5,6d5\n< import { RouterModule } from '@angular\/router';\n< \n10a10\n>     IonicModule,\n13,19c13\n<     IonicModule,\n<     RouterModule.forChild([\n<       {\n<         path: '',\n<         component: HomePage\n<       }\n<     ])\n---\n>     RouterModule.forChild([{ path: '', component: HomePage }])\ndiff -r -w starter_blank\/src\/app\/home\/home.page.html starter_tabs\/src\/app\/home\/home.page.html\n3,5c3\n<     <ion-title>\n<       Ionic Blank\n<     <\/ion-title>\n---\n>     <ion-title>Home<\/ion-title>\ndiff -r -w starter_blank\/src\/app\/home\/home.page.spec.ts starter_tabs\/src\/app\/home\/home.page.spec.ts\n14,15c14\n<     })\n<       .compileComponents();\n---\n>     }).compileComponents();\ndiff -r -w starter_blank\/src\/app\/home\/home.page.ts starter_tabs\/src\/app\/home\/home.page.ts\n6c6\n<   styleUrls: ['home.page.scss'],\n---\n>   styleUrls: ['home.page.scss']\n8,10c8\n< export class HomePage {\n< \n< }\n---\n> export class HomePage {}\nOnly in starter_tabs\/src\/app: tabs\n<\/pre>\n\n\n\n
    Some differences come from the different names (starter_blank vs. starter_tabs, HomePage vs. TabsPage).\u00a0The significant changes are those, which are new in the starter_tabs directory. <\/p>\n","protected":false},"excerpt":{"rendered":"
    Prepare Environment Install Node.JS Install Ionic Create an app from Template Introduction: First App Prepare the base Application Create basic structure from template Some name changing To keep the structure of the filenames the same, i like to change the name for the routing module (changing the dash to a dot) from to Show base app Add a page Create a new page with the name “About” Add import to app.components.ts Add item to app-routing.module.ts Save the file now, and you will see the sidemenu entry: Looks great, but… where is the sidemenu? Ok, if you check the home page html […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[98,35],"tags":[109],"class_list":["post-198","post","type-post","status-publish","format-standard","hentry","category-ionic","category-ionic-4","tag-ionic-4"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":false,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=198"}],"version-history":[{"count":3,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/198\/revisions"}],"predecessor-version":[{"id":9489,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/198\/revisions\/9489"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}