AngularJS的内置服务与路由

最新推荐文章于 2024-05-08 09:50:52 发布

君墨殇

最新推荐文章于 2024-05-08 09:50:52 发布

阅读量1.7k

点赞数

分类专栏： AngularJS框架内置服务路由文章标签： angularjs http服务路由

本文链接：https://blog.csdn.net/wxy_jianling/article/details/71090261

版权

AngularJS框架同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

内置服务

1 篇文章 0 订阅

订阅专栏

路由

1 篇文章 0 订阅

订阅专栏

AngularJS中提供了很多的内置服务，通过这些内置服务就可以快捷的进行一些业务功能流程的自动处理了。通过依赖注入的方式在组件、控制器、自定义指令、run()函数等等中使用。常见的内置服务：

(1)$window用于注入原生JS中的window对象；

(2)$document用于注入原生JS中的document文档对象；

(3)$timeout用于注入封装的原生JS中的setTimeout()函数处理过程;

(4)$interval用于注入封装的原生JS中的setInterval()函数处理过程;

(5)$location用于注入原生JS中的location对象方便对于URL地址等操作;

(6)$http用于注入封装的Ajax操作进行异步数据请求等等。

$http()内置服务：

1、$http服务是什么？

$http服务是AngularJS的核心服务之一，这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式来完成远程服务的数据请求。$http 是一个特殊的内置服务，主要用于进行异步数据请求的功能实现。

2、常见的语法结构：

$http({

method:"GET",/*请求发送方式*/

url:”http://......../com” /*请求地址*/

}).then(/*then()函数表示请求完成之后的操作*/

function(response){

/*请求成功之后的操作函数*/

function(response){

/*请求失败时候的操作函数*/

}

);

3、AngularJS为了方便开发人员进行快捷的异步数据请求的处理，提供了一系列的快捷函数方便开发，主要由如下的函数：

(1)$http.get();

(2)$http.post();

(3)$http.jsonp();

(4)$http.header();

(5)$http.patch();

(6)$http.put();

(7)$http.delete()

$http.get("url").then(fn1,fn2);

其实快捷方式，就是简单的封装了$http服务，常规项目开发时，使用较多的是原始的内置服务$http的$http({}).then(fn1, fn2)函数进行异步数据处理。

4、案列

(1)写一个简单的$http服务异步获取数据：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
    <ul>
        <li ng-repeat="g in goodsList">
            <span ng-bind="g.classID"></span>*****
            <span ng-bind="g.className"></span>
        </li>
    </ul>
</div>
<script>
    var app = angular.module("myApp", []);

    app.controller("myCtrl", ["$scope", "$http",
        function ($scope, $http) {

            $scope.goodsList = [];//保存所有商品的数组

            // 异步请求获取数据
            $http({
                method:"GET",
                url:"http://datainfo.duapp.com/shopdata/getclass.php"
            }).then(
                function success(resp){
                    console.log(resp);
                    $scope.goodsList = resp.data;
                },
                function error(resp){
                    console.log("errorLLLLLL" + resp);
                }
            );

        }]);
</script>
</body>
</html>

(2)写一个$http服务实现简易登录功能：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<div class="form" ng-controller="login">
    账号：<input type="text" ng-model="username"><br />
    密码：<input type="text" ng-model="password"><br />
    <button ng-click="loginFn()">登录</button>
</div>
<script>
    var app = angular.module("myApp", []);

    app.controller("login", ["$scope", "$http",
        function($scope, $http) {

            $scope.loginFn = function() {
                // 实现登录
                $http({
                    method:"GET",
                    url:"http://datainfo.duapp.com/shopdata/userinfo.php",
                    params:{status:"login",userID:$scope.username, password:$scope.password}
                   
                }).then(
                    function success(resp) {
                        console.log("请求成功", resp);
                        if(resp.data instanceof Object) {
                            console.log("登录成功，跳转到首页");
                        } else {
                            console.log("登录失败");
                        }
                    },
                    function error(resp){
                        console.log("请求失败");
                    }
                );
            }
    }]);
</script>
</body>
</html>

如果是get请求，请使用params来传递参数；如果是Post请求，请使用data来尝试传递参数。

2、一个完整的$http内部服务的登录界面的异步数据请求：

<!DOCTYPE html>
<html ng-app="login">
<head>
    <meta charset="UTF-8">
    <title>系统登录页面</title>
    <script src="js/lib/AngularJS/angular.min.js"></script>
    <link rel="stylesheet"
          href="js/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="page-header">
            <h2>会员登录</h2>
        </div>
    </div>
    <div class="row" ng-controller="loginBox">
        <div class="col-md-8 md-col-offset-2">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="username"
                           class="col-sm-2 control-label">账号</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="username"
                               ng-model="username" placeholder="请输入账号">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password"
                           class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control"
                               id="password" ng-model="password"
                               placeholder="请输入密码">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-danger" ng-click="login()">

登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    /* 定义模块 */
    var _login = angular.module("login", []);
    /* 定义控制器 */
    _login.controller("loginBox", ["$scope", "loginService",
        function ($scope, loginService) {
            $scope.username = "";
            $scope.password = "";
            $scope.login = function() {
                console.log("login函数被调用了...", loginService);
                loginService.loginFn($scope.username, $scope.password);

            }
        }]);

    /* 定义处理功能的自定义服务 */
    _login.service("loginService", function ($http) {
        /*res为false表示登录失败,res为true表示登录成功*/
        var _res = {res: "false"};

        _res.loginFn = function(un, pw) {
            console.log("用户要登录了.....", un, pw);
            $http({
                method:"GET",
                url:"http://datainfo.duapp.com/shopdata/userinfo.php",
                params:{status:"login",userID:un,password:pw}
                /*data:{status:"login",userID:un,password:pw}
            }).then(function(resp) {
                    console.log(resp);
                    if(resp.data) {
                        _res.res = true;
                    } else {
                        _res.res = false;
                    }
                },function(resp) {
                    console.log(resp);
                    _res.res = false;
                });
        }

        return _res;
    });
</script>
</body>
</html>

AngularJS中的路由<ng-router&ui-router>

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

什么是路由？

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

扩展：

单页面应用，也称为SPA，是singleton page application的缩写。

单页面应用：程序在执行的过程中，我们不论访问任何链接，都会在同一个页面中展示数据。在整个项目执行过程中，客户看到的都是唯一的一个页面，不同的是~在整个页面中，会根据用户请求的内容的不同，动态的更新页面中的某一个部分的数据，在这样的模式下，项目运行只需要一个基础的页面即可，其他的都是模板。模板就是用于在这个基础页面中更新的数据。

SPA应用中，单页面中就会出现多个独立的控制器

多个独立控制器之间的数据共享：

方式一：使用$rootScope来进行数据共享;

方式二：使用自定义服务进行数据的传递。

自定义服务主要的使用场景：用来进行不同控制器之间的数据共享和传递。

<ng-router>ng路由：

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

路由指令:ng-view

描述：

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

指令概述：

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

语法：

<ng-view [οnlοad=”string”] [autoscroll]=”string”></ng-view>

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

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

事件：

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

路由提供者:$routeProvider

描述：

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

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

主要方法：

when(path, route);用于在访问path路径时，跳转到route指定的视图

|-- path：路由跳转的路径

|-- route：路由对象<组件对象>，一个JSON对象

otherwise(params);用于在访问不存在的路径时，跳转的默认路径或者视图

|-- params：指定路径或者路由对象

内置服务<路由服务>:$route & $routeParams

$route服务被用于进行深层超链接信息的描述，它会监听$location.url()地址并进行url地址和指定的路由视图之间的映射关系。

$routeParams服务允许开发人员可以进行路由中参数的处理。

案列：

写一个简单路由：

<!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>
<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"]);

   
    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>

<!-- 在Angular1.5之前，锚链接跳转，使用#/开头即可 -->
<!-- 在Angular1.5开始，锚链接跳转，使用#!/开头即可 -->

app.config()函数主要用于进行《配置信息》的添加。

写一个简单的单页面应用：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>系统单页面</title>
    <link rel="stylesheet" href="../js/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <!-- 引入核心框架文件 -->
    <script src="../js/lib/AngularJS/angular.min.js"></script>
    <!-- 引入Angular路由模块文件 -->
    <script src="../js/lib/AngularJS/angular-route.js"></script>
</head>
<body>
<ul>
    <li><a href="#!/">首页</a></li>
    <li><a href="#!/login">登录</a></li>
    <li><a href="#!/regist">注册</a></li>
    <li><a href="#!/shopcart">购物车</a></li>
    <!--<li><a href="#!/shopcart">退出</a></li>-->
</ul>
<!-- 指定显示模板的位置 -->
<div ng-view></div>

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

    app.config(["$routeProvider", function($routeProvider) {
        $routeProvider
            .when("/", {
                templateUrl:"template/main.html",
                controller:function($rootScope,$scope) {
                    $scope.user = $rootScope.user;
                }
            }).when("/login", {
                templateUrl:"template/login.html",
                controller:function($scope, $http, $location,$rootScope) {
                    $scope.loginFn = function() {
                        $http({
                            method:"GET",
                            url:"http://datainfo.duapp.com/shopdata/userinfo.php",
                            params:{
                                status:"login",
                                userID:$scope.username,
                                password:$scope.password
                            }
                        }).then(
                            function(resp) {
                                console.log("请求成功");
                                if(resp.data instanceof Object) {
                                    console.log("登录成功,跳转到首页");
                                    $rootScope.user = resp.data;
                                    $location.path("/");
                                } else {
                                    console.log("账号或者密码有误");
                                }
                            },
                            function(resp) {
                                console.log("请求失败[系统繁忙，请稍后再试]");
                            }
                        );
                    }
                }
            }).when("/regist", {
                templateUrl:"template/regist.html"
            }).when("/shopcart", {
                templateUrl:"template/shopcart.html"
            }).otherwise("/");
    }]);
    app.run(["$rootScope", function($rootScope) {
        $rootScope.user = {userID:"游客"}
    }]);
</script>
</body>
</html>

路由参数传递：
代码：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>系统单页面</title>
    <link rel="stylesheet" href="../js/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <!-- 引入核心框架文件 -->
    <script src="../js/lib/AngularJS/angular.min.js"></script>
    <!-- 引入Angular路由模块文件 -->
    <script src="../js/lib/AngularJS/angular-route.js"></script>
</head>
<body>
<ul>
    <li><a href="#!/">首页</a></li>
    <li><a href="#!/shopcart/xiangle">购物车</a></li>
</ul>
<!-- 指定显示模板的位置 -->
<div ng-view></div>

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

    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>
</body>
</html>


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

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

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

    Angular路由中，通过 :参数名称 的方式进行数据传递
    获取路由地址中的参数，通过$routeParams服务来获取参数数据


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

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

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

    Angular路由中，通过 :参数名称 的方式进行数据传递
    获取路由地址中的参数，通过$routeParams服务来获取参数数据

君墨殇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
AngularJS的内置服务与路由

AngularJS中提供了很多的内置服务，通过这些内置服务就可以快捷的进行一些业务功能流程的自动处理了。通过依赖注入的方式在组件、控制器、自定义指令、run()函数等等中使用。常见的内置服务：(1)$window用于注入原生JS中的window对象；(2)$document用于注入原生JS中的document文档对象；(3)$timeout用于注入封装的原生JS中的setTimeou
复制链接

扫一扫