随笔- 50 文章- 0 评论- 264 阅读- 16万

AngularJS里面$emit, $broadcast,$on,$http.Jsonp,constant是使用笔记

本片主要介绍$emit, $broadcast，$on经常开发的用法！

这张图差不多表明了$emit, $broadcast在aj里面的机制和用场！

这篇文章介绍了aj里面使用jsonp的原理和注意的地方！

下面直接显示下我运行起来的界面！

然后贴上DOM和js代码，本篇不多说，分享一些常用的东西！

DOM+js 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Broadcasting</title>
    <script src="./bower_components/angular/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('app',[]);
        app.controller('firstCtrl',function($scope){
            $scope.$on('eventName',function(event,args){
                $scope.message = args.message;
                console.log($scope.message);
            });
        });
        app.controller('secondCtrl',function($scope){
            $scope.handleClick = function(msg){
                $scope.$emit('eventName',{message:msg});
            };
        });

        app.controller('threeCtrl',function($scope){
            $scope.handleClick1 = function(msg){
                $scope.$broadcast('eventName',{message1:msg});
            };
        });

        app.controller('fourCtrl',function($scope){
            $scope.$on('eventName',function(event,args){
                $scope.message1=args.message1;
                console.log($scope.message1);
            });
        });
        app.controller('myjsonpCtrl',['$scope','$http',function($scope,$http){
            $scope.clickjsonp=function(){
                $http.jsonp('http://angularjs.org/greet.php?callback=JSON_CALLBACK',{params:{name:'world'},cache:true})
                        .success(function(data){
                            $scope.jsonps = data.greeting;
                        });
            }
        }]);

        app.constant('myConfig',{
            config1:'2015',
            config2:'ActionByName',
        });

        app.controller('constCtrl',function($scope,myConfig){
            $scope.const1=myConfig.config1;
            $scope.const2=myConfig.config2;
        });
    </script>
</head>
<body ng-app="app">
<div ng-controller="firstCtrl" style="border:2px solid #E75D5C; padding:5px;">
    <h1>Parent Controller</h1>
    <p>Emit Message : {{message}}</p>
    <br />
    <div ng-controller="secondCtrl" style="border:2px solid #428bca;padding:5px;">
        <h1>Child Controller</h1>
        <input ng-model="msg">
        <button ng-click="handleClick(msg);">Emit</button>
    </div>
</div>
<div ng-controller="threeCtrl" style="border:2px solid #E75D5C; padding:5px;">
    <h1>Parent Controller</h1>
    <input ng-model="msg">
    <button ng-click="handleClick1(msg);">Broadcast</button>
    <br /><br />
    <div ng-controller="fourCtrl" style="border:2px solid #428bca;padding:5px;">
        <h1>Child Controller</h1>
        <p>Broadcast Message : {{message1}}</p>
    </div>
</div>
<div ng-controller="myjsonpCtrl" style="border:2px solid #E78F5D; padding:5px;">
    <input ng-model="jsonps">
    <button ng-click="clickjsonp()">试试JSONP取值</button>
</div>
<div style="border:2px solid #E10F5B; padding:5px;" ng-controller="constCtrl">
  <input ng-model="const1"><br>
    <input ng-model="const2">
</div>
</body>
</html>