- Ionic:Hybrid Mobile App Development
- Rahat Khanna Sani Yusuf Hoc Phan
- 825字
- 2021-07-09 19:00:38
Ionic services vs factories
Services/factories in Ionic are used to abstract common business logic and integration to the backend services. A data access layer and business logic layer can be implemented using Ionic service or factory. Ionic service or factory can be used interchangeably and are available as a method on the angular.module
object.
Note
Generally, a service is used to represent the data access layer whereas a factory is used to implement the entity layer or business logic layer. Both objects are singleton in nature, meaning only once instance is created throughout the app's life cycle, which is shared between multiple controllers or other angular modules.
We will take the example of our BookStore App to create an authentication service for it, and a booksFactory with factory object.
Ionic service – authentication service
Ionic service is a special Angular construct that represents an object created using a constructor pattern, exposing certain methods abstracting app logic or integrating with the backend. Services can be injected into any module using Dependency Injection (DI) but its instance is created only once. Service is lazily instantiated only when any component that depends on it comes into focus. There are multiple in-built utility services such as $http
, $timeout
, and so on which can be used throughout the app.
A service is created using the .service()
method available on the angular.module
object. The first argument needs to be the name of the service and the second argument is the dependency injection array, which has the names of all dependencies, and the last element is the constructor function.
The following code explains the usage of this service:
angular.module('module.services',[]) .service('ServiceName', ['dependency1','dependency2', function(dependency1,dependency2) { this.variable1 = 1 //default value this.variable2 = 3 //default value this.method1 = function() { return binaryOp(this.variable1,this.variable2); //binaryOp can be any local method } } ] );
We can model our BookStore sample app's authentication service using this construct. We will expose four given methods to this service as follows:
signup
: A method used to sign up a new user, taking input as a user objectlogin
: A method to log in a user and savesessionToken
to cookieslogout
: A method to log a user out of a web service and remove thesessionToken
argument
Here is the code sample for defining a service:
angular.module('BookStore.Services',[]) .service('UserAuth', ['$http','$cookies', function($http,$cookies) { this.baseApiUrl = 'http://localhost:9000/api'; // Sample URL to be replaced by your own API url this.signup = function(userObj) { // Making a POST $http call to /signup API call return $http.post(this.baseApiUrl+'/signup',userObj) } this.login = function(username,password) { // Making a GET $http call to /login API call return $http.get(this.baseApiUrl+'/login?username='+username+'&password='+password) .then(function(response) { if(response.data.loginSuccessful == 'true') { $cookies.put('sessionToken',response.data.sessionToken); } }); } this.logout = function() { // Making a GET $http call to /logout API call return $http.post(this.baseApiUrl+'/logout?sessionToken='+$cookies.get('sessionToken')) .then(function(response){ $cookies.remove('sessionToken'); }); } } ]);
Ionic factory – BooksFactory
Ionic Factory is very similar to service and can be used interchangeably with it. The only syntactical difference is that it returns an object exposing selective methods, which can be called to use the service. It is also based on a singleton pattern and the same instance is shared between different modules.
The service or factory can be used by injecting it into any controller or other service, and calling the exposed methods passing required parameters. We can use this to create a factory pattern for our app using it to manage entities or objects.
The following code explains the usage of this service:
angular.module('module.services',[]) .factory('ObjectFactory', ['dependency1','dependency2', function(dependency1,dependency2) { this.objectsArray = [] //load array from server this.getObjects = function() { return this.objectsArray; } } ] ); .controller('ConsumerCtrl',['ObjectFactory',function(ObjectFactory) { $scope.objects = ObjectFactory.getObjects(); }]);
We can create a BooksFactory factory to implement logic regarding managing book entities in our app. We can expose the methods that can be used by multiple views or controllers. We will be exposing the following methods:
getBooks
: A method that can be used to get a list of books to be displayed. Certain optional arguments can be passed to the method to filter the results:Category
: Fetch books related to that categoryAuthor
: Fetch books for a specific authorSortBy
: Pass the field according to which list should be sorted
getBookDetails
: Passing a specific book ID to get all the details regarding that book.addToFavorite
: Adding a book to your favorites.
Here is the code sample for defining a service:
angular.module('BookStore.Services',[]) .factory('BooksFactory', ['$http', function($http) { var baseApiUrl = 'http://localhost:9000/api'; // Sample URL to be replaced by your own API url var booksList = []; var favoriteBooks = []; var getBooks = function(category,author,sortBy) { var filters = {}; if(category) filters['category'] = category; if(author) filters['author'] = author; if(category) filters['sortBy'] = sortBy; // Making a POST $http call to /signup API call return $http.post(baseApiUrl+'/books',filters) } var getBookDetails = function(bookId) { // Making a GET $http call to /books/:id API call return $http.get(baseApiUrl+'/books/'+bookId); } var addToFavorite = function(bookObj) { if(bookObj) { favoriteBooks.push(bookObj); return true; } } return { getBooks: getBooks, getBookDetails: getBookDetails addToFavorite: addToFavorite } } ] );
- 軟件安全技術
- NativeScript for Angular Mobile Development
- Python計算機視覺編程
- PHP 編程從入門到實踐
- QGIS:Becoming a GIS Power User
- Elasticsearch for Hadoop
- Android應用案例開發大全(第二版)
- Learning Modular Java Programming
- Hands-On GUI Programming with C++ and Qt5
- Visual Studio Code 權威指南
- Cocos2d-x Game Development Blueprints
- Python 快速入門(第3版)
- Django 2.0 入門與實踐
- Instant SQL Server Analysis Services 2012 Cube Security
- Kotlin核心編程