I don't very understand, when I create a simple page with Ionic 3 with the following command ionic g page contact, where exactly have I to link the files and the page?
Only on src/app/app.module.ts with this line?
import { ContactPage } from '../pages/contact/contact';
Why do I need to push it on providers and declarations then? I have to do this for all the page my app will have?
And if I want create a link to this page, I have to import it too on the homepage's typescript file?
Thanks
when you create a page using
ionic g page testpage
first we need to import it in app.module.ts file
import { TestpagePage } from '../pages/testpage/testpage';
and in declarations array and entryComponents array
declarations: [
MyApp,
HomePage,
ListPage,
TestpagePage
],
entryComponents: [
MyApp,
HomePage,
ListPage,
TestpagePage
],
We no need to push it into providers array. and for example, if you want to navigate to this page from homepage, then
-> import testpage in home.ts file
import { TestpagePage } from '../testpage/testpage';
and on button click event,
this.navCtrl.push(TestpagePage);
declarations :
In the declarations section we need to include all components and directives we create.If we don't include them here, we'll get an error when we try to use them because Angular won't be able to recognise them in our code.
entryComponents:
In the entryComponents section we define any component that is only loaded by its type. This is the case for all Page components since these are all
loaded through the Navigation Controller.
Components that are loaded declaratively (i.e. are referenced in another component's template) don't need to be included in the entryComponents array.
So as you can see we have some duplication where we have to define our Page components in both the declarations and the entryComponents sections.
The reason for having this separate entryComponents section is so that Angular can compile a bundle for the app that will only include the components
that are actually used within the app.
providers:
In the providers section we can register services for dependency injection. When you register a service in the App Module, it can be used in all the
components in your app.
However, we don't need to include all our services here, we can also decide to register a service only for a specific component in its #Component
decorator.
source: check this URL
We don't need to import a page to app.module.ts every time we create a page, that's anti DRY, boring and app.module.ts becomes fat
With the new ionic cli, we can generate a page like as:
ionic generate page pagename
This will generate the page as well as the corresponding module pagename.module.ts . Then you can refer it from any other page by name in STRING. For e.g.:
this.navCtrl.push("pagename");
Related
I'm trying to route by url from app.component.ts in ionic.
my-site.com/parse/this/data
In a page component, I can do this by deep linking with -
#IonicPage({
segment: "my-component/:param1/:param2/:param3"
})
But then url includes the segment - my-site.com/#/my-component/:param1...
I just tried to add NavParams to app.component.ts and it threw an exception when trying to deep link. Without having to mess with url rewrites, is there a way to do this out of the box from the main app component so I get the root base?
Thanks,
In AngularJS I used ui-router for redirecting inside of my app(changing state).
It has 2 possible options to redirect
In template ui-sref='stateName'
In controller $state.go()
I just start play with Angular (4) and I found only way how to change route from template with something like:
Template routerLink="routePath"
Is there some way as there was in ui-router to change route from component?
constructor(private router:Router) {}
changeRoute() {
this.router.navigate(...)
// this.router.navigateByUrl(...)
}
See also https://angular.io/docs/ts/latest/api/router/index/Router-class.html
you can navigate via router like this
router.navigate([URL])
or like this
router.navigateByUrl('whole_string_containing_full_path')
Here router is an instance created in constructor, which is imported from router firstly, basically there is no difference between these two
First one accept array where as second one accept url in the form of string.
(Preface: I'm coming from a C#/WPF background, and brand new to web dev in general - bear with me!)
Using Angular 2, I am able to define my routes like this:
RouterModule.forChild([
{ path: 'contacts', component: ContactsComponent }
])
Then, in some html, I can refer to it using the routerLink syntax:
routerLink='/contacts'
This works great, and ultimately it allows me to replace the string with a binding, so I can get the paths at runtime, allowing the data to determine the navigation structure.
Now, I'm attempting to do something similar in Ionic 2, but if it's possible, it's not obvious to me. I've seen how you can use [navPush] to bind to a page using deeplinking (like this person did: http://plnkr.co/edit/syUH0d6SJd2gAjqaPLwr?p=preview), but that requires the page to be defined ahead of time in the component that wants to use it.
Does Ionic's navigation structure support this?
After a lot of digging, I've found what I was doing wrong.
Here's how to direct link to a path, using Ionic v2 deep linking:
In app.module.ts imports add:
IonicModule.forRoot(MyApp, {}, {
links: [
{ component: ContactsPage, name: 'ContactPageName', segment: 'contacts' }
]
Make sure to also add the ContactsPage to the declarations and the entryComponents.
Then, in the html of the page initiating the navigation, you can use it declaratively, like this
navPush="ContactPageName"
Note you are using the name of the direct link!
In my case, I'm getting a list of items from a json file, so looping through them like this:
<ion-item *ngFor="let contact of contacts" detail-push>
<button ion-button navPush="{{contact.link}}">Go</button>
</ion-item>
where my json file includes:
"link": "ContactPageName"
Hope that helps someone else!
I'm trying to set up a sails js app with Angularjs 2 in front.
I Want to use the angularJS system routing and no sails js system.
How can I disable the sails route and let angular control them ?
This is my app.component.ts where I declare the route /account
import {View, Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {AccountComponent} from './account.component';
#Component({
selector: 'my-app',
template: `<router-outlet></router-outlet>`,
directives: [ROUTER_DIRECTIVES]
})
#RouteConfig ([
{path: '/account', name: 'Account', component: AccountComponent}
])
export class AppComponent {
}
If I remove the route in config/routes.js, this doesn't work.
I try to disable some options in config.blueprint.js but nothing good.
I want to use Angular route to have an SPA and don't reload pages.
Thanks.
In fact, it's normal that you have an error when trying to access route directly without having a configuration on the server. In fact the actual address of a route is updating (and without # / hashbang approach) by Angular2 without any interaction with the server when using a route. The path doesn't exist on the server. If you load the HTML entry point file, everything will work fine. The only problem is when you try to access directly a route from its path...
By default, HTML5 history is used by Angular2. If you want not having this problem, you need to update your server to serve the index.html file for each route path you defined.
If you want to switch to the HashBang approach, you need to use this configuration:
import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {LocationStrategy, Location, HashLocationStrategy } from 'angular2/router';
import {MyApp} from './myapp';
bootstrap(MyApp, [
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy}
]);
In this case, when you refresh the page or access directly the page, it will be displayed again (but you will have a # in your address).
This link could help you as well:
Angular 2 : 404 error occur when i refresh through Browser
Hope it helps you,
Thierry
I have to return "/" for all routes in config/routes.js and let angular to display others view.
I have two modules in my application Admin and Default (Shopping Cart).
In My Admin Module I have added 3 Controllers Products, Category and Users
I want to add 3 Links in My Layout but it will cause error
Links to be added as:
Products
When I Click on This Link It will show me error
Message: Route admin is not defined
Give Answer with Example
Thanks
The second parameter to the url view helper is for the router name. If you haven't defined a custom router, then you don't use it. What you need to do, is put 'module' in the array for the first parameter, like this:
<?php echo $this->url(array('module'=>'admin','controller'=>'index', 'action'=>'index')); ?>