如何使用服务或提供商?

时间:2016-06-23 15:48:50

标签: javascript angularjs

我是棱角分明的新人,正在研究一些虚拟应用程序,以使自己适应角度。我设计了一个使用角度和火力基础的小型联系应用程序。一切似乎工作正常,但我把所有的逻辑都放在一个控制器里;我想把它分开给服务/提供商。

以下是我当前申请的结构:



angular.module('myContacts.contact', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/contacts', {
    templateUrl: 'contacts/contacts.html',
    controller: 'contactsCtrl'
  });
}])

.controller('contactsCtrl', ['$scope','$firebaseArray',function($scope,$firebaseArray) {


	var ref = new Firebase('https://micontactapp.firebaseio.com/contacts');
	$scope.contacts = $firebaseArray(ref);

	$scope.addFormShow = false;
	$scope.msg = "";

	$scope.showAddForm = function(){
		$scope.addFormShow = true;
	}
	$scope.hide = function(){
		$scope.addFormShow = false;
	}

	$scope.closeDetailsForm = function(){
		$scope.showDetailsForm = false;	
	

	$scope.showContactDetails = function(contact){

		// To show the details on po
	}

	$scope.addFormSubmit = function() {
		console.log("form submitted.");
		var name = $scope.name ? $scope.name : null;
		var email = $scope.email ? $scope.email : null;
		var company = $scope.company ? $scope.company : null;

		var work_phone = $scope.work_phone ? $scope.work_phone : null;
		var mobile_phone = $scope.mobile_phone ? $scope.mobile_phone : null;
		var home_phone = $scope.home_phone ? $scope.home_phone : null;

		var street_address = $scope.street_address ? $scope.street_address : null;
		var city = $scope.city ? $scope.city : null;
		var state = $scope.state ? $scope.state : null;
		var zipcode = $scope.zip ? $scope.zip : null;
	

		$scope.contacts.$add({
			name: name,
			email: email,
			company: company,
			phones: [
				{
					mobile: mobile_phone,
					home: home_phone,
					work: work_phone
				}
			],
			addresses: [{
				street_address: street_address,
				city: city,
				state: state,
				zipcode: zipcode 
			}]
		}).then(function(ref){
			var id = ref.key();
			console.log("Added Contact with id"+id);

			$scope.clearFields();
			$scope.addFormShow = false;
			$scope.msg = "Contact Added.";
		});
	}
	

	$scope.removeContact = function(contact){
		$scope.contacts.$remove(contact);
		$scope.msg = "Contact removed.";
	};

	$scope.showEditForm = function(contact){

		console.log(contact.$id);
		$scope.id = contact.$id;
		$scope.name = contact.name;
		$scope.email = contact.email;
		$scope.company = contact.company;

		$scope.work_phone = contact.phones[0].work;
		$scope.mobile_phone = contact.phones[0].mobile;
		$scope.home_phone = contact.phones[0].home;

		$scope.street_address = contact.addresses[0].street_address;
		$scope.city = contact.addresses[0].city;
		$scope.state = contact.addresses[0].state;
		$scope.zipcode = contact.addresses[0].zipcode;
		
		$scope.editFormShow = true;
	}

	$scope.editFormSubmit = function(contact){
		var id = $scope.id;
		console.log(id);
		var record = $scope.contacts.$getRecord(id);

		record.name = $scope.name;
		record.company = $scope.company;
		record.email = $scope.email;

		record.phones[0].home = $scope.home_phone;
		record.phones[0].work = $scope.work_phone;
		record.phones[0].mobile = $scope.mobile_phone;

		record.addresses[0].street_address = $scope.street_address;
		record.addresses[0].city = $scope.city;
		record.addresses[0].state = $scope.state;
		record.addresses[0].zip = $scope.zipcode;

		$scope.contacts.$save(record).then(function(ref){
			$scope.msg = "Record updated.";
		});

		$scope.clearFields();
		$scope.editFormShow = false;

	}

}]);




基本上我正在创建firebase(var ref = new Firebase('https://micontactapp.firebaseio.com/contacts');)的引用,并使用它完成所有CRUD操作。

如果我创建一个新的服务层,我不知道应该在哪里创建这个参考控制器或服务?我应该使用工厂或供应商吗?

2 个答案:

答案 0 :(得分:0)

使用工厂定义服务并重用代码。以下是如何使用它的示例。

var app = angular.module('app',[]);   
app.factory('utility',function() {
    return {
         method : function($scope) {
            //put your reusable code
         }
    }
});

控制器

app.controller('contactsCtrl', ['$scope','$firebaseArray','utility',function($scope,$firebaseArray,utility) {
    utility.method($scope);
}]);

答案 1 :(得分:0)

看看你可以实际做三件事

  • 在app.run中定义你的逻辑

  • 在app.service或app.factory

  • 中定义你的逻辑

在使用代码时尝试使用$ rootScope而不是$ scope,因为变量或函数需要在整个模块中是全局的

看起来像使用上述功能一样