Recentemente, o projeto está bastante ocupado. Eu tenho que ir trabalhar durante o dia e voltar à noite e ainda preciso fazer o PPT de ponto de conhecimento angular para meus colegas. Afinal, renunciarei no final do ano, e alguém ainda precisará assumir o desenvolvimento subsequente do projeto, por isso leva tempo para estudar à noite. Eu nunca planejei escrever notas de estudo para esses plug-ins de terceiros, mas acho que é realmente um benefício carregar o módulo sob demanda e usá-lo com sucesso, então devo gravá-lo. Como essa besta não usou requerjs em profundidade, então esse animal não sabe a diferença entre isso e requerjs e não pode explicar claramente se isso é considerado o carregamento sob demanda do Angular.
Para alcançar o efeito deste estudo, observe o ponto de conhecimento, precisamos usar:
Angular: https: //github.com/angular/angular.js
UI-ROUTER: https: //github.com/angular-ui/ui-ruter
OclazyLoad: https: //github.com/ocombe/oclazyload
Sem mais delongas, vou chegar ao ponto ...
Primeiro, vejamos a estrutura do arquivo:
Angular-ocLazyLoad --- demo folder Scripts --- Framework and plug-in folder angular-1.4.7 --- angular Not explain angular-ui-router --- uirouter Not explain oclazyload --- ocLazyload Not explain bootstrap --- bootstrap Not explain angular-tree-control-master --- angular-tree-control-master Not explain ng-table --- ng-table Not explain Angular-Bootstrap --- Angular-Bootstrap não explica os arquivos JS --- JS Pasta JS escritos para controladores de demonstração --- Página controladora do controlador angular-árvore-controle.js --- Código do controlador de controle de árvore angular. oclazyload.config.js --- Carregar o código de configuração do módulo Route.config.js --- Route Configuração e Código de carregamento Visualizações --- HTML Página Página Angular-Tree-controle.html --- Página de plug-in de Tree-Tree-Infault. --- UiBootStrap Plug-in Effect Page Index.html --- Página principal
Nota: Esta demonstração não faz roteamento aninhado, simplesmente implementa o roteamento de vista única para mostrar o efeito.
Vejamos o código da página principal:
<! Doctype html> <html lang = "en" xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta charset = "utf-8"/> </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/releplge-ui-ui-router. 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-pp = "templateApp"> <div> <a href = "#/default"> home </a> <a href = "#/uiBootstrap"> ui-bootstrap </a> href = "#/ngtree"> angular-tree-controle
Nesta página, carregamos apenas o CSS do Bootstrap, JS angular, JS-Router JS, Oclazyload JS e 3 arquivos JS configurados.
Vamos dar uma olhada no código HTML das quatro páginas:
Página de efeito de controle de árvore angular
<treecontrol árvore-model = "ngtree.treedata" options = "ngtree.treeoptions"> {{node.title}} </treecontrol>Há um comando na página para usar o plug-in.
página padrão
<div> {{default.value}} </div>Aqui estamos apenas usando -o para provar que o carregamento e executar default.js corretamente.
Página de efeito NG-TABLE
<div> <div> <h3> ng-table </h3> </div> <botão ng-click = "ngtable.tableparams.sorting ({})"> CLEAR STORNEGING </butut> <p> <strong> Classificação: </strong> {{ngtable.tableparams.sorting () | ng-table="ngtable.tableParams"> <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> </tabela> </div>Aqui estão alguns efeitos simples da tabela ng.
Página de efeito Ui-Bootstrap
<span uib-dropdown> <a href id = "simples-dropdown" uib-dropdown-toggle> gatilho da caixa pull-down </a> <ul aria-labelledby = "simples-dropdown"> conteúdo da caixa pull-down. Escreva uma prova de efeito aqui para alcançar o carregamento dinâmico </ul> </span>
Aqui está apenas um efeito de caixa suspensa para provar que o plug-in é carregado corretamente e usado.
OK, depois de ler o HTML, vamos analisar a configuração de carregamento e a configuração de roteamento:
"Use rigoroso" var tempapp = angular.module ("templateApp", ["ui.router", "oc.lazyload"]). config (["$ fornece", "$ compileProvider", "$ controllerProvider", "$ filterProvider", $ function ($ forneça, $ compilepileProvider, $ ControlerProvider.Regustro;O código acima se baseia apenas no UI.Router e Oc.Lazyload para o registro do módulo. A configuração é simplesmente configurada para configurar o módulo para que o JS subsequente possa reconhecer o método no Tempapp.
Então vamos dar uma olhada na configuração do módulo Oclazyload Load:
"Use rigoroso" tempapp.constant ("modules_config", [{name: "ngtable", module: true, arquivos: ["scripts/ng-table/dist/ng-table.minmin.css", "scripts/ng-table/dist/ng-table.minmin.js"], "Nome, {namesbable:" nort: "scripts/ng:" nort: "scripts: {scripts/ng-table/ng-table.minmin.js", " "Scripts/Angular-Bootstrap/Ui-Bootstrap-TPLS-0.14.3.min.js"]}, {name: "treecontrol", módulo: true, arquivos: ["scripts/angular-tre-control-master/css/árvore-controle.css", "Scripts/angular-árvore-controle-mestre/css/árvore-controle-attribute.css", "scripts/angular-árvore-controle-mestre/angular-tre-controle.js"]}]). Routefn ($ oclazyLoadProvider, Modules_config) {$ oclazyloadprovider.config ({Debug: false, eventos: false, módulos: modules_config});};Configuração de roteamento:
"Use Strict" tempapp.config (["$ stateprovider", "$ urlrouterprovider", routefn]); function routefn ($ stateprovider, $ urlrouterprovider) {$ urlrouterprovider.otherwise ("/default"); $ stateProvider .State ("padrão", {url: "/default", templateurl: "Views/default.html", controlador: "defaultCtrl", controleras: "default", resolve: {deps: ["$ oclazyload", function ($ oclArlazy) {return $ oclArl.; }}) .state ("uiBootStrap", {url: "/uiBootStrap", templateurl: "Views/ui-bootstrap.html", resolve: {deps: ["$ OCLazyload", função ($ oclazyload) {return $ OCLAZOLLOULL.OLLOULT. .State ("ngtable", {url: "/ngtable", templateurl: "Views/ng-table.html", controlador: "ngtabletrl", controleras: "ngtable", resolve: {deps: [[$ OclAzload ", função ($ OCLAZLOULLG) {RETLUTN $ OCLAZLOLLOAD", ($ OCLAZOLLOULL) {{{(deps: [$ Retorne $ oclazyload.load ("JS/Controllers/Ng-Table.js"); DEPS: ["$ oclazyload", função ($ oclazyload) {return $ oclazyload.load ("Treecontrol"). Então (function () {return $ oclazyload.load ("js/controladores/angular-tre-control.js");});A implementação simples da caixa suspensa do Ui-BootStrap não requer um controlador, então vamos apenas olhar para o controlador JS de NG-Table e Angular-Tree-Control:
ng-table.js
(function () {"use rigoroso" tempapp.controller ("ngtablectrl", ["$ location", "ngtableParams", "$ filtro", ngtablectrlfn]); função ngtablectrlfn ($ location, ngableParams, $ filter) {// var dados [{{{{{{names: {names, nort: mro)); norma: {// // databletrlfn ($ local, ngableParams, $ filtro) {// var dados [{{{{{{{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", idade: 29}, {name: "eNOS", idade: 34}]; $ Location.Search ()), {Total: Data.Length, // Total de dados getData: function ($ defer, params) {$ location.search (params.url ()); $ 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(){ //Tree data this.treeData = [ { id:"1", title:"Tag1", childList:[ { id:"1-1", title:"Child1", childList:[ { id:"1-1-1", title:"Child1", childList:[ { id:"1-1-1", title:"Child1", childList:[ { id:"1-2", title:"Child2", childList:[ { id:"1-2-1", title:"Child2", childList:[ { id:"1-2-1", title:"Child2", childList:[ { id:"1-2-1-1", title:"Child level 1", childList:[] } ] } ] }, { id:"1-3", title:"Child level 3", childList:[] } ] }, { id:"2", title:"Tag 2", childList:[ { id:"2-1", title:"Child level 1", childList:[] }, { id:"2-2", title:"Child level 2", childList:[ { ID: "3-1", título: "Child1", ChildList: []}, {id: "3-2", título: "Child2", ChildList: []}, {id: "3-3", title: "Child3", ChildList: []}]; };};}) ();Vamos ignorar o default.js, afinal, há apenas "Olá Wrold".
Github URL: https://github.com/program-monkey/angular-oclazyload-demo
O acima exposto é uma coleção de informações sobre o módulo de carregamento dinâmico do AngularJS e as dependências. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!