Difference between Components, Pages and directives

Ionic Framework ionic-v3
1

What is the exact difference between Components, Pages and directives? And when to use them?

2

A page and a component are the same thing. “Page” is just terminology to identify a component that is being used as a screen in your Ionic application, there is nothing special that differentiates a page to a normal Angular component.

A component has a template and is used to add a completely new element to the app. Your “pages” for example might have a selector of page-home and would be embedded into your application with the tag:

<page-home></page-home>

The template for your “HomePage” component would then be injected where that tag is. The same concept applies for other components, maybe you have a counter component for example:

<counter></counter>

and maybe you use that inside of your HomePage component.

A directive is used to modify the behaviour of an existing component. You might create a directive to modify what your counter does, i.e:

<counter countSlow></counter>

In this case, countSlow is a directive that will make the counter count slower. Unlike components, directives do not have templates.

10 Likes
3

Thank you so much for brief description. So I can use only pages for my app rather going for components.

4

When to use a component and provider…?
what are the difference between them…?

is it both are same or not…?

can someone give me an explanation.?

5

A component has a template, so it’s going to display something on the screen. A service/provider does not have a template, and is used for running some kind of logic (performing some calculation perhaps, or fetching some data from an API). You can also run logic directly in your components, but the benefit of a service is that it can be injected into multiple different components, and they could all use the functionality that the service provides.

Also, for anybody reading my explanation in my previous post (I’m no longer able to edit it), I should clarify that a “component” is also technically a “directive”, a component is just a directive with a template.

2 Likes
6

Thanks for your replay…i would like to know one more thing …

is there any diffrence between pages and components?.because according to your explanation components are displaying a template and pages also displaying a template…

i think both are same. are n’t they…?

7

@aceredy

Ionic 1 was designed to work with AngularJS (JavaScript).
Ionic 2 and 3 were designed to work with Angular (TypeScript).

The Ionic team decided early on to develop their own approach to navigation and routing.
An approach based on pushing and popping ‘pages’.

The Ionic NavController: https://ionicframework.com/docs/api/navigation/NavController/
The Angular router: https://angular.io/guide/router

The best place to grok Angular: https://angular.io/guide/architecture

If you use Ionic 4 you will be able to use Angular’s router: https://blog.ionicframework.com/whats-the-issue-with-issues/

2 Likes
8

Thanks …Really helpful

9

Thanks It is very useful