ngRoute (angular-route.js) 和 ui-router (angular-ui-router.js) 模块有什么不同呢?

很多文章中都有说道:当时ngRoute在路由配置时用$routeProvider,但是当ui-router路由配置时用 $stateProvider 和 $urlRouterProvider。

那么它们有什么不同呢?

1、ngroute是用AngularJS框架的核心部分。

2、ui-router是一个社区库,它是用来提高完善ngroute路由功能的。

那么我到底用哪个,或者说,哪个更适合可管理性和适合可扩展性?

ui-router路由器是一个第三方模块,功能非常强大。它支持一切正常ngroute也可以做许多额外的功能。

下边是常见的选择ui-router路由器的因素,而不用ngRoute。

  • UI-Router路由器允许嵌套视图(nested views)和多个命名视图(multiple named views)。这是非常有用的应用程序,你可能有较多的页面来继承其他部分。@camnpr
  • ui-router允许你有很强的类型之间的连接状态的基础上的状态名称。
      $stateProvider.state(state, {
          url: ‘/‘ + lastState,
          controller: ‘ctrl.‘ + state,
          templateUrl: ‘/views/‘ + path + ‘.html‘
       });

    通过构建ui-sref来实现不同的状态的链接到不同的页面(或者模板)

    <a ng-repeat="camnpr in group.items" ng-show="{{camnpr.show}}"ui-sref="{{camnpr.state}}">{{item.label}}</a>

    同时你的路由可以访问动态创建的链接

  • states允许你通过$statsParams来轻松的传递信息,允许不同的信息不同的states的map格式。

综上所述,angular-ui-router是一个功能更强大,更轻松配置项目的一个模块库,是ngRouter的升级版!

时间: 2024-10-25 11:44:09

ngRoute (angular-route.js) 和 ui-router (angular-ui-router.js) 模块有什么不同呢?的相关文章

angular route 与 django urls 冲突怎么解决?

app.js var app = angular.module('app', [ 'ngResource', 'ngRoute', // 'ui.bootstrap', // 'ngResource', 'student', ]); app.config( function( $locationProvider, $routeProvider ){ $locationProvider.html5Mode({ enabled:true }) $routeProvider. when("/"

【angular.js】UI-Router之angular路由学习

AngularJs中的路由,应用比较广泛,主要是允许我们通过不同的url访问不同的内容,可实现多视图的单页web应用.下面看看具体怎么使用. 关于路由 通常我们的URL形式为http://jtjds.cn/first/page,但在单页web应用中angularjs通过#+标记实现,比如下面的页面,将是下文中的路由列子. http://192.168.1.109:8000/angular-program/src/main.html#/pagetable/page1 http://192.168.

Atitit. js mvc 总结(2)----angular 跟 Knockout o99 最佳实践

Atitit. js mvc 总结(2)----angular  跟 Knockout o99 最佳实践 1. 框架 angular 跟Knockout 1 2. 2. 简单的列表绑定:Knockout 1 3. foreach绑定 3 4. Sumup:hesh angular simply 3 1. Mvc优点 angular 功能包括 3 2. 2.1 数据绑定 就是MVVM 结构, 3 3. 2.10 动画效果, ng-animate 4 5. 参考 5 1. 框架 angular 跟K

angular -- $route API翻译

$route -$routeProvider服务 -依赖ngRoute模块 $route能够在路径发生改变的时候,渲染不同的视图,调用不同的控制器.它监测了$location.url(),然后根据路径来匹配相应的路由,路由的定义方法详见$routeProvider的API. $route通常和$routeProvider服务和ngView指令一起使用 依赖: $location$routeParams 方法: reload() 在路由没有改变的时候,再次加载当前路径的路由,重新渲染ng-view

[从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)

前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应用. 需求 需求大概是这样的: 开一个新的 Angular 项目,并且一开始选择加入 Router 功能 根组件是 AppComponent ,然后下方有三个子组件分别是 page1 page2 page3 可以在 AppComponent 内点击连结切换到这三个页面 参考文档: 路由与导航 Rou

Kendo UI for Angular 2 控件

Kendo UI for Angular 2 控件 伴随着 Angular 2 的正式 release,Kendo UI for Angular 2 的第一批控件已经发布了,当前是 Beta 版本,免费使用. 官方站点:Kendo UI for Angular 2 Kendo UI for Angular 被打包成独立的多个 NPM package,在 Progress NPM 之下 ( https://registry.npm.telerik.com/ ), 要想访问它,你需要一个激活的 Te

集成 Kendo UI for Angular 2 控件

伴随着 Angular 2 的正式 release,Kendo UI for Angular 2 的第一批控件已经发布了,当前是 Beta 版本,免费使用. 官方站点:Kendo UI for Angular 2  Kendo UI for Angular 被打包成独立的多个 NPM package,在 Progress NPM 之下 ( https://registry.npm.telerik.com/ ), 要想访问它,你需要一个激活的 Telerik account , 如果你现在还没有这

Angular项目构建指南 - 不再为angular构建而犹豫不决(转)

如果你不知道什么是Angular或者根本没听说过,那么我接下来所说的对你来说毫无益处,不过如果你打算以后会接触Angular或者干脆要涨涨姿势~读下去还是有点用的. Angular和它之前所出现的其余前端框架最大的不同,在于它的核心不再是DOM,而是数据,是model.我们惯用的不管是单纯的jQuery还是MVC的Backbone,它们本质仍是让我们更方便更有条理的操作DOM,但是Angular不是.通过一系列魔术般的手法,它将一切的重心转移到数据上.以开发应用而不是操作节点的方式去开发Web,

angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构

ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入angular-resource.min.js文件 2.在模块中依赖ngResourece,在服务中注入$resource var HttpREST = angular.module('HttpREST',['ngResource']); HttpREST.factory('cardResource

AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别

AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就是由CSS渲染和JS来控制行为的组件.比较不好理解就是Web组件,好像跟JS插件意思差不多,都是CSS和JS组成的.它们到底区别在哪?我们重点来讲这个.我们通过学习如何调用Web组件(其中的手风琴组件)来一步一步了解其与JS插件的区别. 示例01.Web组件-直接使用 (请下载附件查看示例) 示例中