Angularjs Study Notes--ng-model, Controller, DI, $scope, $provide

Depend on:

RESTful functionality is provided by the ANGULARJS in the Ngresource module, which is distributed separately from the core ANGULARJS framework.

Ng-model:

<! DOCTYPE html>
The Ps:required property specifies that the input field must be filled in before submission.
Controllerindex.html:
<!      DOCTYPE html> 
Invoice1.js:
Angular.module (' Invoice1 ', []).     Controller (' Invoicecontroller ', function Invoicecontroller () {         this.qty = 1;         This.cost = 2;         This.incurr = ' EUR ';         This.currencies = [' USD ', ' EUR ', ' CNY '];         This.usdtoforeignrates = {             usd:1,             eur:0.74,             cny:6.09         };         This.total = function Total (outcurr) {             return this.convertcurrency (This.qty * this.cost,this.incurr,outcurr);         };         this.convertcurrency = function convertcurrency (amount,incurr,outcurr) {             return amount * This.usdtoforeignrates[outcurr]/This.usdtoforeignrates[incurr];         };         This.pay = function Pay () {             Window.alert ("Thanks");         };});
PS: The controller is a JavaScript object that is created by the JavaScript object's constructor. The controller points to a constructor that is used to create the actual controller instance. The purpose of the controller is to expose variables and functions to expressions and directives.
Ps: The $scope of the controller is used to save the Angularjs model object.
Controller2.html:
<!      DOCTYPE html> 
Finance2.js:
Angular.module (' Finance2 ', []). Factory (' Currencyconverter ', function () {     var currencies = [' USD ', ' EUR ', ' CNY '];     var usdtoforeignrates = {         usd:1,         eur:0.74,         cny:6.09     };     var convert = function (amount, InCurr, Outcurr) {         return amount * Usdtoforeignrates[outcurr]/usdtoforeignrates[ InCurr];     };     return {         currencies:currencies,         Convert:convert     };});
Invoice2.js:
Angular.module (' Invoice2 ', [' Finance2 ']). Controller (' Invoicecontroller ', [' Currencyconverter ', function Invoicecontroller (Currencyconverter) {//invokes the service instance as a parameter     This.qty = 1;     This.cost = 2;     This.incurr = ' EUR ',     this.currencies = currencyconverter.currencies;     This.total = function Total (outcurr) {         return Currencyconverter.convert (This.qty *this.cost,this.incurr,outcurr) ;     };     This.pay = function Pay () {         window.alert (' Thanks ');     };}]);
Controllerindex.html:
<!      DOCTYPE html> 
Finance3.js:
Angular.module (' Finance3 ', []). Factory (' Currencyconverter ', [' $http ', function ($http) {     var currencies = [' USD ', ' EUR ', ' CNY '];     var usdtoforeignrates = {};     var convert = function (amount, InCurr, Outcurr) {         return amount * Usdtoforeignrates[outcurr]/usdtoforeignrates[ InCurr];     };     var refresh = function () {         var url = ' http://api.ficer.io/latest?base=USD&symbols= ' + currencies.join (",");         Return $http. Get (URL). Then (function (response) {             usdtoforeignrates = response.data.rates;             usdtoforeignrates[' USD '] = 1;         });     Refresh ();     return {         currencies:currencies,         Convert:convert     };}]);
Invoice3.js:
Angular.module (' Invoice3 ', [' Finance3 ']). Controller (' Invoicecontroller ', [' Currencyconverter ', function Invoicecontroller (currencyconverter) {     this.qty = 1;     This.cost =2;     This.incurr = ' EUR ';     This.currencies = currencyconverter.currencies;     This.total = function Total (outcurr) {         return Currencyconverter.convert (This.qty * this.cost,this.incurr,outcurr) ;     };     This.pay = function Pay () {         Window.alert ("Thanks");     
Ps:
Dependency Injection (DI), a software design pattern that handles how to create objects and functions, and how to maintain their dependencies. All content within the ANGULARJS (directives, filters, controllers, services, etc.) is created and routed using dependency injection. In Angularjs, the Di container is called a syringe. To use Di, there needs to be a place where everything can be registered here, which is the function of the module in Angularjs. When Angularjs is started, the configuration of the name defined by the module is used through the NG-APP directive, including the configuration of all other modules that the module relies on.
Controller: ANGULARJS, the controller is defined by the JavaScript constructor and is used to increase the ANGULARJS scope. When the controller is attached to the DOM via the ng-controller instruction, Angularjs instantiates a new controller object with the constructor of the specified controller. A new child scope is created and is provided as the constructor for the controller as an injection parameter as a scope.
Use controller: Sets the initial state of the $scope object (the initial state of the scope is set by attaching the property to the $scope object, the property contains the view model), and the behavior is added to the $scope object.
Set the initial state of the $scope object:
Controllerindex.html:
<! DOCTYPE html> 
Controller4.js:
var MyApp = angular.module (' myApp ', []); Myapp.controller (' Greetingcontroller ', [' $scope ', function ($scope) {     $scope. Greeting = ' Hola ';}]);
To add a behavior to a scope object:
Controllerindex5.html:
<! DOCTYPE html> 
Controller5.js:
var MyApp = angular.module (' myApp ', []); Myapp.controller (' Doublecontroller ', [' $scope ', function ($scope) {     $scope. Double = function (value) {         return Value * 2;     }; }]);
PS: Any object that is assigned to a scope becomes a model property.
Ps: Generally, the controller contains all the business logic that is required for a single view. Common use of Controllers: encapsulate work that is not part of the controller into the service, and then use these services in the controller through dependency injection.
The Ng-controller directive is used to create a scope for the template, and the scope is augmented by the corresponding controller.
Application developers can define their own services by registering the service name with the Service factory function. The Service factory function generates a single object or function, which is registered to the module through the module API, typically using the Module factory API to register the service:
var mymodule = angular.module (' MyModule ', []); Mymodule.factory (' ServiceId ', function () {     var shinynewserviceinstance;     //...     return shinynewserviceinstance; });
Services can have their own dependencies, just like declaring dependencies in a controller, declaring a dependency by specifying them in the service's factory function signature.
var batchmodule = angular.module (' Batchmodule ', []); Batchmodule.factory (' Batchlog ', [' $interval ', ' $log ', function ($interval, $log) {  }
$provide Registration Service: You can register the service through the config function of the $provide service within the module
Angular.module (' MyModule ', []). config ([' $provide ', function ($provide) {     $provide. Factory (' ServiceId ', function () {         var shinynewserviceinstance;         //...         return shinynewserviceinstance;     }); }]);
Dependency injection can be used when defining components or providing run and config for modules. (1) The components of a service, instruction, filter, or animation are defined by an injected factory method or constructor that can inject services and values as dependencies. (2) The controller is defined by a constructor that can inject any service and value component as a dependency, but can provide a special dependency. (3) The Run method accepts a function that can inject service, value, constant components as dependencies. (4) The Config method accepts a function that can be injected with provider and constant components as dependency relationships.
$inject property is to inject a series of service names
The Ng-model directive provides two-way data binding by synchronizing the model with the view and viewing the model.
Reference & Thanks: https://docs.angularjs.org
(8-18)
Angularjs Study Notes--ng-model, Controller, DI, $scope, $provide