34、AngularJs之自定义服务实现多个控制器之间的数据共享

阅读() @2018-10-29 18:16:10

AngularJs之自定义服务实现多个控制器之间的数据共享,在同一页面当中,多处用到同一个数据,一般情况下我们需要重复写很多次代码,但是使用Angular提供的自定义服务,可以只写一次代码,提供给很多模块和控制器使用,这样可以减少代码沉兑。具体代码如下:

html部分:

<body ng-app="app">
    <div ng-controller="ctr1">
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <td>网站名称</td>
                    <td>网站地址</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="(key, value) in data">
                    <td>{{value.webname}}</td>
                    <td>{{value.weburl}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <hr />
    <div ng-controller="ctr2">
        <table cellpadding="0" cellspacing="0">
            <thead>
            <tr>
                <td>网站名称</td>
                <td>网站地址</td>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="(key, value) in data">
                <td>{{value.webname}}</td>
                <td>{{value.weburl}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</body>

JavaScript部分:

var m = angular.module('app', []);
m.factory('zymBlog', ['$http', function($http){
	return {
		'get' : function(){
			return $http({
				'url' : './1.php',
				'method' : 'post',
			}).then(function(result){
				return result.data;
			});
		}
	}
}]);
m.controller('ctr1', ['$scope', 'zymBlog', function($scope, zymBlog){
	zymBlog.get().then(function(result){
		$scope.data = result;
	});
}]);
m.controller('ctr2', ['$scope', 'zymBlog', function($scope, zymBlog){
	zymBlog.get().then(function(result){
		$scope.data = result;
	});
}]);

以上,使用factory自定义服务,第一个参数是服务名称,第二个参数是数组,包含需要依赖注入的其他服务,通过这个自定义服务获取到数据,其他的控制器都可以进行使用!

微信二维码