$ routeProvider和$ stateProvider有什么区别?

2020/10/23 06:41 · javascript ·  · 0评论

请解释AngularJS$routeProvider之间的区别$stateProvider

哪个是最佳做法?

两者的功能与SPA(单页应用程序)中用于路由目的的功能相同。

1.角路由-每个$ routeProvider文档

控制器和视图的URL(HTML局部)。它监视$ location.url()并尝试将路径映射到现有的路由定义。

的HTML

<div ng-view></div>

上面的标签将从$routeProvider.when()您在.config(配置阶段)中提到条件渲染模板

局限性:

  • 该页面只能包含一个ng-view页面
  • 如果您的SPA在某些情况下要在页面上显示多个小组件,则$routeProvider失败。(实现这一目标,我们需要使用指令一样ng-includeng-switchng-ifng-show,这看起来不错,让他们在SPA)
  • 您不能在两条路线之间建立联系,例如父子关系。
  • 您不能基于URL模式显示和隐藏视图的一部分。

2. ui- router-每个$ stateProvider文档

AngularUI Router是AngularJS的路由框架,它允许您将接口的各个部分组织到状态机中。UI-Router是围绕状态组织的,状态可以有选择地附加有路由以及其他行为。

多个视图和命名视图

另一个重要功能是能够在模板中具有多个ui视图。

虽然多个并行视图是一个强大的功能,但是您通常可以通过嵌套views并将这些视图与嵌套状态配对来更有效地管理接口

的HTML

<div ui-view>
    <div ui-view='header'></div>
    <div ui-view='content'></div>
    <div ui-view='footer'></div>
</div>

的大部分ui-router功能是它可以管理嵌套状态和视图。

优点

  • 您可以ui-view在一个页面上有多个
  • 各种视图可以相互嵌套,并可以通过在路由阶段定义状态来维护。
  • 我们可以在这里具有子级和父级关系,就像在状态中继承一样,也可以定义同级状态。
  • 您可以ui-view="some"仅通过使用@带有状态名称的绝对路由来更改状态。
  • 进行相对路由的另一种方法是仅@使用change ui-view="some"这将代替ui-view而不是检查是否嵌套。
  • 在这里,您可以根据状态提到的内容动态ui-sref创建hrefURL URL,也可以使用json格式指定状态参数

有关更多信息Angular ui-router

为了更好地处理带有状态的各种嵌套视图,我希望您能使用 ui-router

Angular自己的ng-RouterURLs在路由时要考虑在内,UI-Routerstates除了URL外。

状态绑定到命名视图,嵌套视图和并行视图,从而使您可以有效地管理应用程序的界面。

在ng-router中,通过<a href="">标记提供链接时,必须非常注意URL ,在UI-Router中,您必须state谨记。您提供的链接如<a ui-sref="">请注意,即使您<a href="">在UI-Router中使用,就像在ng-router中一样,它仍然可以工作。

因此,即使您决定某天更改URL,您的URLstate仍将保持不变,并且只需要在处更改URL .config

尽管可以使用ngRouter制作简单的应用程序,但UI-Router可以使复杂的应用程序的开发更加轻松。这里是它的维基。

$ route:用于将URL深度链接到控制器和视图(HTML局部),并监视$ location.url()以便从现有路由定义中映射路径。

当我们使用ngRoute时,使用$ routeProvider配置路由,而当使用ui-router时,使用$ stateProvider和$ urlRouterProvider配置路由。

<div ng-view></div>
    $routeProvider
        .when('/contact/', {
            templateUrl: 'app/views/core/contact/contact.html',
            controller: 'ContactCtrl'
        });


<div ui-view>
    <div ui-view='abc'></div>
    <div ui-view='abc'></div>
   </div>
    $stateProvider
        .state("contact", {
            url: "/contact/",
            templateUrl: '/app/Aisel/Contact/views/contact.html',
            controller: 'ContactCtrl'
        });
本文地址:http://javascript.askforanswer.com/routeproviderhe-stateprovideryoushenmequbie.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!