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

  1. 현재 위치
  2. 홈페이지
  3. 경험 노트
  4. 본문

AngularJs 모듈과 의존성 동적 로드

최근 프로젝트가 많이 바쁩니다. 낮에는 일을 해야 하고, 밤에 돌아와도 동료들에게 Angular 지식 점의 프레젠테이션을 만들어야 합니다. 결국 연말에 그만둘 것이라고 생각해도, 프로젝트의 후속 개발은 누군가가 이어받아야 합니다. 그래서 밤에 공부하는 시간을 차지했습니다. 이제까지 이러한 제3자 플러그인의 학습 노트를 쓰려고 생각하지 않았지만, 필요에 따라 모듈을 로드하고 성공적으로 사용하는 것은 좋은 점이며, 기록해 두겠습니다. 이 동물은 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 폴더 데모에 대한 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 lang="ko" 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">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="[#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",
    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: '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 World"만 있는 것입니다.

github url : https://github.com/프로그램-Monkey/Angular-ocLazyLoad-데모

이上是 AngularJS 동적 로드 모듈과 의존성 자료 정리입니다. 앞으로도 관련 자료를 계속 추가하겠습니다. 이 사이트에 대한 지원에 감사합니다!

선언: 이 문서의 내용은 인터넷에서 가져왔으며, 저작권자는 모두 소유합니다. 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 이 사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 침해가 의심되는 내용이 있으면, notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com（보고서를 작성할 때, #을 @으로 변경하십시오. 신고하고 관련 증거를 제공하시면, 사이트는 즉시 저작권 침해 내용을 제거합니다。）

기본 튜토리얼
추천 합니다