Vahid Najafi
Vahid Najafi

Reputation: 5233

Angular routing vs Ionic routing

I'm new to ionic2. There is something weird in it's routing compared to pure angular routing. In Angular:

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
imports: [
  RouterModule.forRoot(appRoutes)
  // other imports here
],

We pass a constant with type of Routes.

In Ionic (sidemenu starter) they pass a component to forRoot function.

import { MyApp } from './app.component';
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
],

Any idea?

Upvotes: 10

Views: 13430

Answers (2)

Gregor Srdic
Gregor Srdic

Reputation: 446

Edit:

Ionic 4 is also using standard angular routes in the background.Pushing and popping is not the ionic way anymore and here is a good read on using angular router with ionic.

Original Answer:

Ionic does not support URL routes, instead it implements a custom navigation solution - NavController (as linked by suraj). NavController maintains a stack of pages - moving forward you push a page to the stack this.nav.push(Page1); and moving back you pop it this.navCtrl.pop();. In this way your url in browser is always the same and application always opens on the home page - which is similar to mobile application behaviour. To enable direct access to a certain resource (as you would open url myapp/items/1) you have to use deep linking plugin.

Upvotes: 13

Chirag thaker
Chirag thaker

Reputation: 331

In ionic, we push a view screen from another views

But in angular it is predefined routes mapping that if you go to this route i.e. app/login you will be redirected to login route that is bind with loginComponent

Upvotes: 1

Related Questions