English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホーム
  3. 経験ノート
  4. 本文

AngularJsのモジュールと依存関係の動的ロード

最近プロジェクトが忙しく、昼間は仕事をしているし、夜には同僚にAngularの知識ポイントのプレゼンテーションを作成する必要があります。結局、年末に辞めることになるので、プロジェクトの後続開発には誰かが引き継ぐ必要があります。だから、夜の学習時間を使っています。これらのサードパーティプラグインの学習ノートを書くことを当初は考えていませんでしたが、必要に応じてモジュールをロードし、成功した場合は本当に良い利点だと思い、記録しました。この動物はrequireJsをあまり使いませんので、この動物はこれとrequireJsの違いがわかりませんし、Angularの按需ロードと本当に呼ぶかどうか明確に説明できません。

この学習ノートの効果を実現するために、以下が必要です：

angular:https://github.com/angular/angular.js

ui-router:https://github.com/angular-ui/ui-router

ocLazyLoad:https://github.com/ocombe/ocLazyLoad

話は長くならない、本題に入りましょう...

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

Angular-ocLazyLoad           --- demoフォルダー
  Scripts               --- フレームワークおよびプラグインフォルダー
    angular-1.4.7          --- angular 説明不要
    angular-ui-router        --- uirouter 説明不要
    oclazyload           --- ocLazyload 説明不要
    bootstrap            --- bootstrap 説明不要
    angular-tree-コントロール-マスター   --- angular-tree-コントロール-master 説明不要
    ng-table            --- ng-テーブル 説明不要
    angular-bootstrap        --- angular-bootstrap 説明不要
  js                 --- jsフォルダー デモ用に書かれたjsファイル
    controllers           --- ページコントローラーフォルダー
      angular-tree-control.js   --- angular-tree-コントロールコントローラーコード
      default.js         --- defaultコントローラーコード
      ng-table.js         --- ng-テーブルコントローラーコード
    app.config.js          --- モジュール登録および設定コード
    oclazyload.config.js      --- モジュール設定ロードコード
    route.config.js         --- ルート設定およびロードコード
  views                --- HTMLページフォルダー
    angular-tree-control.html    --- angular-tree-コントロールプラグイン効果ページ
    default.html          --- defaultページ
    ng-table.html          --- ng-テーブルプラグイン効果ページ
    ui-bootstrap.html        --- uibootstrapプラグイン効果ページ
  index.html             --- ホームページ

注意：このデモはネストされたルートは実装されていません。単一のビューのルートを実装して効果を示すだけです。

ホームページのコードを見てみましょう：

<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">-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ファイル。

さらに、四つのページのHTMLコードを見てみましょう：

angular-tree-control効果ページ

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

このページには、プラグインに対応するコマンドが使用されています。

defaultページ

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

ここでは、default.jsがロードされ、正しく実行されることを証明するために使われているだけです。

ng-table効果ページ

<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">ソートをクリア</button>
  <p>
    <strong>ソート:</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="[#1#]" sortable="'name'">
        {{user.name}}
      </td>
      <td data-title="[#2#]" sortable="'age'">
        {{user.age}}
      </td>
    </tr>
  </table>
</div>

ここには簡単なng-table効果。

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.directive;
          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",
    モジュール:true,
    ファイル:[
      "スクリプトス/ng-table/dist/ng-table.min.css",
      "スクリプトス/ng-table/dist/ng-table.min.js"
    ]
  },
  {
    name: "ui.bootstrap",
    モジュール:true,
    ファイル:[
      "スクリプトス/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"
    ]
  },
  {
    name: "treeControl",
    モジュール:true,
    ファイル:[
      "スクリプトス/angular-tree-コントロール-マスター/css/tree-control.css",
      "スクリプトス/angular-tree-コントロール-マスター/css/tree-コントロール-attribute.css",
      "スクリプトス/angular-tree-コントロール-マスター/angular-tree-control.js"
    ]
  }
]);
.config(["$ocLazyLoadProvider","Modules_Config",routeFn]);
function routeFn($ocLazyLoadProvider,Modules_Config){
  $ocLazyLoadProvider.config({
    デバッグ:false,
    イベント:false,
    モジュール:Modules_Config
  });
};

ルートの設定：

"use strict"
tempApp.config(["$stateProvider","$urlRouterProvider",routeFn]);
function routeFn($stateProvider,$urlRouterProvider){
  $urlRouterProvider.otherwise("/default");
  $stateProvider
  .state("default",{
    url:"/default",
    templateUrl:"views/default.html",
    controller:"defaultCtrl",
    controllerAs:"default",
    resolve:{
      deps:["$ocLazyLoad",function($ocLazyLoad){
        return $ocLazyLoad.load("js/controllers/default.js");
      }]
    } 
  })
  .state("uibootstrap",{
    url:"/uibootstrap",
    templateUrl:"views/ui-bootstrap.html",
    resolve:{
      deps:["$ocLazyLoad",function($ocLazyLoad){
        return $ocLazyLoad.load("ui.bootstrap");
      }]
    } 
  })
  .state("ngtable",{
    url:"/ngtable",
    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",
    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 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 );
  this.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 ?
            $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(){
  //ツリーデータ
  this.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:[]
            }
          ]
        }
      ];
  //ツリー設定
  this.treeOptions = {
    nodeChildren:"childList",
    dirSelectable:false
  };
};
})();

default.jsは無視して、そこには「Hello Wrold」だけがあるからです。

github url ： https://github.com/プログラム-Monkey/Angular-ocLazyLoad-デモ

以上がAngularJS 动的ロードモジュールと依存関係に関する情報の整理です。今後も関連する情報を追加していきますので、皆様のこのサイトへのサポートに感謝します。

声明：この記事の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、このウェブサイトは所有権を持ちません。人工的な編集は行われておらず、法的責任も負いません。著作権に抵触する可能性のある内容がある場合は、以下のメールアドレスにご連絡ください：notice#oldtoolbag.com（メールを送信する際、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認がとりついたら、このサイトは侵害される可能性のある内容をすぐに削除します。）

基礎教程
おすすめ