최근 에이 프로젝트는 매우 바쁘다. 나는 낮에 일하러 가야하고 밤에 돌아와야하지만 여전히 동료들을 위해 각도 지식 포인트 ppt를해야합니다. 결국, 나는 연말에 사임 할 것이며, 누군가는 여전히 프로젝트의 후속 개발을 인수해야하므로 밤에는 공부 시간이 걸립니다. 이 타사 플러그인에 대한 연구 노트를 작성하지는 않았지만 주문시 모듈을로드하고 성공적으로 사용하는 것이 실제로 이점이라고 생각합니다. 이 짐승은 심층적으로 요구 사항을 사용하지 않았 으므로이 짐승은 이것과 요구 사항의 차이를 알지 못하며, 이것이 앵귤러의 주문형 적재로 간주되는지 명확하게 설명 할 수 없습니다.
이 연구 노트 지식 포인트의 효과를 달성하려면 다음을 사용해야합니다.
Angular : https : //github.com/angular/angular.js
UI-Router : https : //github.com/angular-ui/ui-router
oclazyload : https : //github.com/ocombe/oclazyload
더 이상 고민하지 않고, 나는 요점에 도달 할 것이다 ...
먼저 파일 구조를 살펴 보겠습니다.
Angular-Oclazyload --- 데모 폴더 스크립트 --- 프레임 워크 및 플러그인 폴더 Angular-1.4.7 --- Angular angular-ui-router --- uirouter를 설명하지 않음 Oclazyload를 설명하지 않음 --- Oclazyload는 Bootstrap을 설명하지 않음 --- Bootspreat-master를 설명하지 말아야합니다. Angular-Bootstrap --- Angular-Bootstrap은 JS를 설명하지 않음 --- JS 폴더 js 파일 --- 페이지 컨트롤러 폴더 angular-tree-control.js --- angular-tree-control code code default.js ----------- ng-table 컨트롤러 코드 app.js-- registration and registration 및 구성 코드. Oclazyload.config.js ---로드 모듈 구성 코드 Route.config.js --- 경로 구성 및로드 코드 뷰 --- HTML 페이지 폴더 각도-트리-콘트롤 .html --- 각도-트리-콘트롤 플러그인 효과 페이지 default.html --------- 보트 plugt. --- uibootstrap 플러그인 효과 페이지 index.html --- 메인 페이지
참고 :이 데모는 중첩 라우팅을하지 않으며 단순히 단순히 단일 뷰 라우팅을 구현하여 효과를 보여줍니다.
메인 페이지의 코드를 살펴 보겠습니다.
<! doctype html> <html lang = "en"xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta charset = "utf-8"/> <title> </title> <link rel = "Stylesheet" href = "스크립트/bootstrap/dist/css/bootstrap.min.css"/> <script src = "scripts/angular-1.4.7/angular.js"> </script> <script src = "스크립트/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 src = "js/rout.config.js"> </script> </head> <body> <div ng-app = "templateapp"> <div> <a href = "#/default"> home </a> <a href = "#/uibootstrap"> ui-boottrap </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"옵션 = "ngtree.treeoptions"> {{node.title}} </treecontrol>페이지에 플러그인을 사용하라는 명령이 있습니다.
기본 페이지
<div> {{default.value}} </div>여기서 우리는 단지 그것을 사용하여 로딩 및 기본값을 올바르게 입증한다는 것을 증명하고 있습니다.
ng-table 효과 페이지
<div> <div> <h3> ng-table </h3> </div> <button ng-click = "ngtable.tableparams.sorting ({})"> 클리어 분류 </button> <p> <strong> 정렬 : </strong> {{ngtable.tableparams.sorting () </p> <table ng-table = "ngtable.tableparams"> <tr ng-repeat = "$ data in $ data"> <td data-title = " 'name'"sortable = " 'name'"> {{user.name}} </td> <td data-title = " 'age'" ''age ' "> {user.age}}}}} </테이블> </div>다음은 간단한 NG 테이블 효과가 있습니다.
UI-Bootstrap 효과 페이지
<span uib-dropdown> <a href id = "simple-dropdown"uib-dropdown-toggle> 풀다운 상자 트리거 </a> <ul aria-labelledby = "simple-dropdown"> 풀다운 상자 컨텐츠. 동적 하중을 달성하기 위해 효과 증거를 작성하십시오 </ul> </span>
다음은 플러그인이 올바르게로드되어 사용되었음을 증명하기위한 드롭 다운 박스 효과 만 있습니다.
자, HTML을 읽은 후로드 구성 및 라우팅 구성을 살펴 보겠습니다.
"엄격한"var tempapp = angular.module ( "templateapp", [ "ui.router", "oc.lazyload"). config ([ "$ provery", "$ compileprovider", "$ controllerprovider", "$ filterprovider", "$ filetprovider, $ filterprovider, $ fileterprovider) tempapp.controller.
위의 코드는 모듈 등록의 경우 UI.router 및 Oc.lazyload에만 의존합니다. 구성은 후속 JS가 Tempapp에서 메소드를 인식 할 수 있도록 모듈을 구성하도록 단순히 구성됩니다.
그런 다음 Oclazyload 부하 모듈의 구성을 살펴 보겠습니다.
"tempapp.constant 사용" "스크립트/Angular-Bootstrap/UI-Bootstrap-tpls-0.14.3.min.js"]}, {이름 : "treecontrol", module : true, 파일 : [ "스크립트/앵글 트리 콘트롤-마스터/css/tree-control.css", "스크립트/앵글 트리-제어 마스터/CSS/Tree-Control-Attribute.css", "스크립트/앵글 트리-컨트롤-마스터/앵글 트리-콘트롤 .js"]). config ([ "$ oclazyloadprovider", "modles_config"); lourdefn ($ oclazyloadprovider, modules_config) {$ oclazyloadprovider.config ({debug : false, events : false, modules : modules_config});};라우팅 구성 :
"Strict"Tempapp.config 사용 ([ "$ StateProvider", "$ urlRouterProvider", Routefn]; function Routefn ($ StateProvider, $ urlRouterProvider) {$ urlRouterProvider.otherwise ( "/default"); $ stateProvider .state ( "default", {url : "/default", templateUrl : "views/default.html", 컨트롤러 : "defaultCtrl", 컨트롤러 : "기본값", Resolve : {deps : [ "$ oclazyload ($ aclazyload) {retoy $ oclazyl load.load ("Js/Controllers "); }]}})) .state ( "uibootstrap", {url : "/uibootstrap", templateUrl : "views/ui-bootstrap.html", resolve : {deps : [ "$ oclazyload") .state ( "ngtable", {url : "/ngtable", templateUrl : "views/ng-table.html", 컨트롤러 : "ngtablectrl", 컨트롤러 : "ngtable", devs : [ "$ oclazyload", function ($ oclazyload) function () {return $ oclazyload.load ( "js/컨트롤러/ng-table.js"); "ngtree", {url : "/ngtree", "views/angular-tree-control.html" {deps : [ "$ oclazyload", function ($ oclazyload) {return $ oclazyload.load ( "treecontrol").UI-Bootstrap의 드롭 다운 상자의 간단한 구현에는 컨트롤러가 필요하지 않으므로 NG- 테이블 및 각도 트리 제어의 컨트롤러 JS 만 살펴 보겠습니다.
ng-table.js
(function () { "strict"tempapp.controller 사용 "Tiancum", Age : 43}, {이름 : "Jacob", Age : 27}, {이름 : "nephi", age : 29}, {name : "enos", age : 34}, {이름 : "tiancum", age : 43}, {Jacob ", Age : 27}, {nephi", nephi " "enos", age : 34}, {이름 : "tiancum", 나이 : 43}, {이름 : "Jacob", Age : 27}, {이름 : "nephi", age : 29}, {이름 : "enos", age : 34}, {이름 : "tiancum", age : 43}, {Jacob ", : 27} "Nephi", Age : 29}, {이름 : "Enos", Age : 34}]; this.tableParams = 기본 구성 및 URL 매개 변수를 합병합니다. $ location.search ()), {total : data.length, // 총 데이터 GetData : function ($ defer, params) {$ location.search (params.url ()); $ defer.resolve (ordereddata.slice ((params.page () -1) * params.count () * params.count ());}) ();angular-tree-control.js
(function () { "Strict"tempapp.controller 사용 ( "ngtreectrl", ngtreectrlfn); 함수 ngtreectrlfn () {// tree data this.treedata = [{id : "1", 제목 : "tag1", childlist : [id id : "1-1", child1 ", 제목 : "child1", Childrist : [{id : "1-1-1", 제목 : "child1", Childrist : [{id : "1-2", 제목 : "child2", Childrist : [{id : "1-2-1", "child2", Childrist : [{id : "1-2-1", "childr ist : [id : 1-1-1" Childrist : []}]}]}, {id : "1-3", 제목 : "자식 레벨 3", 자녀 목록 : []}], {id : "2", 제목 : "tag 2", Childrist : [{id : "2-1", 제목 : "Childlist : []}, {2-2", "2-2", "2-2", "2-1", "2-1", "2-1" ID : "3-1", 제목 : "child1", Childrist : []}, {id : "3-2", 제목 : "child2", childrist : []}, {id : "3-3", "childrist : []}]}]; };};}) ();Default.js를 무시해 봅시다. 결국에는 "Hello Wrold"만 있습니다.
github url : https://github.com/program-monkey/angular-oclazyload-demo
위는 AngularJS 동적 로딩 모듈 및 종속성에 대한 정보 모음입니다. 우리는 향후 관련 정보를 계속 추가 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!