angular-routing | 易学教程

Handling trailing slashes in angularUI router

阅读更多关于 Handling trailing slashes in angularUI router

It's been hours since I started working on this problem and I can't seem to get my head around the solution. I have an app that may result in users actually typing in the URL. In such cases it is not hard to believe that user might enter a trailing slash. For example, www.example.com/users/2 and www.example.com/edit/company/123 should be treated the same as www.example.com/users/2/ and www.example.com/edit/company/123/ This only needs to done for handling URL routing on the client side. I am not interested in handling trailing slashes in resource/API calls. I am only interested in handling

How to trace routing in Angular 2?

阅读更多关于 How to trace routing in Angular 2?

问题 I have component with separated file of routing settings: import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { Route } from '../core/route.service'; import { extract } from '../core/i18n.service'; import {CalendarThematicPlanComponent} from './calendar-thematic-plan.component'; const routes: Routes = Route.withShell([ { path: 'calendar', component: CalendarThematicPlanComponent } ]); @NgModule({ imports: [RouterModule.forChild(routes)],

AngularJS writing an app with no server

阅读更多关于 AngularJS writing an app with no server

问题 I'm trying to write an AngularJS client side only app. I thought I might be able to load it from chrome by typing in the address bar: file:///C:/path/to/project//index.html I also tried to invoke chrome with the flag --allow-file-access-from-files Unfortunatly nothing happened - just the busy sign on the tab name is working. Why does is not loading my app? I'm using the following code: index.html: <!doctype html> <html ng-app="app"> <head> <script type="text/javascript" src="//cdnjs

Pass object as parameter in $state.go

阅读更多关于 Pass object as parameter in $state.go

问题 I want to navigate to another state/screen and pass a simple json object to this next screen. I have the following: var benefit = { "x": "y"}; $state.go('pages.claimed', { 'benefit': benefit }); My state looks like this: .state('pages.claimed', { url: '/claimed', views: { 'page': { templateUrl: 'templates/pages/claimed.html' } } }) I can't however access the "benefit" object/parameter in the pages.claimed view. I'm using the ionic framework based on angular. Thanks for pointing me in the

Custom RouteReuseStrategy for Angular's child module

阅读更多关于 Custom RouteReuseStrategy for Angular's child module

问题 I want to use this custom route reuse strategy for just one module: export class CustomRouteReuseStrategy extends RouteReuseStrategy { public shouldDetach(route: ActivatedRouteSnapshot): boolean { return false; } public store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {} public shouldAttach(route: ActivatedRouteSnapshot): boolean { return false; } public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { return null; } public shouldReuseRoute(future:

404 Not Found nginx angular routing

阅读更多关于 404 Not Found nginx angular routing

问题 I Have an Angular application. I run the command ng build --prod --aot to generate the dist folder. In the dist folder I created a file named Staticfile then I uploaded the dist folder to pivotal.io with the following commands: cf push name-app --no-start cf start name-app The app runs well. I have a nav bar, so when I change the path with navbar everything works fine. But when I do it manually (I enter the url myself) I have this error 404 Not Found nginx . This my app.component.ts: const

How do I navigate to a parent route from a child route?

阅读更多关于 How do I navigate to a parent route from a child route?

My problem is quite classic. I have a private part of an application which is behind a login form . When the login is successful, it goes to a child route for the admin application. My problem is that I can't use the global navigation menu because the router tries to route in my AdminComponent instead of my AppCompoment . So my navigation is broken. Another problem is that if someone want to access the URL directly, I want to redirect to the parent "login" route. But I can't make it work. It seems to me like theses two issues are similar. Any idea how it can be done? Mark Rajcok Do you want a

How to apply canActivate guard on all the routes?

阅读更多关于 How to apply canActivate guard on all the routes?

问题 I have a angular2 active guard which handle if the user is not logged in, redirect it to login page: import { Injectable } from "@angular/core"; import { CanActivate , ActivatedRouteSnapshot, RouterStateSnapshot, Router} from "@angular/router"; import {Observable} from "rxjs"; import {TokenService} from "./token.service"; @Injectable() export class AuthenticationGuard implements CanActivate { constructor ( private router : Router, private token : TokenService ) { } /** * Check if the user is

Best method to set different layout for different pages in angular 4

阅读更多关于 Best method to set different layout for different pages in angular 4

问题 I am new to angular 4. What I'm trying to achieve is to set different layout headers and footers for different pages in my app. I have three different cases: Login, register page (no header, no footer) routes: ['login','register'] Marketing site page (this is the root path and it has a header and footer, mostly these sections come before login) routes : ['','about','contact'] App logged in pages (I have a different header and footer in this section for all the app pages but this header and

Getting Angular2 error 'No provider for Router! (RouterOutlet -> Router)'

阅读更多关于 Getting Angular2 error 'No provider for Router! (RouterOutlet -> Router)'

问题 I use Angular2 alpha39 and Babel to transpile the ES6 JS file. I'm not using typescript. I created a component which displays correctly. I added a router-outlet to the template. When I run the app, I get the error message: No provider for Router! (RouterOutlet -> Router) The call stack is: Here is the snippet of code: template: .... // Removed for brevity <div class="contenttext"> <router-outlet></router-outlet> </div> .... // Removed for brevity Component file: import { Component, View,