Недавно проект довольно занят. Я должен идти на работу днем и возвращаться ночью, и мне все еще нужно делать точку зрения на угловые знания для моих коллег. В конце концов, я уйду в отставку в конце года, и кому -то все еще нужно будет захватить последующее развитие проекта, поэтому он занимает время для обучения ночью. Я никогда не планировал написать учебные заметки для этих сторонних плагинов, но я думаю, что это действительно выгодно загружать модуль по требованию и успешно использовать его, поэтому я должен записать его. Поскольку этот зверь не использовал потребности в глубине, поэтому этот зверь не знает разницы между этим и требованием, и не может четко объяснить, считается ли это нагрузкой 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 --- демо-папки сценарии --- структуры и плагина-папки Angular-1.4.7 --- Агулярная не объяснять Angular-UI-Router --- UIROUter не объясняет oclazyload --- oclazyload Не объясняет начальная загрузка-Bootstrap не объясняет ng-table-tree-tee-master-ng-table-t-b-table-t-b-table-t-table--- --- Angular-BootStrap не объясняет JS --- JS-папки JS-файлы, написанные для демо-контроллеров --- Код контроллера контроллера страницы. Загрузить модуль код конфигурации route.config.js --- Конфигурация конфигурации маршрута и представления кода загрузки --- HTML-страница папки Angular-Tree-Control.html --- Агулярное контрольно-контроль-контроль страница эффекта ng-in infate-in page-ine-ine-ine-ine-ine-ine-ine-ine-ine-ine-ine-infitstrap. 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 = "scripts/bootstrap/dist/css/bootstrap.min.css"/> <script src = "scripts/angular -1.4.7/angular.js"> </script> <script src = "scripts/angular-ui-router/ruest/angular-ui-router.min. 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> <script src = "js/route.config.js"> </script> </head> <body> <div ng-app = "templateapp"> <div> <a href = "#/default"> home </a> <a href = "#/uibootstrap"> ui-bootstrap </a> <a href = "#/ngtable href = "#/ngtree"> angular-tree-control </a> </div> <div ui-view> </div> </div> </body> </html>
На этой странице мы загружаем только CSS Bootstrap, Angular JS, UI-Router JS, OclazyLoad JS и 3 настроенные файлы JS.
Давайте посмотрим на HTML -код четырех страниц:
Страница эффекта контроля угловой зоны
<treecontrol Tree-model = "ngtree.treedata" options = "ngtree.treeoptions"> {{node.title}} </treecontrol>На странице есть команда, чтобы использовать плагин.
страница по умолчанию
<div> {{default.value}} </div>Здесь мы просто используем его, чтобы доказать, что загрузка и выполнение default.js правильно.
Страница эффекта NG-таблица
<div> <div> <h3> ng-table </h3> </div> <button ng-click = "ngtable.tableparams.sorting ({})"> чистая сортировка </button> <p> <strong> sorting: </strong> {{ngtable.tableparams.sorting () | Json}} </p> <table.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> </table> </div>Вот некоторые простые эффекты NG-таблица.
UI-Bootstrap Effect Page
<span uib-dropdown> <a href id = "Simple-Dropdown" Uib-Dropdown-toggle> Trigger с выключенной коробкой </a> <ul aria-labelledby = "simple-dropdown"> Содержание раскрывающегося ящика. Напишите здесь доказательство эффекта для достижения динамической нагрузки </ul> </span>
Вот только эффект выпадающей коробки, чтобы доказать, что плагин загружается правильно и используется.
Хорошо, после прочтения HTML, давайте посмотрим на конфигурацию загрузки и конфигурацию маршрутизации:
«Используйте строгие" var tempApp = angular.module ("templateapp", ["ui.router", "oc.lazyload"]). config (["$ предоставление", "$ compileprovider", "$ controllerprovider", "$ filterprovider", function ($, $ complayerprovider, $ filterprover), $ tempoverprover), $ tempoverprov $ controverprovider.register;Приведенный выше код опирается только на UI.Router и OC.LazyLoad для регистрации модуля. Конфигурация просто настраивается для настройки модуля, чтобы последующий JS мог распознать метод на TempApp.
Затем давайте посмотрим на конфигурацию модуля загрузки OclazyLoad:
«Используйте строгие" tempapp.constant ("modules_config", [{name: "ngtable", модуль: true, файлы: ["scripts/ng-table/dist/ng-table.min.css", "scripts/ng-table/dist/ng-table.min.js"]},}, {name: "ui.boot. "Scripts/Angular-BootStrap/UI-BootStrap-TPLS-0.14.3.min.js"]}, {name: "treecontrol", модуль: true, файлы: ["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 ("$ oclazylovprovid routefn ($ oclazyloadprovider, modules_config) {$ oclazyloadprovider.config ({Debug: false, события: false, modules: modules_config});};Конфигурация маршрутизации:
«Используйте строгие" tempapp.config (["$ stateprovider", "$ urlrouterprovider", routefn]); function routefn ($ stateprovider, $ urlrouterprovider) {$ urlrouterprovider.аот ("/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: "ngtablectert", controlleras: "ngtable", Resolve: {deps: ["$ oclazyload", функция ($ oclazyload) {return $ oclable. return $ oclazyload.load ("JS/Controllers/Ng-Table.js"); deps: ["$ oclazyload", function ($ oclazyload) {return $ oclazyload.load ("treecontrol"). Тогда (function () {return $ oclazyload.load ("js/controllers/angular-tree-control.js");});Простая реализация раскрывающейся коробки UI-Bootstrap не требует контроллера, поэтому давайте посмотрим только на контроллер JS NG-Table и Angular Tree-Control:
ng-table.js
(function () {«Использовать строгие" tempapp.controller ("ngtablectrectret", ["$ location", "ngtableParams", "$ filter", ngtablectretfn]); функция ngtablectrecterfn ($ location, ngtableparams, $ filter) {// data data = [wome: "moroni e -werie: «Tiancum», Age: 43}, {name: «Jacob», Age: 27}, {name: «nephi», возраст: 29}, {name: «enos», возраст: 34}, {name: "tiancum", возраст: 43}, {name: "jacob", Age: 27}, {name: ", nephi:" nephi: "nephi:" nephi: ", wome:" jacob ", wome: nephi:", wome: "jacob", wome: neph «ENOS», возраст: 34}, {name: «tiancum», возраст: 43}, {name: «Jacob», AGE: 27}, {name: «Нефи», возраст: 29}, {name: «eNOS», возраст: 34}, {name: «tiancum», Age: 43}, {name: jacob: «name:», name: «Нефий», возраст: 29}, {name: "enos", возраст: 34}]; , {total: data.length, // Общее количество данных getData: function ($ defer, params) {$ location.search (params.url ()); $ defer.resolve (ordayeddata.slice ((params.page () - 1) * params.count (), params.page () * params.count ()));Angular-Tree-Control.JS
(function () {«Использовать строгие" tempapp.controller ("ngtreecterl", ngtreectrlfn); function ngtreecterfn () {// Данные дерева this.treedata = [{id: "1", название: "Tag1", kildlist: [{id: "1-1, title:" Child1 ", Childlist:" 1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-11 Название: "Child1", ChildList: [{id: "1-1-1", название: "Child1", kildlist: [{id: "1-2", название: "Child2", kildlist: [{id: "1-2-1", название: "Child2", Childlist: [{id: "1-2-1, название:" Child2 ", Childslist: [id:" 1-2-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-1-- }]}]}, {id: "1-3", заголовок: "Дочерний уровень 3", kildlist: []}]}, {id: "2", заголовок: "Tag 2", kildlist: [{id: "2-1", название: «Дочерний уровень 1», Childlist: []}, {id: "2-2", название: ". Название: "Child1", Childlist: []}, {id: "3-2", заголовок: "Child2", kildlist: []}, {id: "3-3", заголовок: "Child3", kildlist: []}]}];Давайте проигнорируем Default.js, в конце концов, в нем есть только "Hello grold".
url github: https://github.com/program-monkey/angular-oclazyload-demo
Выше приведено набор информации о модуле динамической загрузки AngularJS и зависимостях. Мы будем продолжать добавлять соответствующую информацию в будущем. Спасибо за поддержку этого сайта!