recherche

Maison >interface Web >js tutoriel >AngularJs charge dynamiquement les modules et les dépendances

AngularJs charge dynamiquement les modules et les dépendances

高洛峰
高洛峰original
2017-03-25 16:11:571413parcourir

J'ai été assez occupé avec des projets ces derniers temps. Je dois aller travailler pendant la journée, et quand je reviens le soir, je dois faire un ppt sur les points de connaissances angulaires pour mes collègues. démissionner à la fin de l'année, et quelqu'un doit encore prendre en charge le suivi du développement du projet, donc ça prend le temps d'étudier le soir. Au départ, je n'avais pas prévu d'écrire des notes d'étude sur ces plug-ins tiers, mais je pense que c'est effectivement un avantage de charger des modules à la demande et de les utiliser avec succès, alors autant les enregistrer. Comme je n'ai pas utilisé requireJs très profondément, je ne connais pas la différence entre cela et requireJs, et je ne peux pas expliquer clairement s'il s'agit du chargement à la demande d'Angular.

Afin d'obtenir l'effet de ce point de connaissance de note d'étude, nous devons utiliser :

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

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

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

Sans plus tarder, passons allons droit au but...

Tout d'abord, jetons un coup d'œil à la structure des fichiers : 

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             --- 主页面

Remarque : cette démo ne fait pas de routage imbriqué, mais implémente simplement le routage à vue unique pour montrer l'effet.

Regardons le code de la page principale : 

<!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>

Sur cette page, nous avons chargé uniquement les CSS de bootstrap, les js d'angular, les js d'ui-router, les js d'ocLazyLoad et 3 fichiers js configurés.

Regardez le code html des quatre pages :

page d'effet de contrôle d'arbre angulaire 

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

Il existe une instruction correspondante pour utiliser le plug-in sur la page.

page par défaut

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

Ici, nous l'utilisons simplement pour prouver que default.js est chargé et exécuté correctement.

Page des effets 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>

Voici quelques effets simples ng-table.

Page d'effet 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>

Seul un effet de liste déroulante est écrit ici pour prouver que le plug-in est chargé et utilisé correctement.

Bien, après avoir lu le html, jetons un œil à la configuration de chargement et à la configuration du routage : 

"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;
        }]);

L'enregistrement du module par le code ci-dessus repose uniquement sur ui.router et oc.LazyLoad. La configuration n'est qu'une simple configuration du module afin que les js suivants puissent reconnaître les méthodes sur tempApp.

Regardons ensuite la configuration du module de chargement 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
  });
};

Configuration du routage : 

"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");
          }
        );
      }]
    } 
  })
};

L'implémentation simple de la liste déroulante ui-bootstrap box ne nécessite pas de contrôleur, alors regardons simplement le contrôleur js de ng-table et angulaire-tree-control :

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
  };
};
})();

Ignorons default.js, après tout il n'y a que "Hello Wrold" dedans.

Pour plus d'articles liés aux modules et dépendances chargés dynamiquement d'AngularJs, veuillez faire attention au site Web PHP chinois !

Articles associés :

AngularJS implémente la méthode de compilation dynamique et d'ajout à dom

AngularJS génère dynamiquement l'ID de div

AngularJS implémente la méthode de liaison d'événements à des éléments générés dynamiquement

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée du chemin du module de traitement de chemin dans Node.jsArticle suivant：Explication détaillée du chemin du module de traitement de chemin dans Node.js

Articles Liés

Voir plus