AngularJS的供应商--config

最新推荐文章于 2020-12-01 14:31:16 发布

xyphf_和派孔明

最新推荐文章于 2020-12-01 14:31:16 发布

阅读量2.3k

点赞数

分类专栏： angular.js入门文章标签： angularjs

本文链接：https://blog.csdn.net/xyphf/article/details/53927752

版权

angular.js入门专栏收录该内容

34 篇文章 1 订阅

订阅专栏

我们先说一下AngularJS供应商的作用或概念，那就是完成服务的相关初始配置操作；

它的写法应该写到模块的config方法当中；
举几个例子你就明白了

$interpolate服务的作用是插值计算，其实就是针对表达式{{}}进行操控;
下面我要对表达式的功能进行修改；

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AngularJS的供应商--config</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>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.config(['$interpolateProvider',function($interpolateProvider){  //要想初始配置，我们首先要做模块下面添加config方法，插入一个数组引入相应的供应商，以及相关的回调并注入
    $interpolateProvider.startSymbol('@@');//改变表达式头部的符号
    $interpolateProvider.endSymbol('@@');//改变表达式尾部的符号
}]);//这就是我们对$interpolateProvider的服务进行了初始化的配置

m1.controller('Aaa',['$scope','$interpolate',function($scope,$interpolate){
    $scope.$watch('body',function(newBody){
        if(newBody){
            var temp = $interpolate(newBody);
            $scope.showText = temp({ name : $scope.name }); 
        }   
    });
}]);
</script>
</head>

<body>
<div ng-controller="Aaa">
    <input type="text" ng-model="name">
    <textarea ng-model="body">
    </textarea>
    <p>@@showText@@</p>//**此处我们的表达式就是双@显示而不是{{}}形式了**
</div>
</body>
</html>

再比如说：

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>$log服务</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>
<script src="angular.min.js"></script>
<script>
/*
$log服务主要是用于一些打印服务的，它下面还有一些服务，比如说$log.debug这样的方法
*/
var m1 = angular.module('myApp',[]);
m1.config(['$interpolateProvider','$logProvider',function($interpolateProvider,$logProvider)//把$logProvider注入进来
{   
    $logProvider.debugEnabled(false);  //默认情况下为true，就是允许debug操作的，这里我们改成false,表示debug的功能要禁用
}]);
m1.controller('Aaa',['$scope','$log',function($scope,$log){ 
    $log.debug('hello');   //打一个提示信息
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
</div>
</body>
</html>

比如说

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></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>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.config(['$anchorScrollProvider',function($anchorScrollProvider){ 
    $anchorScrollProvider.disableAutoScrolling();  //禁止自动跳转的方式
}]);

m1.controller('Aaa',['$scope','$location','$anchorScroll',function($scope,$location,$anchorScroll)//引入$anchorScroll服务，hash值进行改变的时候，就能进行页面之间的跳转
{   
    $scope.change = function(id){  
        $location.hash(id);
        $anchorScroll();//只有通过服务的调用才可以调整       
    };  
}]);
</script>
</head>
<body>
<div id="parent" ng-controller="Aaa">
    <ul>
        <li ng-repeat="id in [1,2,3,4,5]" ng-click="change('div'+id)">{{id}}aaaaaaaaaa</li>
    </ul>
    <div ng-repeat="id in [1,2,3,4,5]" ng-attr-id="div{{id}}">{{id}}</div>
</div>
</body>
</html>