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 파일만 로드했습니다.
네 페이지의 HTML 코드를 다시 한 번 살펴보세요.

앵귤러 트리 제어 효과 페이지

<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-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="'Name'" sortable="'name'">
        {{user.name}}
      </td>
      <td data-title="'Age'" 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.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 및 angle-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 Wrold"만 있습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7628

Cakephp 튜토리얼

1389

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

140

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개 Anglejs 튜토리얼 Jun 15, 2017 pm 05:50 PM

자바스크립트는 코드의 구성, 코드의 프로그래밍 패러다임, 객체지향 이론 측면에서 매우 독특한 언어입니다. 하지만 20년 동안 Javascript가 지배했음에도 불구하고 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를 사용하여 반응형 웹사이트를 구축하여 고품질 사용자 경험 제공 Jun 27, 2023 pm 07:37 PM

오늘날의 정보화 시대에 웹사이트는 사람들이 정보를 얻고 소통하는 중요한 도구가 되었습니다. 반응형 웹사이트는 다양한 기기에 적응하고 사용자에게 고품질 경험을 제공할 수 있으며, 이는 현대 웹사이트 개발에서 핫스팟이 되었습니다. 이 기사에서는 PHP와 AngularJS를 사용하여 고품질 사용자 경험을 제공하는 반응형 웹사이트를 구축하는 방법을 소개합니다. PHP 소개 PHP는 웹 개발에 이상적인 오픈 소스 서버측 프로그래밍 언어입니다. 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 버전

뜨거운 주제