'canLoad' guard can decide whether a lazy load module can be loaded or not. @Injectable() export class CanLoadPokemon implements CanLoad { constructor(private authService: AuthService) { } canLoad(route: Route): Observable<boolean>|Promise<boolea…

From Article: RESOLVING ROUTE DATA IN ANGULAR 2 Github If you know Anuglar UI router, you must know resolve function in ui router, which you can load data before template and controller get inited. In Angular2 router, you can also use resovler. The r…

In this tutorial we are going to learn how we can to configure an can activate route guard in the Angular 2 router. We are going to implement the concrete example where a user can only enter a certain route if its authorized to do so. We are also goi…

In this tutorial we are going to learn how we can to configure an exit guard in the Angular 2 Router. We are going to learn how to use a CanDeactivate route guard to ask the user if he really wants to exist the screen, giving the user to for example…

路由设置 Angular中路由的配置应该按照先具体路由到通用路由的设置,因为Angular使用先匹配者优先的原则. 示例: 路由设置如下: export const reportRoute: Routes = [ { path: 'report', children: [ { path: '', component: ReportComponent },{ path: ':id', component: ReportDetailComponent },{ path: 'report-new',…

In this tutorial we are going to learn how we can accidentally creating memory leaks in our application while using the Angular 2 router. We are going to learn how we can prove that the memory leak is happening, we are going to learn what is causing…

In this tutorial we are going to learn how to use the Angular 2 router to pass optional query parameters from one route into another route. There are couple of ways of doing this from the source route perspective: we use the queryParams property in t…

In the application, we have heros list, when click each hero, will redirect to hero detail view. That means, hero detail component will get inited everytime. Currently there is no option to navigate to bewteen two hero detail. Currently, we use Obser…

In this tutorial we are going to learn how to navigate programmatically (or imperatively) by using the Router API. We are going to learn how to use the function navigateByUrl to navigate using a manually constructed string, but we are also going to l…

In this tutorial we are going to learn how to configure the Angular 2 router to cover some commonly used routing scenarios: what if the user goes to the root of the application manually ? Probably you would want some sort of home page to be displayed…

You can load resource based on the url using the a combination of ActivatedRouteand Angular 2’s Http service. Since the params and Http are both streams, you can use RxJS to get the data off the param then switchMap over to an Http request using that…

Angular 2’s ActivatedRoute allows you to get the details of the current route into your components. Params on the ActivatedRoute are provided as streams, so you can easily map the param you want off of the stream and display it in your template. For…

Angular 2 lazy loading is a core feature of Angular 2. Lazy loading allows your application to start up faster because it only needs to use the main App Module when the page initially loads. As you navigate between routes, it will load the additional…

Angular 2 navigation is configured using the routerLink directive. The routerLink directive behaves like an href’s you are familiar with, but it hooks into Angular 2’s router to navigate between your defined routes. app.component.html: <nav> <a r…

navigate是Router类的一个方法,主要用来路由跳转. 函数定义 navigate(commands: any[], extras?: NavigationExtras) : Promise`<boolean>` interface NavigationExtras { relativeTo : ActivatedRoute queryParams : Params fragment : string preserveQueryParams : boolean preserveFrag…

In this tutorial we are going to learn how we can can configure redirects in the angular 2 router configuration. We are also going to see again another example on how the order of the configuration might trip us. We are going to see the different bet…

In this tutorial we are going to learn how we can can configure redirects in the angular 2 router configuration. We are also going to see again another example on how the order of the configuration might trip us. We are going to see the different bet…

Article Github Auxiliary Routes is is little bit hard to understand. Here is demo, link You can see each category has an own 'View detials' button, and there is a side menu on the right side. What we want is when we click the "View details" butt…

From router v3.1.0, we have preloading system with router. PreloadAllModules After the init module loaded, router will preloading the rest module at the background. const indexRoute = {path: '', redirectTo: 'home', pathMatch: 'full'}; const fallbackR…

Index router as default router. import {RouterModule} from "@angular/router"; import {NotFoundComponent} from "./shared-components/not-found/not-found.component"; const indexRoute = {path: '', redirectTo: 'home', pathMatch: 'full'}; co…

Article import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/mergeMap'; import { Component, OnInit } from '@angular/core'; import { Router, NavigationEnd, ActivatedRoute } from '@angular/router'; import { Title…

The <base href=”/”/> you define will determine how all other assets you plan on loading treat their relative paths. While you’ll most often use / as your base href, it’s important to understand what’s going on in case you need to change how you’re h…

You can easily show the user which route they are on using Angular 2’s routerLinkActive. Whenever a route matches the routerLink defined on the element, then the routerLInkActive will add the class that you assign it to. See Doc app.component.ts: imp…

getActivatedRoutePath(r: ActivatedRoute) { return r.url .subscribe(p => this.curtPath = p[0].path)}…

今天我们要讲的是ng2的路由的第二部分,包括路由嵌套.路由生命周期等知识点. 例子 例子仍然是上节课的例子:…

今天我们要讲的是ng2的路由系统. 例子…

原文链接:https://www.infoq.com/articles/Angular2-TypeScript-High-Level-Overview 作者:  Yakov Fain Posted on  Apr 26, 2016 ------------------------------------------------------------------------------------------------------------------------------ Angular…

Angular Metadata 等基础知识 http://www.jianshu.com/p/aeb11061b82c Metadata告诉Angular如何处理一个类,只有我们将它通告给Angular,它才算一个组件.我们通过将metadata附属到类来告诉Angular HeroListComponent是一个组件.用TypeScript附加metadata的简单方法是使用一个decorator @Component({ selector 插入组件的标签名 templateUrl 组件模板…

1.新建项目 2.新建Model public class TodoItem { public int Id { get; set; } public string Key { get; set; } public string Name { get; set; } public bool IsComplete { get; set; } public string Desc { get; set; } } 3.数据访问接口 public interface ITodoRepository {…

Benefit to use child router is Angualr 2 then can lazy load the component on demand. Define a child router by adding three dots `/characters/...`: @RouteConfig([ { path: '/characters/...', name: 'Characters', component: CharactersComponent, useAsDefa…