Angular2路由器VS ui-router-ng2 VS ngrx路由器

使用 ui-router-ng2而不是新的Angular2路由器有哪些优点和缺点？在过去，我使用ui-router与Angular 1.x而不是使用ngRoute，因为我需要更好的支持嵌套状态/路由。

那么现在，Angular2呢？我想听听你的意见，所以我可以评估两个机会。@H_404_2@

此外，在Google上搜索和搜索我发现ngrx/router，我不知道。
你能告诉我Angular2的内置路由器，Angular2和ngrx路由器的新ui路由器之间有什么区别？@H_404_2@

一般信息

NGRX路由器docs@H_404_2@

ngrx路由器已被弃用！从ngrx路由器到标准Angular2路由器有migration strategy。@H_404_2@

Angular2路由器docs@H_404_2@

> Angular团队的默认解决方案
>受到AngularJS的UI路由器的启发
>专为组件而设@H_404_2@

Angular2路由器几乎具有所有的UI路由器功能。@H_404_2@

NG2 UI-router docs@H_404_2@

来自AngularJS的知名UI路由器为Angular2更新。从众所周知的优势 – 使AngularJS UI路由器更新到ng2 UI路由器。@H_404_2@

对比@H_404_2@

我们来比较UI版本与Angular2路由器的两种语法。@H_404_2@

AngularJS UI路由器：@H_404_2@

app.config(function($stateProvider){
    $stateProvider.state('home',{
        url: '/home',templateUrl: 'home.html',controller: 'HomeCtrl'
    })
});

Angular2 UI路由器：@H_404_2@

export let state1: Ng2StateDeclaration = {
    name: 'home',component: HomeComponent,url: '/home'
}

@NgModule({
 imports: [
   SharedModule,UIRouterModule.forChild({ states: [home] })
 ],declarations: [HomeComponent]
})
export class MyModule {}

Angular2路由器@H_404_2@

import {
    RouteConfig,Route
} from 'angular2/router';
import {HomeComponent} from './components/home';

@Component({})
@RouteConfig([
    new Route({ 
        path: '/home',name: 'Home'
    })
])
export class App {...}

我们可以看到，一般来说，Angular2路由器几乎是一样的。另外还需要说，它支持大多数常见功能，如通过路由的静态/动态数据共享，嵌套视图等。@H_404_2@

>相同的位置策略(路径和哈希)
>类似的路线定义
>类似服务：@H_404_2@

> $ state.go和Router.navigate
> $ stateParams和RouteParams
> $ state.current.data和RouteData@H_404_2@

>类似的指令@H_404_2@

> ui-view和router-outlet
> ui-sref和routerLink@H_404_2@

结论@H_404_2@

Angular2路由器采用了最佳的UI路由器体验并实现了它。如果您需要轻松地将AngularJS UI路由器的代码库迁移到Angular2，您可以尝试使用Ng2 UI路由器，否则我认为Angular2路由器最适合。即使您决定使用NG2 UI路由器，请检查所有优缺点，目前我觉得社区将会从Angular团队中选择一个标准的解决方案，这意味着更好的支持。@H_404_2@

原文链接：https://www.f2er.com/angularjs/144701.html

Angular2路由器VS ui-router-ng2 VS ngrx路由器

猜你在找的Angularjs相关文章