AngularJs -- XHRs & amp; Dependency Injection, angularjs

AngularJs -- XHRs & Dependency Injection, angularjs

This article extracts and explains some important snippets in AngularJs pilot snippets-5.

Theapp/phones/phones.jsonFile in your project is a dataset that contains a larger list of phones stored in the JSON format.

Following is a sample of the file:

[{ "age": 13, "id": "motorola-defy-with-motoblur", "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", "snippet": "Are you ready for everything life throws your way?" ...},...]

The above is a data in json format. Angularjs advocates web development modularization. The role of the background is to accept and process requests, and finally return the js Code to the front-end in a certain format. Json is recommended here because ng (angularjs abbreviation, which is replaced by ng below) can automatically identify and package the json file into an object for use directly.

Certificate -----------------------------------------------------------------------------------------------------------------------------------------------------------------

We'll use Angular's $ http service in our controller to make an HTTP request to your web server to fetch the data inapp/phones/phones.jsonFile.$httpIs just one of several built-in Angular services that handle common operations in web apps. Angular injects these services for you where you need them.

$ Http is a built-in service, that is, a library function. It is mainly used to initiate http requests to the server. As for how you get this library function, you can roughly divide it into four steps [1] The Compiler gets the function parameter [2]. Search for the parameter as the service name [3] If the response service is found, check whether the service has generated an instance [4] If no instance exists, generate a new instance. If yes, this instance is returned. (Singleton Mode)

Certificate -----------------------------------------------------------------------------------------------------------------------------------------------------------------

app/js/controllers.js:

var phonecatApp = angular.module('phonecatApp', []);phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {  $http.get('phones/phones.json').success(function(data) {    $scope.phones = data;  });  $scope.orderProp = 'age';});

$httpMakes an http get request to our web server, askingphones/phones.json(The url is relative to ourindex.htmlFile). The server responds by providing the data in the json file.

The$httpService returns a promise object withsuccessMethod. We call this method to handle the asynchronous response and assign the phone data to the scope controlled by this controller, as a model calledphones. Notice that Angular detected the json response and parsed it for us!

To use a service in Angular, you simply declare the names of the dependencies you need as arguments to the controller's constructor function, as follows:

phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {...}

Angular's dependency injector provides services to your controller when the controller is being constructed. the dependency injector also takes care of creating any transitive dependencies the service may have (services often depend upon other services ).

Note that the names of arguments are significant, because the injector uses these to look up the dependencies.

Here, it mainly indicates that $ http will call a callback method after the service successfully receives data. Because the service itself is asynchronous, callback is required, in the callback function, we can assign values. Next we will illustrate ng's automatic dependency injection function. While injecting the services we need, we can also inject other services that the main service depends on at the same time to ensure that the main service works normally.

Finally, it is said that the injected string parameter is meaningful and cannot be written in disorder, because ng will find the corresponding service based on the string. If the name is wrong, the service will not be found.

Certificate -----------------------------------------------------------------------------------------------------------------------------------------------------------------

$Prefix Naming Convention

You can create your own services, and in fact we will do exactly that in step 11. as a naming convention, Angular's built-in services, Scope methods and a few other Angular APIs have$Prefix in front of the name.

The$Prefix is there to namespace Angular-provided services. To prevent collisions it's best to avoid naming your services and models anything that begins with$.

If you inspect a Scope, you may also notice some properties that begin$$. These properties are considered private, and shocould not be accessed or modified.

This section focuses on the prefix of ng, $ and $. $ Is the prefix of built-in services and APIs. ng allows us to define services by ourselves. To prevent conflicts, it is best not to start with $. $ Indicates that the service is private and cannot be rewritten by users.

Certificate -----------------------------------------------------------------------------------------------------------------------------------------------------------------

Establish an AngularJS Environment

Pay attention to the following key areas,
1. Add ng-app
2. Introduce angularjs.
See angularjs.org/here for details.
<! Doctype html>
How can angularjs implement notification entries?

You can write a command:
<! DOCTYPE html>
<Html ng-app = "myApp">
<Head>
<Title> angularjs-focus </title>
</Head>
<Body>
<Input type = "text" set-Focus = "">
<Script type = "text/javascript" src = "js/angular. min. js"> </script>
<Script type = "text/javascript">
Var myApp = angular. module ('myapp', []);
MyApp. directive ('setfocal ', function (){
Return function (scope, element ){
Element [0]. focus ();
};
});
</Script>
</Body>
</Html>