zhanglianxin/ngstudy

AngularJS Study

ngstudy's Issues

Scope

The concept of a scope in AngularJS is crucial. A scope can be seen as the glue which alllows the template, model, and controller to work together. AngularJS uses scopes, along with the information contained in the template, data model, and controller, to keep models and views separate, but in sync. Any changes made to the model are reflected in the view; any changes that occur in the view are reflected in the model.

Bootstrapping AngularJS Applications

There are 3 important things that happen during the bootstrap phase:

1. The injector that will be used for dependency injection is created.

2. The injector will then create the root scope that will become the context for the model of out application.

3. AngularJS will then "compile" the DOM starting at the ngApp root element, processing any directives and bindings found along the way.

Once an application is bootstrapped, it will then wait for incoming browser events (such as mouse clicks, key presses or incoming HTTP responses) that might change the model. Once such an event occurs, AngularJS detects if it caused any model changes and if changes are found, AngularJS will reflect them in the view by updating all of the affected bindings.

Using a RESTful client

Reference: https://docs.angularjs.org/tutorial/step_13

The RESTful functionality is provided by AngularJS in the ngResource module.

this.phones = Phone.query();

This is a simple and declarative statement that we want to query for all phones.

An important thing to notice in the code above is that we don't pass any callback functions, when invoking methods of our Phone service. Although it looks as if the results were returned synchronously, that is not the case at all. What is returned synchronously is a "future" -- an object, which will be filled with data, when the XHR response is received. Because of the data-binding in AngularJS, we can use this future and bind it to our template. Then, when the data arrives, the view will be updated automatically.

Sometimes, relying on the future object and data-binding alone is not sufficient to do everything we require, so in these cases, we can add a callback to process the server response. The phoneDetail component's controller illustrates this by setting the mainImageUrl in a callback.

How does the DI work and what is the provider

When the application bootstraps, AngularJS creates an injector that will be used to find and inject all of the services that are required by your application. The injector itself doesn't know anything about what the $http or $route services do. In fact, the injector doesn't even know about the existence of these services, unless it is configured with proper module definitions.

The injector only carries out the following steps:

• Load the module definition(s) that you specify in your application.

• Register all Providers defined in these module definition(s).

• When asked to do so, lazily instantiate services and their dependencies, via their Providers, as parameters to an injectable function.

Providers are objects that provide (create) instances of services and expose configuration APIs, that can be used to control the creation and runtime behavior of a service. In case of the $route service, the $routeProvider exposes APIs that allow you to define routes for your application.

Note: Providers can only be injected into config function. Thus you could not inject $routeProvider into PhoneListController at runtime.

AngularJS modules solve the problem of removing global variables from the application and provide a way of configuring the injector. As opposed to AMD or require.js modules, AngularJS modules don't try to solve the problem of script load ordering or lazy script fetching. These goals are totally independent and both module systems can live side-by-side and fulfill their goals.

How to use a service in AngularJS

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

function PhoneListController($http) {
    // ...
}

AngularJS'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.

What is the benefit of the Dependency Injection

Reference: https://docs.angularjs.org/tutorial/step_07#component-controller

Dependency injection helps to make your web applications both well-structured (e.g. separate entities for presentation, data, and control) and loosely coupled (dependencies between entities are not resolved by the entities themselves, but by the DI subsystem). As a result, applications are easier to test as well.

Ensure that the dependency injector would be able to identify services correctly on JavaScript code minification

We can overcome this problem by annotating the function with the names of the dependencies, provided as strings, which will not get minified. There are two ways to provide these injection annotations:

• Create an $inject property on the controller function which holds an array of strings. Each string in the array is the name of the service to inject for the corresponding parameter. In our example, we would write:

  function PhoneListController($http) {
      // ...
  }
  PhoneListController.$inject = ['$http'];
  // ...
  angular.module('phoneList').component('phoneList', {
      // ... ,
      controller: PhoneListController
  });

• Use an inline annotation where, instead of just providing the function, you provide an array. This array contains a list of the service names, followed by the function itself as the last item of the array.

  function PhoneListController($http) {
      // ...
  }
  // ...
  angular.module('phoneList').component('phoneList', {
      // ... ,
      controller: ['$http', PhoneListController]
  });

Both of these methods work with any function that can be injected by AngularJS, so it's up to your project's style guide to decide which one you use.

When using the second method, it is common to provide the constructor function inline, when registering the controller:

angular.module('phoneList').component('phoneList', {
    // ... ,
    controller: [
        '$http',
        function PhoneListController($http) {
            // ...
        }
    ]
});