AngularJs route ng路由单页面应用（下）

最新推荐文章于 2020-12-20 12:02:05 发布

原创最新推荐文章于 2020-12-20 12:02:05 发布 · 1.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

AngularJS ng路由应用

上回说道，ng路由的基本概念，基本了解了ng路由是做什么用的，这一回我们说一下ng路由的指令，语法，还有一些描述，用一个小案例来详细为大家讲解一下ng路由的实际用途。

ng路由：

ng路由是AngularJS官方提供的一种简单的路由操作。

ng路由主要分三个组成部分：路由指令、路由服务、路由服务提供者。

语法：

<ng-view [onload=”string”] [autoscroll]=”string”></ng-view>

onload:当视图发生改变时执行属性值中的表达式

autoscroll:当视图发生改变时自动触发$anchorScroll事件

事件：

路由视图一旦加载时，就会自动触发$viewContentLoaded事件

描述：

内置服务对象$routeProvider主要用于进行路由配置

该服务的使用必须依赖ngRoute模块，也就是项目中必须添加animate-route.js

路由指令:ng-view

描述：

ngView指令主要用于将路由指向的页面渲染到当前页面的布局中。

指令概述：

指令会创建自己独立的作用域。

我们先来看一下路由的工作流程：

大致了解一下操作的流程，我们来做一个实际案例，为大家演示一下路由的正确用法：

首先我们来引入所需要的文件：

    <!-- 引入核心框架文件 -->
    <script src="../js/lib/AngularJS/angular.min.js"></script>
    <!-- 引入Angular路由模块文件 -->
    <script src="../js/lib/AngularJS/angular-route.js"></script>

接下来，我们创建两个锚点，用于路由的传递：

<ul>
    <li><a href="#!/">首页</a></li>
    <li><a href="#!/shopcart/xiangle">购物车</a></li>
</ul>

在body里指定一个显示路由传递的页面的一个模块：

<!-- 指定显示模板的位置 -->
<div ng-view></div>

接下来就是AngularJS路由的操作：

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

    /*
    在不同的路由模板页面之间进行跳转时
    就不可避免的设计到不同页面模板互相传递参数的问题

    在Angular的路由中，通过URL地址进行参数的传递
    如：要查看某用户的购物车商品，就必须传递用户账号作为查询的参数
    http://www.mytaobao.com/ab/qu/#!/shopcart/xxx :查询账号为xxx的购物车商品
    http://www.mytaobao.com/ab/qu/#!/shopcart/yyy:查询账号为yyy的购物车商品

    将参数作为URL的一部分进行数据传递的方式，称为RESTful风格

    Angular路由中，通过 :参数名称 的方式进行数据传递
    获取路由地址中的参数，通过$routeParams服务来获取参数数据
     */
    app.config(["$routeProvider", function($routeProvider) {
        $routeProvider
            .when("/", {
                templateUrl:"template/main.html",
                controller:function($rootScope,$scope) {
                    $scope.user = $rootScope.user;
                }
            }).when("/shopcart/:userID", {
                templateUrl:"template/shopcart.html",
                controller:function($routeParams) {
                    /*获取路由中传递的参数数据*/
                    console.log($routeParams.userID);
                    /*获取到参数，进行后续的操作*/
                }
            }).otherwise("/");
    }]);

</script>

其实AngularJS的ng路由，类似与js中的选项卡，table切换效果，都是在同一页面上点击锚点展示不同的页面，使用起来也非常的方便，系统资源也不会被过多的占用。

希望今天的案例可以帮助到大家~

标签