angularJS中$http内置服务等controller控制器组件的运用angular.module('myApp', []).controller('myCtrl', function($scope) { $scope.carname = "Volvo"; });

Angularjs中的内置服务（也可以自己创建服务）说明

$scope、$http、$rootscope、$timeout、$interval、$sce

比如：app.controller('wdListCtrl', ['$scope','$rootScope','$http','$timeout','$sce','geoFactory', function ($scope,$rootScope,$http,$timeout,$sce,geoFactory) {

}])

$scope是控制器中添加 $scope 对象

如：

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>

</div>

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

app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>

结果为：Volvo

原文来自：http://www.runoob.com/angularjs/angularjs-scopes.html

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

<div ng-app="myApp" ng-controller="siteCtrl"> 
 
<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
  $http.get("http://www.runoob.com/try/angularjs/data/sites.php")
  .success(function (response) {$scope.names = response.sites;});
});
</script>

文章来自：http://www.runoob.com/angularjs/angularjs-http.html

$rootscope区别：

scope是html和单个controller之间的桥梁，数据绑定就靠他了。rootscope是各个controller中scope的桥梁。用rootscope定义的值，可以在各个controller中使用。下面用实例详细的说明一下。

phonecatApp.controller('TestCtrl',['$scope','$rootScope',  
    function($scope,$rootScope) {  
        $rootScope.name = 'this is test';  
    }  
]);  
  
phonecatApp.controller('Test111Ctrl',['$scope','$rootScope',  
    function($scope,$rootScope) {  
        $scope.name = $rootScope.name;  
    }  
]);  

<div ng-controller="TestCtrl">  
    I  set the global variable.<strong>{{$root.name}}</strong>  
</div>  
  
<div ng-controller="Test111Ctrl">  
    1,get global variable .<strong>{{name}}</strong><br>  
    2,get global variable .<strong>{{$root.name}}</strong>  
</div>

显示结果为：

I set the global variable.this is test
1,get global variable .this is test
2,get global variable .this is test

由结果可以看出来，$rootScope.name设置的变量，在所有controller里面都是可以直接用{{$root.name}}来显示的，很强大。那当然也可以赋值给scope.

$timeout

window.setTimeout的Angular包装形式。

timeout函数的返回值是一个promise，当到达设置的超时时间时，这个承诺将被解决，并执行timeout函数。

需要取消timeout，需要调用$timeout.cancel(promise);

使用： $timeout(fn,[delay],[invokeApply]);

fn：一个将被延迟执行的函数。

delay：延迟的时间（毫秒）。

invokeApply：如果设置为false，则跳过脏值检测，否则将调用$apply。

方法：

cancel(promise);

取消与承诺相关联的任务。这个的结果是，承诺将被以摒弃方式来解决。

promise：$timeout函数返回的承诺。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

结果是：

两秒后显示信息:How are you today?

$interval

window.setInterval的Angular包装形式。

间隔函数的返回值是一个承诺。这个承诺将在每个间隔刻度被通知，并且到达规定迭代次数后被取消，如果迭代次数未定义，则无限制的执行。通知的值将是运行的迭代次数。取消一个间隔，调用$intreval.cancel(promise)。

备注：当你执行完这项服务后应该把它销毁。特别是当controller或者directive元素被销毁时而$interval未被销毁。你应该考虑到在适当的时候取消interval事件。

使用：$interval(fn,delay,[count],[invokeApply],[Pass]);

fn:一个将被反复执行的函数。

delay：每次调用的间隔毫秒数值。

count：循环次数的数值，如果没设置，则无限制循环。

invokeApply：如果设置为false，则避开脏值检查，否则将调用$apply。

Pass：函数的附加参数。

方法：

cancel(promise);

取消与承诺相关联的任务。

promise：$interval函数的返回值。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

结果是：每一秒显示信息

$sce

angularjs严格的控制上下文访问。

$sce服务把一些地址变成安全的、授权的链接...简单地说，就像告诉门卫，这个陌生人其实是我的好朋友，很值得信赖，不必拦截它！

常用的方法有：

$sce.trustAs(type,name);
$sce.trustAsHtml(value);
$sce.trustAsUrl(value);
$sce.trustAsResourceUrl(value);
$sce.trustAsJs(value);

其中后面的几个都是基于第一个api使用的，比如trsutAsUrl其实调用的是trsutAs($sce.URL,"xxxx");

其中type可选的值为：

$sce.HTML
$sce.CSS
$sce.URL //a标签中的href ， img标签中的src
$sce.RESOURCE_URL //ng-include,src或者ngSrc，比如iframe或者Object
$sce.JS

例如为：

<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    第一种方式：<br/>
    有$sce处理：<audio  ng-src="{{sceControl(formData.mediaUrl)}}"  controls="controls">您的浏览器不支持html5</audio><br/>
    无$sce处理：<audio  ng-src="{{formData.mediaUrl}}"  controls="controls">您的浏览器不支持html5</audio><br/><br/>

    第二种方式：<br/>
    <audio  ng-src="{{data.url}}"  controls="controls">您的浏览器不支持html5</audio>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope,$sce){
        //第一种方式数据源
        $scope.formData={
            "name":"视频",
            "mediaUrl":"http://res.audiogroup.cn/res/upload/agx_ims_creative/audio/20160307/bpryk96.mp3"//视频路径
        };      
        $scope.sceControl = $sce.trustAsResourceUrl;//第一种处理方式

        //第二种方式数据源
        $scope.data={
            "name":"视频",
            "url":"http://res.audiogroup.cn/res/upload/agx_ims_creative/audio/20160307/bpryk96.mp3"//视频路径
        };  
        $scope.data.url = $sce.trustAsResourceUrl($scope.data.url);//第二种处理方式

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

<div ng-app="myApp" ng-controller="myCtrl">
    未处理的：
    <div ng-repeat="item in formData">
        {{item.name}} :{{item.htmlVal}}
    </div>

    <br/>处理过的：<button ng-click="look()">查看处理结果</button>
    <div ng-repeat="item in data">
        {{item.name}} :<p ng-bind-html = "item.htmlVal"></p>
    </div>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope,$sce){
        //未处理数据源
        $scope.formData=[
            {"name":"张春玲","htmlVal":"我是<span style='color:red;'>张春玲<span>"},
            {"name":"sb","htmlVal":"我是<span style='color:red;'>sb<span>"}
        ];  

        //处理结果
        $scope.look = function(){alert
            $scope.data=[
                {"name":"张春玲","htmlVal":"我是<span style='color:red;'>张春玲<span>"},
                {"name":"sb","htmlVal":"我是<span style='color:red;'>sb<span>"}
            ];
            for(var i=0;i<$scope.data.length;i++){
                $scope.data[i].htmlVal = $sce.trustAsHtml($scope.data[i].htmlVal);
            }
        };

    });
</script>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="mySceApp">
    <div ng-controller="AppController">
      <i ng-bind-html="explicitlyTrustedHtml" id="explicitlyTrustedHtml"></i>
    </div>
    <script type="text/javascript">
        angular.module('mySceApp',[])
        .controller('AppController', ['$scope', '$sce',
          function($scope, $sce) {
            $scope.explicitlyTrustedHtml = $sce.trustAsHtml(
                '<span onmouseover="this.textContent=&quot;Explicitly trusted HTML bypasses ' +
                'sanitization.&quot;">Hover over this text.</span>');
          }]);
    </script>
</body>
</html>

文章例子说明：http://www.cnblogs.com/xing901022/p/5100551.html

posted @ 2017-02-27 17:26 chenguiya 阅读(1036) 评论(0) 收藏举报

刷新页面返回顶部

angularJS中$http内置服务等controller控制器组件的运用angular.module('myApp', []).controller('myCtrl', function($scope) { $scope.carname = "Volvo"; });

公告