English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Недавно проект очень занят, днем нужно работать, вечером回来还需要做Angular知识点ppt给同事，毕竟年底要辞职了，项目的后续开发还是需要有人接手的，所以 занимаю вечернее время для изучения. Вначале не собирался писать эти записи о изучении第三方插件, но решил, что загрузка модулей по требованию и успешное использование этого действительно полезно, поэтому решил записать это. Поскольку я не очень глубоко использовал 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文件夹 针对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 --- страница по умолчанию
ng-table.html --- страница с эффектами плагина ng-table
ui-bootstrap.html --- страница с эффектами плагина uibootstrap
index.html --- главная страница
Внимание: этот демонстрационный пример не использует маршрутизация в nesting, он просто реализует маршрутизация для одной видимой страницы, чтобы продемонстрировать эффект.
Посмотрим на код главной страницы:
<!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/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>
На этой странице мы загрузили только css bootstrap, js angular, js ui-router, js ocLazyLoad и 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">Очистить сортировку</button>
<p>
<strong>Сортировка:</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>
Здесь был написан только эффект выпадающего списка, чтобы доказать, что плагин был правильно загружен и использован.
Теперь посмотрим на конфигурацию загрузки и конфигурацию маршрутизации:
"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 не требует контроллера, поэтому давайте посмотрим на контроллер js ng-table и angular-tree-control:
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/Program-Monkey/Angular-ocLazyLoad-Demo
Вот собранные материалы по динамической загрузке модулей и зависимостей AngularJS, в будущем будут продолжены добавления соответствующих материалов, спасибо всем за поддержку нашего сайта!
Заявление: содержимое статьи взято из Интернета, авторские права принадлежат соответствующему автору, материалы предоставлены пользователями Интернета в добровольном порядке, сайт не имеет права собственности, не был отредактирован вручную и не несет ответственности за соответствующие юридические последствия. Если вы обнаружите материалы,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @) для сообщения о нарушении и предоставьте соответствующие доказательства. При подтверждении факта нарушения сайт незамедлительно удаляет涉嫌侵权的内容.