Getting started with Angular Service
1.Angular built-in service
Angular itself provides a lot of built-in services to facilitate developers' development. You can view the built-in services provided by AngularJS through https://docs.angularjs.org/api/ng/service. In enterprise development, the following services are commonly used:
$cacheFactory caching service
$compile compilation service
Filter can format and filter the output data through the $filter service.
Http AngularJS built-in core services, mainly related to background requests
Location is based on the Angular version of _ window.location and is more powerful. For example, the switch of routing address: $location.path ('/ home')
The log development process uses a lot of input errors and debug logs. Similar to Chrome browser's console.log (), console.debug (), etc.
The $Q service is mainly used for asynchronous functions to return a promise, and the resovle attribute is often used in routing.
$rootScope an application has only one $rootScope, which can be used for common data or variables that each page needs to use, but during development, it is recommended to use $rootScope as little as possible, which is not convenient to debug. Because it is a global variable.
2.Angular Custom Service
Service can be defined in many ways, commonly using factory to define a service. The code is as follows:
App.factory ('dataService', function () {var appVerison = "1. 0"; var showVersion = function () {return appVerison;}; return {appTitle: "Decorators Demo", showVersion: showVersion}}); 3. Sharing data between controllers using Service
There are also many ways to share data between controllers. Binding variables or functions to $rootScope is a common way, but it is not recommended. It is common to use Service to share data between multiple controller. A system for recording book reading needs to record the last edited book information.
Read the currentUser service in BooksController.js and assign a value to the lastBookEdited object in the currentUser service on the edited page.
Define currentUser services
Angular.module ('app') .factory (' currentUser', function () {var lastBookEdited = {}; return {lastBookEdited: factory}})
In EditController.js
DataService.getBookByID ($routeParams.bookId) .then (function (response) {vm.currentBook = response;// assigns the currently edited book object to the lastBookEdited currentUser.lastBookEdited=vm.currentBook; property}) .catch (function (response) {$log.error (response);})
BooksController.js
Vm.currentUser=currentUser
Template books.html
`books`.`roomyData`.`bookCount`Books-- `books`.`roomyData`.`readerCount`Readers-- `books`.`roomyData`.`grandTotalMinutes` TotalMinutes Read4.Decorators (modified) in Angular Service
In the actual development process, we need to add methods to our own services, or to the introduction of third-party services, developers do not need to modify the previous source code, but can add methods to Service at run time. Decorator- decorations are needed here. Decoration pattern is a classic design pattern in software design, which is implemented in advanced object-oriented languages, such as Java, C # and so on. Example of AngularJS code:
Var app = angular.module ('app', []); app.controller (' MainCtrl', function ($scope, dataService) {$scope.app = dataService;}); app.factory ('dataService', function () {var appVerison = "1.0"; var showVersion = function () {return appVerison;}; return {appTitle:" Decorators Demo ", showVersion: showVersion}}) App.config (function ($provide) {$provide.decorator ('dataService', function ($delegate) {$delegate.sayHello = function () {return "a new function of' dataService'";}; return $delegate;});})
