Angular学习-ng-route与ui-router路由的区别

什么是路由?

路由是AngularJS构建单页面应用的基础。


路由,就是网络数据或者请求进行分发的一个网络组件。
路由就是一个用于请求URL分发和跳转的一个应用组件,Angular中通过$routeProvider路由服务提供者进行核心的配置处理。

ng路由

ng 路由是 AngularJS 官方提供的一种简单的路由操作。 
ng 路由主要分三个组成部分:路由指令、路由服务、路由服务提供者 


$when ****************  $state         路由状态配置的区别           

$routeParams ******** $stateParams      带参数的时候的配置区别

$routeProvider ********  $stateProvider             依赖注入的模块的区别

<div ng-view></div>******** <div ui-view></div>     页面中绑定的指令的区别

此外 ng是官方提供的,而ui是第三方提供的,适合项目中涉及大量嵌套模块时去使用,功能非常强大,它支持一切正常ng-route也可以做许多额外的功能。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>系统单页面</title>
    <!-- 引入核心框架文件 -->
    <script src="../js/lib/AngularJS/angular.min.js"></script>
    <!-- 引入Angular路由模块文件 -->
    <script src="../js/lib/AngularJS/angular-route.js"></script>
</head>
<body>
<!-- 在Angular1.5之前,锚链接跳转,使用#/开头即可 -->
<!-- 在Angular1.5开始,锚链接跳转,使用#!/开头即可 -->
<ul>
    <li><a href="#!/">首页</a></li>
    <li><a href="#!/login">登录</a></li>
    <li><a href="#!/regist">注册</a></li>
    <li><a href="#!/shopcart">购物车</a></li>
</ul>
<!-- 指定显示模板的位置 -->
<div ng-view></div>

<script>
    var app = angular.module("myApp", ["ngRoute"]);

    /*
    route:路由
    provider:提供者
    $routeProvider:AngularJS提供的用于进行路由配置的内置服务

     app.config()函数主要用于进行《配置信息》的添加
     */
    app.config(["$routeProvider", function($routeProvider) {
        $routeProvider
            .when("/", {
                templateUrl:"template/main.html"
            }).when("/login", {
                templateUrl:"template/login.html"
            }).when("/regist", {
                templateUrl:"template/regist.html"
            }).when("/shopcart", {
                templateUrl:"template/shopcart.html"
            }).otherwise("/");
    }]);
</script>
</body>
</html>

如果觉得我的文章对您有用,请顶一下。您的支持将鼓励我继续创作!


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值