angularJS的两种路由ng-router和ui-router的差异

原创

于 2019-05-17 09:47:33 发布 · 4.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #angular路由 #AngularJS

本文探讨AngularJS的两种路由方案ng-router和ui-router的差异。ng-router主要涉及配置路由、服务与指令，适合简单场景。而ui-router支持多视图和嵌套视图，提供更强大的路由管理能力。文章还介绍了单页应用（SPA）的路由原理，如hash和HTML5 History API，以及如何在HTML5模式下配置路由。

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【angularJS的两种路由ng-router和ui-router的差异】

大家好，我是IT修真院深圳分院第07期学员，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网 JS-06任务中可能会使用到的知识点：

1.背景介绍

angular路由

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。

说了那么多，那么，什么是路由呢？

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.1.109:8000/angular-program/src/main.html#/pagetable/page2
http://192.168.1.109:8000/angular-program/src/main.html#/pagetable/page3

当我们点击以上任一一个链接时，向服务器请求的地址都是http://192.168.1.109:8000/angular-program/src/main.html ，而＃号之后的内容在向服务器端请求时会被浏览器忽略掉，所以我们在客户端实现＃号后面的功能实现即可。简单来说，路由通过＃＋标记帮助我们区分不同逻辑页面，并将其绑定到对应的控制器上。

路由介绍

每个页面均有一个控制器控制，通过路由，从而将不同的页面展示出来。

二.知识剖析

ng-Route使用方法

1）引入 angular-route lib

无论是 ngRoute 还是 ui.router ，作为框架额外的附加功能，都必须以模块依赖的形式被引入,而且要注意，需要先引用angular,这是因为angular-router.js需要传入window.angular这个参数，这个参数只有在加载angular才会出现。

<script src="../../bower_components/angular/angular.js"></script>
<script src="lib/angular-route.js"></script>

2）配置路由

var app = angular.module('ngRouteApp', ['ngRoute']);
          app.config(function($routeProvider){
    $routeProvider
        .when('/Main', {
            templateUr