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.
Related
I am currently working on a Quasar app that uses axios library. User is authenticated as usual by a token that, when expired, has to be renewed using a renewal token. I need an axios interceptor to filter status 401 so that I can ask for a new token and send the request again.
The interceptor is already coded, now the problem is that I don't know how to make Quasar use the plugin. The app that is currently in production, which is done with Vue 2, does it like this:
const _axios = axios.create(*config*);
axios.interceptors.request.use(.....);
Plugin.install = function(Vue, options) { .... }
Vue.use(Plugin)
export default Plugin;
Currently Quasar is based on Vue 3, and Plugin is deprecated, I know in Vue 3 the plugin should be included in the /src/main.js file like this:
import { createApp } from 'vue'
const app = createApp({})
app.use(myPlugin, {
/* optional options */
})
But in Quasar there is no main.js file, I can't see an app.use anywhere, and don't know how to tell Quasar to use the plugin with the axios interceptor. I know there's a quasar.conf.js file that you can set to use Quasar plugins, such as Dialog for example,but I don't know if this file would be the place to make Quasar use the plugin I coded or how it should be done. I have not been able to find info on this subject, could someone please tell me how to make Quasar insert my plugin or point me to where I could find info about it? Thanks.
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,
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");
(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 using Symfony 1.4 to build a web application. The home page action for this application is as follows.
Module = content
Action = indexAction.php
/localhost/myapp/web/index.php/content/
I need to use this action as the defalut action when someone access the application folder using web browser. If someone access the myapp folder as follows.
/localhost/myapp
It should internally redirect to the
/localhost/myapp/web/index.php/content/
and access the homepage.
I guess Symfony routing will not work here. Can someone help me on this.
Using the symfony routing system, you can define the default module / action for the /.
In the myapp/config/routing.yml, define the homepage route (it's defined by default):
# default rules
homepage:
url: /
param: { module: content, action: index }
This way, accessing /myapp won't redirect you but you will be on your homepage.