Angularjs Learning notes 5--Custom Services

Source: Internet
Author: User

The previous ANGULARJS two-way data binding and custom directives, as you can see from the manual, the NG section also includes filters and functions, as well as services.

  Filter : Filter, is to format the data, pay attention to the pipeline format, for example:

{{expression | number/currency/data/orderby:  ' corresponding format or expression '}}

  functions: Function , should not be introduced. It is important to note that the formal parameter order of the Foreach function, the basic format is as follows:

1 var obj={name: "Fanfan", Age: "A", Gender: "Female"}; 2 Angular.foreach (obj,function (value,key) {3    console.log (key+ ":" +value);}); 4 );

   service : Angular Services is singletons objects or functions that carry outgoing specific tasks common to web apps. It is a singleton object or function that provides a specific Yes. That's what I'm going to focus on today.

  Built-in services: NG provides a number of built-in services that we can use directly. 

1.$scope/$rootScope

  The first thing we need to master is the $scope that appeared before, and the parent $rootscope. $scope/$rootScope are NG built-in services, and the nature of the service is actually an object

How to use: Inject in function ($scope, $rootScope) in the corresponding method of the controller

  The relationship between $scope and $rootscope/Difference

$rootScope Initializes an object at NG startup with an ID of 1;

$scope is to call the controller's method, the injected object, ID according to the loading order up, the different controller $scope data can not be shared, because are $rootscope child elements, so the problem of solving data sharing is to put the data in the $ The Rootscope object. Implement the nesting of the controller, the model data in the parent element can be referenced by the quilt element.

  2. $http Services

The $HTTP service is Ajax in Angularjs, where $http is different from the Get and Post methods (set request header App.run), data Serialization ($.param).

1App.run (function($http) {2$http. Defaults.headers.post = {' Content-type ': ' application/x-www-form-urlencoded '};//request header settings required by the Post method3     });4App.controller (' Fanctrl ',function($scope, $http) {5 //Get methods for $http6 //$http. Get (' data/server.php '). Success (function (data) {7 //console.log (data);8 //$scope. List=data;9 //        })TenVarobj={name: ' Jerry ', age:20}; One Console.log ($.param (obj)); A$scope. add=function(){ -$http. Post (' data/server2.php ', $.param (obj)). Success (function(data) { - console.log (data); the$scope. list=data; -             }) -         } -})

Custom services:

 1.factory

1 app.factory (' service name ',function() {  2     return  {  3           funcName:function() {}  4}  5}); 6app.controller (' Myctrl ',function($scope, server name) { 7 server name. funcName; 8});   

  2.service

1 app.service (' Server name ',function() {2this          . Variable name = value;3 this          . Method name =function() {}; 4 })5 app.controller (' Myctrl ',function($scope, server name) {6     server name. FuncName; 7 });

the difference between factory and service is that the factory is a normal function, and the service is a constructor, in angular, the service is invoked with the New keyword instance, Calling factory is called normal function, all factory can return any value, and service can not return.

These are the two methods of customizing the service. There are also several service methods defined by constants. The server created by Constant/valueà returns a constant. Our custom services are in the dependency injection and how to use them. Good night

Angularjs Learning notes 5--Custom Services

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.