AngularJs基础——常用服务

最新推荐文章于 2019-04-09 20:59:44 发布

bboyjoe

最新推荐文章于 2019-04-09 20:59:44 发布

阅读量1.7k

点赞数

分类专栏： AngularJS 文章标签： angularjs service

本文链接：https://blog.csdn.net/bboyjoe/article/details/50467013

版权

AngularJS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

$http服务：get/post/jsonp;

$location服务解析地址栏中的URL(基于window.location)，让你在应用代码中能获取到。

改变地址栏中的URL会反应在$location服务中，反之亦然。

$location服务：

1）暴露当前地址栏的URL,这样你就能获取并监听URL、改变URL；

2）当出现以下情况时同步URL：改变地址栏、点击了后退按钮(或者点击了历史链接)、点击了一个链接；

3）一系列方法来获取URL对象的具体内容(protocol、host、port、path、search、hash) .formatDate

当浏览器的URL改变时，不会重新加载整个页面。如果想要重新加载整个页面，需要使用$window.location.href。、

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Angular基础</title>
    <style>
        #div1,#div2,#div3{
            height: 600px;
        }
        #div1{
            background-color: red;
        }
        #div2{
            background-color: green;
        }
        #div3{
            margin-top:2000px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="firstCtrl">
        {{name}}
        {{age}}
        {{filteredText}}
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </div>

</div>
<script src="angular.min.js"></script>
<script type="application/javascript">
    var myApp=angular.module('myApp',[]);

    myApp.service('serviceService01',function($http,$rootScope,$log,$filter){
        this.getData=function(){
            var myUrl ="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSON_CALLBACK";
            return $http.jsonp(myUrl,{cache:true});//设置cache为true可在下次请求时直接从缓存中获取
        };
        $rootScope.age=50;
        $log.warn("警告");
        $rootScope.filteredText = $filter('uppercase')("zhangsan");
    });
    myApp.controller('firstCtrl',['$scope','serviceService01','$location','$anchorScroll',function($scope,serviceService01,$location,$anchorScroll){
        serviceService01.getData().success(function(data){
            console.log(data);
        }).error(function(err){
            //错误代码
            alert("失败");
        });
        $scope.name="张三丰";
        console.log($location.absUrl());
        //$location.hash('hello');
        //$location.path('/new');//有历史管理的功能
        //清除历史管理
        //$location.path('/new').replace();
        //$location.search({'age':20});
        $location.hash('div3');
        $anchorScroll();
    }]);


</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Angular基础</title>
    <style>
        #parent div{ width:300px; height:500px; border:1px #000 solid; margin:20px;}
        #parent ul{ width:200px; position:fixed; top:0; right:0;}
    </style>
</head>
<body>
<div ng-app="myApp">
    <div id="parent" ng-controller="firstCtrl">
        <ul>
            <li ng-repeat="id in [1,2,3,4,5]" ng-click="changeDiv('div'+id)">{{id}}aaaaaaaaaa</li>
        </ul>
        <div ng-repeat="id in [1,2,3,4,5]" ng-attr-id="div{{id}}">{{id}}</div>
    </div>


</div>
<script src="angular.min.js"></script>
<script type="application/javascript">
    var myApp=angular.module('myApp',[]);

    myApp.controller('firstCtrl',['$scope','$location','$anchorScroll',function($scope,$location,$anchorScroll){
        $scope.changeDiv=function(div){
            $location.hash(div);
        }
        $anchorScroll();
    }]);


</script>
</body>
</html>

$cacheFactory服务：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Angular基础</title>
</head>
<body>
<div ng-app="myApp">
    <div  ng-controller="firstCtrl"></div>
    <div  ng-controller="secondCtrl"></div>


</div>
<script src="angular.min.js"></script>
<script type="application/javascript">
    var myApp=angular.module('myApp',[]);

    myApp.controller('firstCtrl',['$scope','$cacheFactory',function($scope,$cacheFactory){
        var cache=$cacheFactory('cacheId');
        cache.put('name','张三');
        cache.put('age',20);
//        var name=cache.get('name');
//        console.log(name);
    }]);

    myApp.controller('secondCtrl',['$scope','$cacheFactory',function($scope,$cacheFactory){
        //主要用于控制器间传输数据
        var cache=$cacheFactory.get('cacheId');
        var name=cache.get('name');
        var age=cache.get('age');
        console.log(name);
        console.log(age);
    }]);


</script>
</body>
</html>

$timeout服务、$interval服务；

$sce服务：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="angular.min.js"></script>

</head>
<body>
<div ng-app="myApp">

    <div ng-controller="firstController">
        {{name}}

        <div ng-bind-html="text"></div>



        <div ng-bind-html="detailContent()"></div>

1111111111
        <div ng-bind-html="portalDetail"></div>


    </div>
</div>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller('firstController',function($scope,$timeout,$sce,$http){
        $scope.name = 'hello';
        $scope.text = $sce.trustAsHtml('<h1>hello text</h1>');

        var myUrl = "http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=338&callback=JSON_CALLBACK";
        $http.jsonp(myUrl).success(
                function(data){
                    $scope.portalDetail = $sce.trustAsHtml(data.result[0].content);
                    $scope.detailContent = function() {
                        return $sce.trustAsHtml(data.result[0].content);
                    };
                }
        ).error(function(){
                    alert('失败');
        });
    });


</script>

</body>
</html>