简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

AngularJs はモジュールと依存関係を動的にロードします

高洛峰
リリース： 2017-03-25 16:11:57
オリジナル
1375 人が閲覧しました

最近、プロジェクトでとても忙しく、夕方に戻ってきたら、同僚のために Angular のナレッジ ポイントをまとめた ppt を作成する必要があります。年末ですが、まだ誰かがプロジェクトのフォローアップ開発を引き継ぐ必要があるため、夕方に勉強する時間が取られます。当初、これらのサードパーティ プラグインについて学習メモを書くつもりはありませんでしたが、オンデマンドでモジュールをロードしてうまく使用できることは確かに利点だと思うので、記録しておこうと思います。 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-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             --- 主页面
ログイン後にコピー

注: このデモにはネストされたルーティングを行う必要はありません。効果を示すためにシングルビュー ルーティングを実装するだけです。

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
<p ng-app="templateApp">
  <p>
    <a href="#/default">主页</a>
    <a href="#/uibootstrap" >ui-bootstrap</a>
    <a href="#/ngtable">ng-table</a>
    <a href="#/ngtree">angular-tree-control</a>
  </p>
  <p ui-view></p>
</p>
</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>
ログイン後にコピー

このページには、プラグインを使用するための対応する手順があります。

デフォルトページ

<p class="ng-cloak">
   {{default.value}}
 </p>
ログイン後にコピー

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

ng-table エフェクト ページ

<p class="ng-cloak">
  <p class="p-h-md p-v bg-white box-shadow pos-rlt">
    <h3 class="no-margin">ng-table</h3>
  </p>
  <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="&#39;Name&#39;" sortable="&#39;name&#39;">
        {{user.name}}
      </td>
      <td data-title="&#39;Age&#39;" sortable="&#39;age&#39;">
        {{user.age}}
      </td>
    </tr>
  </table>
</p>
ログイン後にコピー

ここでは、簡単な 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",
    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",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: &#39;asc&#39;   // 默认排序
      }
    },
    $location.search())
    ,{
      total: data.length, // 数据总数
      getData: function ($defer, params) {
        $location.search(params.url()); // 将参数放到url上，实现刷新页面不会跳回第一页和默认配置
        var orderedData = params.sorting ?
            $filter(&#39;orderBy&#39;)(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 World」しかありません。

AngularJs の動的に読み込まれるモジュールと依存関係に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

関連記事:

AngularJSは動的コンパイルとdomへの追加のメソッドを実装

AngularJSはdivのIDを動的に生成する

AngularJSは動的に生成された要素にイベントをバインドするメソッドを実装

関連ラベル：
AngularJs 动态加载模块 依赖
ソース：php.cn
前の記事：Node.jsにおけるパス処理モジュールのパスの詳細説明 次の記事：RequireJS ライブラリを使用した JavaScript モジュールのロードに関するチュートリアルの例
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1765
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
1905
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1624
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1531
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1570
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！