AngularJsの動的ロードモジュールと依存性注入の詳細解説

ホームページ

ウェブフロントエンド

jsチュートリアル

AngularJsの動的ロードモジュールと依存性注入の詳細解説_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:20 PM

angularjs 依存性注入

早速、本題に入りましょう...

まず、ファイル構造を見てみましょう:

Angular-ocLazyLoad           --- demo文件夹
  Scripts               --- 框架及插件文件夹
    angular-1.4.7          --- angular 不解释
    angular-ui-router        --- uirouter 不解释
    oclazyload           --- ocLazyload 不解释
    bootstrap            --- bootstrap 不解释
    angular-tree-control-master   --- angular-tree-control-master 不解释
    ng-table            --- ng-table 不解释
    angular-bootstrap        --- angular-bootstrap 不解释
  js                 --- js文件夹 针对demo写的js文件
    controllers           --- 页面控制器文件夹
      angular-tree-control.js   --- angular-tree-control控制器代码
      default.js         --- default控制器代码
      ng-table.js         --- ng-table控制器代码
    app.config.js          --- 模块注册及配置代码
    oclazyload.config.js      --- 加载模块配置代码
    route.config.js         --- 路由配置及加载代码
  views                --- html页面文件夹
    angular-tree-control.html    --- angular-tree-control插件的效果页面
    default.html          --- default页面
    ng-table.html          --- ng-table插件效果页面
    ui-bootstrap.html        --- uibootstrap插件效果页面
  index.html             --- 主页面

ログイン後にコピー

注: このデモではネストされたルーティングは実装されていませんが、効果を示すためにシングルビュールーティングを実装しているだけです。

メインページのコードを見てみましょう:

<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="Scripts/bootstrap/dist/css/bootstrap.min.css" />
  <script src="Scripts/angular-1.4.7/angular.js"></script>
  <script src="Scripts/angular-ui-router/release/angular-ui-router.min.js"></script>
  <script src="Scripts/oclazyload/dist/ocLazyLoad.min.js"></script>
  <script src="js/app.config.js"></script>
  <script src="js/oclazyload.config.js"></script>
  <script src="js/route.config.js"></script>
</head>
<body>
<div ng-app="templateApp">
  <div>
    <a href="#/default">主页</a>
    <a href="#/uibootstrap" >ui-bootstrap</a>
    <a href="#/ngtable">ng-table</a>
    <a href="#/ngtree">angular-tree-control</a>
  </div>
  <div ui-view></div>
</div>
</body>
</html>

ログイン後にコピー

このページでは、bootstrap の css、angular の js、ui-router の js、ocLazyLoad の js、および 3 つの設定された js ファイルのみをロードしました。
4 ページの HTML コードをもう一度見てください:

angular-tree-control エフェクトページ

<treecontrol tree-model="ngtree.treeData" class="tree-classic ng-cloak" options="ngtree.treeOptions">
  {{node.title}}
</treecontrol>

ログイン後にコピー

このページにはプラグインの使用方法が記載されています。

デフォルトページ

<div class="ng-cloak">
  {{default.value}}
</div>

ログイン後にコピー

ここでは、default.js が正しく読み込まれて実行されていることを証明するためにこれを使用するだけです。

NG テーブルエフェクトページ

<div class="ng-cloak">
  <div class="p-h-md p-v bg-white box-shadow pos-rlt">
    <h3 class="no-margin">ng-table</h3>
  </div>
  <button ng-click="ngtable.tableParams.sorting({})" class="btn btn-default pull-right">Clear sorting</button>
  <p>
    <strong>Sorting:</strong> {{ngtable.tableParams.sorting()|json}}
  </p>
  <table ng-table="ngtable.tableParams" class="table table-bordered table-striped">
    <tr ng-repeat="user in $data">
      <td data-title="'Name'" sortable="'name'">
        {{user.name}}
      </td>
      <td data-title="'Age'" sortable="'age'">
        {{user.age}}
      </td>
    </tr>
  </table>
</div>

ログイン後にコピー

ここでは、簡単な NG テーブル効果をいくつか紹介します。

ui-bootstrap エフェクトページ

<span uib-dropdown class="ng-cloak">
  <a href id="simple-dropdown" uib-dropdown-toggle>
    下拉框触发
  </a>
  <ul class="uib-dropdown-menu dropdown-menu" aria-labelledby="simple-dropdown">
    下拉框内容.这里写个效果证明实现动态加载即可
  </ul>
</span>

ログイン後にコピー

ここでは、プラグインが正しくロードされ使用されていることを証明するために、ドロップダウンボックスの効果のみが記述されています。
さて、HTML を読んだ後、読み込み設定とルーティング設定を見てみましょう:

"use strict"
var tempApp = angular.module("templateApp",["ui.router","oc.lazyLoad"])
.config(["$provide","$compileProvider","$controllerProvider","$filterProvider",
        function($provide,$compileProvider,$controllerProvider,$filterProvider){
          tempApp.controller = $controllerProvider.register;
          tempApp.directive = $compileProvider.register;
          tempApp.filter = $filterProvider.register;
          tempApp.factory = $provide.factory;
          tempApp.service =$provide.service;
          tempApp.constant = $provide.constant;
        }]);

ログイン後にコピー

上記のコードは、ui.router と oc.LazyLoad のみに依存してモジュールを登録します。設定は後続のjsがtempApp上のメソッドを認識できるようにモジュールを単純に設定するだけです。
次に、ocLazyLoad ロードモジュールの構成を見てみましょう:

"use strict"
tempApp
.constant("Modules_Config",[
  {
    name:"ngTable",
    module:true,
    files:[
      "Scripts/ng-table/dist/ng-table.min.css",
      "Scripts/ng-table/dist/ng-table.min.js"
    ]
  },
  {
    name:"ui.bootstrap",
    module:true,
    files:[
      "Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"
    ]
  },
  {
    name:"treeControl",
    module:true,
    files:[
      "Scripts/angular-tree-control-master/css/tree-control.css",
      "Scripts/angular-tree-control-master/css/tree-control-attribute.css",
      "Scripts/angular-tree-control-master/angular-tree-control.js"
    ]
  }
])
.config(["$ocLazyLoadProvider","Modules_Config",routeFn]);
function routeFn($ocLazyLoadProvider,Modules_Config){
  $ocLazyLoadProvider.config({
    debug:false,
    events:false,
    modules:Modules_Config
  });
};

ログイン後にコピー

ルーティング構成:

"use strict"
tempApp.config(["$stateProvider","$urlRouterProvider","$locationProvider",routeFn]);
function routeFn($stateProvider,$urlRouterProvider,$locationProvider){
  $urlRouterProvider.otherwise("/default");
  $stateProvider
  .state("default",{
    url:"/default",
    views:{
      "":{
        templateUrl:"views/default.html",
        controller:"defaultCtrl",
        controllerAs:"default"
      }
    },
    resolve:{
      deps:["$ocLazyLoad",function($ocLazyLoad){
        return $ocLazyLoad.load("js/controllers/default.js");
      }]
    }
  })
  .state("uibootstrap",{
    url:"/uibootstrap",
    views:{
      "":{
        templateUrl:"views/ui-bootstrap.html"
      }
    },
    resolve:{
      deps:["$ocLazyLoad",function($ocLazyLoad){
        return $ocLazyLoad.load("ui.bootstrap");
      }]
    }
  })
  .state("ngtable",{
    url:"/ngtable",
    views:{
      "":{
        templateUrl:"views/ng-table.html",
        controller:"ngTableCtrl",
        controllerAs:"ngtable"
      }
    },
    resolve:{
      deps:["$ocLazyLoad",function($ocLazyLoad){
        return $ocLazyLoad.load("ngTable").then(
          function(){
            return $ocLazyLoad.load("js/controllers/ng-table.js");
          }
        );
      }]
    }
  })
  .state("ngtree",{
    url:"/ngtree",
    views:{
      "":{
        templateUrl:"views/angular-tree-control.html",
        controller:"ngTreeCtrl",
        controllerAs:"ngtree"
      }
    },
    resolve:{
      deps:["$ocLazyLoad",function($ocLazyLoad){
        return $ocLazyLoad.load("treeControl").then(
          function(){
            return $ocLazyLoad.load("js/controllers/angular-tree-control.js");
          }
        );
      }]
    }
  })
};

ログイン後にコピー

ui-bootstrap のドロップダウンボックスの簡単な実装にはコントローラーは必要ないので、ng-table と angular-tree-control のコントローラー js を見てみましょう。

ng-table.js

(function(){
"use strict"
tempApp
.controller("ngTableCtrl",["$location","NgTableParams","$filter",ngTableCtrlFn]);
function ngTableCtrlFn($location,NgTableParams,$filter){
  var vm = this;
  //数据
  var data = [{ name: "Moroni", age: 50 },
         { name: "Tiancum ", age: 43 },
         { name: "Jacob", age: 27 },
         { name: "Nephi", age: 29 },
         { name: "Enos", age: 34 },
         { name: "Tiancum", age: 43 },
         { name: "Jacob", age: 27 },
         { name: "Nephi", age: 29 },
         { name: "Enos", age: 34 },
         { name: "Tiancum", age: 43 },
         { name: "Jacob", age: 27 },
         { name: "Nephi", age: 29 },
         { name: "Enos", age: 34 },
         { name: "Tiancum", age: 43 },
         { name: "Jacob", age: 27 },
         { name: "Nephi", age: 29 },
         { name: "Enos", age: 34 }];
  vm.tableParams = new NgTableParams(  // 合并默认的配置和url参数
    angular.extend({
      page: 1,      // 第一页
      count: 10,     // 每页的数据量
      sorting: {
        name: 'asc'   // 默认排序
      }
    },
    $location.search())
    ,{
      total: data.length, // 数据总数
      getData: function ($defer, params) {
        $location.search(params.url()); // 将参数放到url上，实现刷新页面不会跳回第一页和默认配置
        var orderedData = params.sorting &#63;
            $filter('orderBy')(data, params.orderBy()) :data;
        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
      }
    }
  );
};
})();

ログイン後にコピー

angular-tree-control.js

(function(){
"use strict"
tempApp
.controller("ngTreeCtrl",ngTreeCtrlFn);
function ngTreeCtrlFn(){
  var vm = this;
  //树数据
  vm.treeData = [
        {
          id:"1",
          title:"标签1",
          childList:[
            {
              id:"1-1",
              title:"子级1",
              childList:[
                {
                  id:"1-1-1",
                  title:"再子级1",
                  childList:[]
                }
              ]
            },
            {
              id:"1-2",
              title:"子级2",
              childList:[
                {
                  id:"1-2-1",
                  title:"再子级2",
                  childList:[
                    {
                      id:"1-2-1-1",
                      title:"再再子级1",
                      childList:[]
                    }
                  ]
                }
              ]
            },
            {
              id:"1-3",
              title:"子级3",
              childList:[]
            }
          ]
        },
        {
          id:"2",
          title:"标签2",
          childList:[
            {
              id:"2-1",
              title:"子级1",
              childList:[]
            },
            {
              id:"2-2",
              title:"子级2",
              childList:[]
            },
            {
              id:"2-3",
              title:"子级3",
              childList:[]
            }
          ]}
        ,
        {
          id:"3",
          title:"标签3",
          childList:[
            {
              id:"3-1",
              title:"子级1",
              childList:[]
            },
            {
              id:"3-2",
              title:"子级2",
              childList:[]
            },
            {
              id:"3-3",
              title:"子级3",
              childList:[]
            }
          ]
        }
      ];
  //树配置
  vm.treeOptions = {
   nodeChildren:"childList",
    dirSelectable:false
  };
};
})();

ログイン後にコピー

default.js は無視しましょう。結局のところ、そこには「Hello World」しかありません。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7679

CakePHP チュートリアル

1393

C# チュートリアル

1209

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

Related knowledge

Angular での依存関係の挿入を理解するためのステップバイステップガイド Dec 02, 2022 pm 09:14 PM

この記事では、依存性注入について説明し、依存性注入によって解決される問題とそのネイティブの記述方法を紹介し、Angular の依存性注入フレームワークについて説明します。

Phalconフレームワークで依存関係注入(Dependency Injection)を使用する方法 Jul 30, 2023 pm 09:03 PM

Phalcon フレームワークで依存関係注入 (DependencyInjection) を使用する方法の紹介: 現代のソフトウェア開発では、依存関係注入 (DependencyInjection) は、コードの保守性とテスト容易性を向上させることを目的とした一般的な設計パターンです。高速かつ低コストの PHP フレームワークである Phalcon フレームワークは、アプリケーションの依存関係を管理および整理するための依存関係注入の使用もサポートしています。この記事では、Phalcon フレームワークの使用方法を紹介します。

入門から習得まで、2022 年の最新 5 つの angularjs チュートリアル Jun 15, 2017 pm 05:50 PM

Javascript は、コードの構成、コードのプログラミングパラダイム、およびオブジェクト指向理論の点で非常にユニークな言語です。しかし、JavaScript が 20 年間主流であったとはいえ、jQuery、Angularjs、さらには React などの人気のあるフレームワークを理解したい場合は、「Black Horse Cloud Classroom JavaScript Advanced Framework」を見てください。デザインビデオチュートリアル」。

Golang 関数パラメータ渡しにおける依存性注入パターン Apr 14, 2024 am 10:15 AM

Go では、依存関係注入 (DI) モードは、値の受け渡しやポインターの受け渡しなど、関数パラメーターの受け渡しを通じて実装されます。 DI パターンでは、依存関係は通常、分離を改善し、ロック競合を軽減し、テスト容易性をサポートするためにポインターとして渡されます。ポインターを使用すると、関数はインターフェイスの種類にのみ依存するため、具体的な実装から切り離されます。また、ポインターの受け渡しにより、大きなオブジェクトを渡す際のオーバーヘッドが削減されるため、ロックの競合が軽減されます。さらに、DI パターンでは依存関係を簡単にモックできるため、DI パターンを使用した関数の単体テストを簡単に作成できます。

PHP と AngularJS を使用して応答性の高い Web サイトを構築し、高品質のユーザーエクスペリエンスを提供します Jun 27, 2023 pm 07:37 PM

今日の情報化時代において、ウェブサイトは人々が情報を入手し、コミュニケーションを図るための重要なツールとなっています。レスポンシブな Web サイトはさまざまなデバイスに適応し、ユーザーに高品質のエクスペリエンスを提供できます。これは、現代の Web サイト開発のホットスポットとなっています。この記事では、PHP と AngularJS を使用して応答性の高い Web サイトを構築し、高品質のユーザーエクスペリエンスを提供する方法を紹介します。 PHP の概要 PHP は、Web 開発に最適なオープンソースのサーバー側プログラミング言語です。 PHP には、学びやすさ、クロスプラットフォーム、豊富なツールライブラリ、開発効率など、多くの利点があります。

JUnit 単体テストフレームワークを使用した依存関係の注入 Apr 19, 2024 am 08:42 AM

JUnit を使用した依存関係注入のテストの概要は次のとおりです。モックオブジェクトを使用して依存関係を作成します。 @Mock アノテーションを使用して、依存関係のモックオブジェクトを作成できます。テストデータの設定: @Before メソッドは各テストメソッドの前に実行され、テストデータの設定に使用されます。モックの動作を構成する: Mockito.when() メソッドは、モックオブジェクトの予期される動作を構成します。結果の検証:assertEquals() は、実際の結果が期待値と一致するかどうかを確認するためにアサートします。実際の応用: 依存関係注入フレームワーク (Spring Framework など) を使用して依存関係を注入し、JUnit 単体テストを通じて注入の正確さとコードの正常な動作を検証できます。

Go 言語: 依存性注入ガイド Apr 07, 2024 pm 12:33 PM

回答: Go 言語では、インターフェイスと構造を通じて依存関係の注入を実装できます。依存関係の動作を記述するインターフェイスを定義します。このインターフェースを実装する構造体を作成します。インターフェイスを介して関数のパラメーターとして依存関係を注入します。テストやさまざまなシナリオで依存関係を簡単に置き換えることができます。

PHPでの依存関係注射（DI）の概念を説明します。 Apr 05, 2025 am 12:07 AM

PHPで依存関係注入（DI）を使用することのコア値は、ゆるく結合されたシステムアーキテクチャの実装にあります。 DIは、依存関係を外部的に提供することにより、クラス間の直接的な依存関係を削減し、コードのテスト可能性と柔軟性を向上させます。 DIを使用する場合、コンストラクター、セットポイントメソッド、またはインターフェイスを介して依存関係を注入し、IOCコンテナと組み合わせてオブジェクトのライフサイクルと依存関係を管理できます。

See all articles

AngularJsの動的ロードモジュールと依存性注入の詳細解説_AngularJS

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック