【MVVM】- AngularJS 依賴注入

依賴注入(Dependency Injection)：，一個或更多的依賴（或服務）被注入（或者通過引用傳遞）到一個獨立的物件（或客戶端）中，然後成為了該客戶端狀態的一部分。DI分離了客戶端依賴本身行為的建立，這使得程式設計變得鬆耦合，並遵循了依賴反轉和單一職責原則。

*效果：沒事你不要來找我，有事我會去找你

AngularJS 依賴注入元件：value factory service provider constant

Value：用於向控制器傳遞值（配置階段）
service:用於建立函式提供服務
factory 是一個函式的返回值
constant(常量)用來在配置階段傳遞數值，注意這個常量在配置階段是不可用的

外觀介面

<body ng-app="mainApp" ng-controller="CalcController">
defaultInput:{{numer}}<br>
value:{{value}}

<br><br>
  <h2>AngularJS 簡單應用</h2>
<div>
<p>輸入一個數字: <input type="number" ng-model ="tempNum" /></p>
<button ng-click = "square()">X<sup>2</sup></button>
<p>結果: {{result}}</p>
</div>
</body>

js操作邏輯

var mainApp = angular.module("mainApp", []);
    //建立value物件：defaultInput
    mainApp.value("defaultInput",5);  //類似spring的依賴注入方式
    
    //factory用於返回函式的返回值:必須存在返回值物件
    mainApp.factory("MathService",function(){
           var factory = {}; //作為工廠的返回值物件
           factory.multiply = function(a,b) {
              return a*b;
           }
           return factory;  
    });
    
  //service物件是一個單例模式，只有頁面銷燬才會刪除,MathService物件注入service
    mainApp.service("CalcService",function(MathService){
        this.square = function(a) {  //定義服務的方法名：CalcService.square()
            return MathService.multiply(a,a); //呼叫factory物件的方法mutiply
            }
    });
    
 // 使用 provider 建立 service 定義一個方法用於計算兩數乘積
    mainApp.config(function($provide) {
       $provide.provider('MathService', function() {
          
         //rovider 中提供了一個 factory 方法 get()，它用於返回 value/service/factory
          this.$get = function() {  
             var factory = {};  
             factory.multiply = function(a, b) {
                return a * b; 
             }
             return factory;
          };
       });
    });
    
 //設定常量：用來在配置階段傳遞數值，注意這個常量在配置階段是不可用的
    mainApp.constant("configParam", "constant value");
    
    //將建立的value service物件注入控制器中
    mainApp.controller('CalcController', function($scope,defaultInput,CalcService) {
    $scope.numer=defaultInput;
    $scope.value=CalcService.square($scope.numer);  //呼叫服務的函式 
    $scope.square=function(){
        $scope.result=CalcService.square($scope.tempNum);
    };
});

效果：

【MVVM】- AngularJS 依賴注入

依賴注入(Dependency Injection)：，一個或更多的依賴（或服務）

循序漸進學.Net Core Web Api開發系列【11】：依賴注入

系列目錄一、概述本篇介紹如何採用依賴注入的方式建立和使用物件，主要從應用層面進行描述，不涉及具體的內部原理。二、演練假設要做一個日誌服務的類，它實現在控制檯打印出帶時間資訊的日誌資訊。首先定義該服務的介面與實現類。 public interface ILogSe

依賴注入那些事兒【3】之依賴注入那些事兒

上面我們從需求背景的角度，講述了依賴注入的來源和定義。但是，如果依賴注入僅僅就只有這麼點東西，那也沒有什麼值得討論的了。但是，上面討論的僅僅是依賴注入的內涵，其外延還是非常廣泛的，從依賴注入衍生出了很多相關的概念與技術，下面我們討論一下依賴注入的“那些事兒”。 3.1 依賴

【Spring】Spring依賴注入與控制反轉理解

Spring是一個龐大的框架，封裝了很多成熟的功能，能夠讓我們無需重複造輪子；其次，它使用IOC進行依賴管理，利用JAVA的反射機制，將例項的初始化交給Spring，Spring可以通過配置檔案管理例項，我們就不用自己初始化例項啦。有人會問 “那我們可以直接

【MVVM】- AngularJS 過濾器用法

過濾器作用：對model的資料進行加工，按照相應的格式進行顯示 AngularJS

【MVVM】- AngularJS $scope 用法

Scope(作用域) 是應用在 HTML (檢視) 和 JavaScript (控

【MVVM】- AngularJS 原生API

ANgularJS 原生函式 angular.lowercase() 轉換

【MVVM】- AngularJS 服務應用

AngularJS 服務基本用法 AngularJS 中，服務是一個函式或物件，可

【MVVM】- AngularJS ng-repeat 指令

外觀介面 <body ng-app=""> <

【MVVM】- AngularJS 下拉框操作

AngularJS 下拉框基礎應用外觀介面 <div ng-app=&qu

【MVVM】- AngularJS基礎學習

Angular JS AngularJS 基礎入門案例外觀頁面 <!--

【轉】【WPF】關於依賴屬性的ValidateValueCallback,PropertyChangedCallback和CoerceValueCallback的執行順序

value read ado args cep img 強制轉換 .cn clas 三個回調對應依賴屬性的驗證過程，改變過程和強制轉換過程。 class Dobj : DependencyObject { //依賴屬性包裝 public int MyPro

【轉載】Maven依賴中的scope詳解

lan 無需而已 ref targe 周期包含配置 com Maven的一個哲學是慣例優於配置(Convention Over Configuration), Maven默認的依賴配置項中，scope的默認值是compile，項目中經常傻傻的分不清，直接默認了。今天梳

【總結】angularJs的一些用法

1、ng-true-value 當我們點選checkbox 選中複選框時，ng-model 的繫結預設值是true，取消選中時為false. <input ng-model="checkboxModel" type="checkbox" >//選中時，checkboxModel

【TestNG】TestNG依賴測試詳解

一、TestNG安裝與基本使用參考部落格https://blog.csdn.net/df0128/article/details/83243822；二、TestNG依賴的使用 TestNG支援用例或者組之間的依賴。雖然我們有多種@Before可以使用，看起來和依賴效果一樣，

AngularJs依賴注入的一個錯誤，程式碼不報錯但程式碼也一句都不執行

百度找來找去沒找到答案，最後想到還是去看看官方文件吧結果：順序必須完全一致，我檢查來檢查去沒想到是這個問題。以後找不到bug產生的原因多看看文件吧。。。又出現bug了，接著上面那個bug來，改完上面那個bug後chrome報錯了 TypeError: $cookies.

【原創】利用“程序注入”實現無檔案不死webshell

引子上週末，一個好兄弟找我說一個很重要的目標shell丟了，這個shell之前是通過一個S2程式碼執行的漏洞拿到的，現在漏洞還在，不過web目錄全部不可寫，問我有沒有辦法搞個webshell繼續做內網。正好我之前一直有個通過“程序注入”來實現記憶體webshell的想法，於是就趁這個機會以Java為例做

【總結】AngularJs的UI元件ui-Bootstrap

引入 <script src="/Scripts/angular.js"></script> <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></scrip

【Spring】xml配置注入方式

spring有多種依賴注入的形式，下面僅介紹spring通過xml進行IOC配置的方式：一、Setter注入 set注入是最簡單常用的注入方式 package com.lhk.spring.de

【Java】不依賴第三方庫傳送post請求

原始碼取自某簡訊平臺，不依賴第三方庫，無異常處理程式碼，僅供參考 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.P

【MVVM】- AngularJS 依賴注入

相關推薦