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

前端之家收集整理的这篇文章主要介绍了Angular2路由器VS ui-router-ng2 VS ngrx路由器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用 ui-router-ng2而不是新的Angular2路由器有哪些优点和缺点?在过去,我使用ui-router与Angular 1.x而不是使用ngRoute,因为我需要更好的支持嵌套状态/路由。

那么现在,Angular2呢?我想听听你的意见,所以我可以评估两个机会。

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

一般信息

NGRX路由器docs

ngrx路由器已被弃用!从ngrx路由器到标准Angular2路由器有migration strategy

Angular2路由器docs

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

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

NG2 UI-router docs

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

对比

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

AngularJS UI路由器:

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

Angular2 UI路由器:

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

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

Angular2路由器

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

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

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

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

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

>类似的指令

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

结论

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

猜你在找的Angularjs相关文章