（13）AngularJS 1.X 之ngRoute插件

最新推荐文章于 2020-07-07 07:01:00 发布

GISer.Wang

最新推荐文章于 2020-07-07 07:01:00 发布

阅读量806

点赞数 2

分类专栏： angularjs1.X 文章标签： angularjs

本文链接：https://blog.csdn.net/LoveCarpenter/article/details/54882862

版权

angularjs1.X 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

引言
路由控制页面的跳转
- 1 主页面控制页面的跳转在页面后面添加div1
- 2 页面替换自身位置借助location服务在页面后面添加div1
路由跳转传递参数
路由事件
- 1 代码实现
- 2 结果分析

1.引言

AngularJS路由功能是一个纯前端的解决方案，与我们熟悉的后台路由不太一样。后台路由：通过不同的 URL 会路由到不同的控制器上(controller)，再渲染(render)到页面(HTML)。AngularJS 的前端路由：需要提前对指定的(ng-app)，定义路由规则(routeProvider)，然后通过不同的 URL，告诉(ng-app)加载哪个页面(HTML)，再渲染到视图(ng-view)中。

AngularJS 的前端路由虽然 URL 输入不一样，页面展示不一样，其实完成的就是单页视图(ng-view)的局部刷新。

AngularJS路由的实现主要设计几个方面：

ng-view指令决定数据显示的位置
使用$routeProvider供应商设置路由的配置
$routeParams用于接受路由的参数
路由的事件：$routeChangeStart,$routeChangeSuccess,$routeChangeError

接下来我们就来看一下上面说的几个方面

2.路由控制页面的跳转

关于页面的跳转主要介绍两个方面：

第一种类型的跳转（主页面加载页面1，然后主页面重新加载页面2）

这里写图片描述

第二种类型的跳转（主页面加载页面1，然后页面1中跳转到页面2）

这里写图片描述

2.1 主页面控制页面的跳转（在页面后面添加`#!div1`）

首先加载angularjs函数库

<script src="js/angular.js"></script>

加载路由插件

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

设置angular作用域

<html ng-app="myApp">
<head>
    <script src="js/angular.js"></script>
    <script src="js/angular-route.js"></script>
    <meta charset="utf-8">
    </head>
<body>
</body>
</html>

配置我们的路由供应商

var app = angular.module('myApp',['ngRoute']);
        app.config(['$routeProvider',function($routeProvider){
            $routeProvider
                    .when('/div1',{
                        templateUrl : "./div1.html",
                        controller : 'div1Controller'
                    })
                    .when('/div2',{
                        templateUrl : "./div2.html",
                        controller : 'div2Controller'
                    })
                    .otherwise({
                        redirectTo : '/index.html'
                    });
        }]);

修改我们的控制器

app.controller('div1Controller', function($scope) {
            $scope.name="第一个页面";
        });
        app.controller('div2Controller', function($scope) {
            $scope.name="第二个页面";
        });
        app.controller('MainCtrl', function($scope,$location) {
            $scope.changUrl1= function () {
                $location.path("/div1");
            }
            $scope.changUrl2= function () {
                $location.path("/div2");
            }
        });

编写我们的主页面（路由会自动查找ng-view指令）

<div ng-controller="MainCtrl">
        <button ng-click="changUrl1()">跳转到第一个页面</button>
        <button ng-click="changUrl2()">跳转到第二个页面</button>
    </div>
<div ng-view></div>

编写div1页面（下面是div1页面全部内容）

{{name}}

编写div2页面（下面是div2页面全部内容）

{{name}}

运行结果

这里写图片描述

2.2 页面替换自身位置（借助`$location`服务，在页面后面添加`#!div1`）

接下来我们看一下，代码是如何实现的。

引入AngularJS函数库（略）
引入路由插件（略）
设置AngularJS作用域（略）
配置路由供应商

        var app = angular.module('myApp',['ngRoute']);
        app.config(['$routeProvider',function($routeProvider){
            $routeProvider
                    .when('/div1',{
                        templateUrl : "div1.html",
                        controller : 'div1Controller'
                    })
                    .when('/div2',{
                        templateUrl : "div2.html",
                        controller : 'div2Controller'
                    })
                    .otherwise({
                        redirectTo : '/index.html'
                    });
        }]);

设置我们的控制器

        app.controller('div1Controller', function($scope,$location) {
            $scope.changUrl= function () {
                $location.path("/div2");
            }
        });
        app.controller('div2Controller', function($scope) {
            $scope.name="第二个页面";
        });
        app.controller('MainCtrl', function($scope,$location) {
            $scope.changUrl= function () {
                $location.path("/div1");
            }
        });

设置我们主页面（路由会自动查找ng-view指令）（主页面的部分内容）

    <div ng-controller="MainCtrl">
        <button ng-click="changUrl()">跳转到第一个页面</button>
    </div>
    <div ng-view></div>

div1页面（下面是div1页面全部内容）

<button ng-click="changUrl();">改变页面</button>
第一个页面

div2页面（仅仅只有一个表达式）

{{name}}

3.路由跳转传递参数

在页面跳转的时候如果我们想要传递参数应该如何传递呢？在这里我们就来实现一下。

定义我们的路由（注意：路由中有一个参数id）

        var app = angular.module('myApp',['ngRoute']);
        app.config(['$routeProvider',function($routeProvider){
            $routeProvider
                    .when('/div1/:id',{
                        templateUrl : "./div1.html",
                        controller : 'div1Controller'
                    })
                    .otherwise({
                        redirectTo : '/index.html'
                    });
        }]);

当我们跳转的时候，传递参数，比如下面的代码

        app.controller('MainCtrl', function($scope,$location) {
            $scope.changUrl= function () {
                //在这里传递参数id=10
                $location.path("/div1/10")
            }
        });

在div1Controller获取到参数（通过$routeParams参数）

        app.controller('div1Controller', function($routeParams) {
            alert($routeParams.id)
        });

运行结果

这里写图片描述

上面我们只是传递一个参数。如果传递多个参数原理也是一样的，我们看下面的代码

        app.config(['$routeProvider',function($routeProvider){
            $routeProvider
                    .when('/div1/:content/:id',{
                        templateUrl : "./div1.html",
                        controller : 'div1Controller'
                    })
                    .otherwise({
                        redirectTo : '/index.html'
                    });
        }]);

跳转页面

        app.controller('MainCtrl', function($scope,$location) {
            $scope.changUrl= function () {
                //在这里传递参数content=10,id=20
                $location.path("/div1/10/20")
            }
        });

接受参数

        app.controller('div1Controller', function($routeParams) {
            alert($routeParams.id+":"+$routeParams.content)
        });

运行结果

这里写图片描述

4.路由事件

在我们路由跳转时是有事件的，分别为：$routeChangeStart,$routeChangeSuccess,$routeChangeError，我们可以给$rootScope绑定全局的路由事件的处理函数，全局的事件绑定我们可以通过run方法来绑定，接下来我们就来看一下代码的实现。

4.1 代码实现

通过run配置路径事件

var app = angular.module('myApp',['ngRoute']);
        app.run(function ($rootScope) {
            $rootScope.$on('$routeChangeStart',function(event,current,pre)
            {
                console.log("$routeChangeStart")
                console.log(event);
                console.log(current);
                console.log(pre);
            });
            $rootScope.$on('$routeChangeSuccess',function(event,current,pre)
            {
                console.log("$routeChangeSuccess")
                console.log(event);
                console.log(current);
                console.log(pre);
            });
        })

配置我们的路由

app.config(['$routeProvider',function($routeProvider){
            $routeProvider
                    .when('/div1',{
                        templateUrl : "./div1.html",
                        controller : 'div1Controller'
                    })
                    .otherwise({
                        redirectTo : '/index.html'
                    });
        }]);

编写我们的控制器

        app.controller('MainCtrl', function($scope,$location) {
            $scope.changUrl= function () {
                //在这里传递参数id=10
                $location.path("/div1")
            }
        });
        app.controller('div1Controller', function($routeParams) {
            console.log("div1Controller")
        });

编写我们的html页面

    <div ng-controller="MainCtrl">
        <button ng-click="changUrl()">跳转页面</button>
    </div>
    <div ng-view></div>

点击页面运行结果

这里写图片描述

4.2 结果分析

通过上面的运行结果，我们可以知道：

事件和控制器的运行熟悉：$routeChangeStart，然后$routeChangeSuccess，最后运行div1Controller。
当我们触发路由的回调函数时，回调函数中有三个参数，这三个参数带有我们的路由信息。

GISer.Wang

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
（13）AngularJS 1.X 之ngRoute插件

引言路由控制页面的跳转1 主页面控制页面的跳转2 页面替换自身位置借助location服务路由跳转传递参数路由事件1 代码实现2 结果分析1.引言 AngularJS路由功能是一个纯前端的解决方案，与我们熟悉的后台路由不太一样。后台路由：通过不同的 URL 会路由到不同的控制器上(controller)，再渲染(render)到页面(HTML)。AngularJS 的前端路
复制链接

扫一扫