hujung hadapan web
tutorial js
Modul AngularJs dimuatkan secara dinamik dan suntikan kebergantungan penjelasan terperinci_AngularJS
Modul AngularJs dimuatkan secara dinamik dan suntikan kebergantungan penjelasan terperinci_AngularJS
Tanpa berlengah lagi, mari kita ke intinya...
Mula-mula mari kita lihat struktur fail:
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 --- 主页面
Nota: Demo ini tidak melaksanakan penghalaan bersarang, tetapi hanya melaksanakan penghalaan pandangan tunggal untuk menunjukkan kesannya.
Mari lihat kod halaman utama:
<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>
Pada halaman ini, kami hanya memuatkan css bootstrap, js angular, js ui-router, js ocLazyLoad dan 3 fail js yang dikonfigurasikan.
Lihat sekali lagi kod html empat halaman:
halaman kesan kawalan pokok sudut
<treecontrol tree-model="ngtree.treeData" class="tree-classic ng-cloak" options="ngtree.treeOptions">
{{node.title}}
</treecontrol>Terdapat arahan untuk menggunakan pemalam pada halaman.
halaman lalai
<div class="ng-cloak">
{{default.value}}
</div>
Di sini kami hanya menggunakannya untuk membuktikan bahawa default.js dimuatkan dan dilaksanakan dengan betul.
halaman kesan ng-jadual
<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>
Berikut ialah beberapa kesan ng-table yang ringkas.
halaman kesan 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>Hanya kesan kotak lungsur yang ditulis di sini untuk membuktikan bahawa pemalam dimuatkan dan digunakan dengan betul.
Okay, selepas membaca html, mari kita lihat konfigurasi pemuatan dan konfigurasi penghalaan:
"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;
}]);
Kod di atas hanya bergantung pada ui.router dan oc.LazyLoad untuk mendaftarkan modul. Konfigurasi hanyalah konfigurasi ringkas modul supaya js seterusnya dapat mengenali kaedah pada tempApp.
Kemudian mari kita lihat konfigurasi modul pemuatan 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
});
};
Konfigurasi penghalaan:
"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");
}
);
}]
}
})
};
Pelaksanaan mudah kotak lungsur ui-bootstrap tidak memerlukan pengawal, jadi mari kita lihat js pengawal ng-table dan angular-tree-control:
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 ?
$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
};
};
})();
Mari kita abaikan default.js, lagipun hanya terdapat "Hello Wrold" di dalamnya.
Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Panduan langkah demi langkah untuk memahami suntikan pergantungan dalam Angular
Dec 02, 2022 pm 09:14 PM
Artikel ini akan membawa anda melalui suntikan pergantungan, memperkenalkan masalah yang diselesaikan oleh suntikan pergantungan dan kaedah penulisan asalnya, dan bercakap tentang rangka kerja suntikan pergantungan Angular saya harap ia akan membantu semua orang.
Cara menggunakan suntikan kebergantungan (Dependency Injection) dalam rangka kerja Phalcon
Jul 30, 2023 pm 09:03 PM
Pengenalan kepada kaedah menggunakan suntikan kebergantungan (DependencyInjection) dalam rangka kerja Phalcon: Dalam pembangunan perisian moden, suntikan kebergantungan (DependencyInjection) ialah corak reka bentuk biasa yang bertujuan untuk meningkatkan kebolehselenggaraan dan kebolehujian kod. Sebagai rangka kerja PHP yang pantas dan kos rendah, rangka kerja Phalcon juga menyokong penggunaan suntikan kebergantungan untuk mengurus dan mengatur kebergantungan aplikasi. Artikel ini akan memperkenalkan anda cara menggunakan rangka kerja Phalcon
2022年最新5款的angularjs教程从入门到精通
Jun 15, 2017 pm 05:50 PM
Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。
Corak suntikan kebergantungan dalam lulus parameter fungsi Golang
Apr 14, 2024 am 10:15 AM
Dalam Go, mod suntikan kebergantungan (DI) dilaksanakan melalui hantaran parameter fungsi, termasuk hantaran nilai dan hantaran penunjuk. Dalam corak DI, kebergantungan biasanya diluluskan sebagai petunjuk untuk meningkatkan penyahgandingan, mengurangkan pertikaian kunci dan menyokong kebolehujian. Dengan menggunakan penunjuk, fungsi itu dipisahkan daripada pelaksanaan konkrit kerana ia hanya bergantung pada jenis antara muka. Hantaran penunjuk juga mengurangkan overhed menghantar objek besar, dengan itu mengurangkan pertengkaran kunci. Tambahan pula, corak DI memudahkan untuk menulis ujian unit untuk fungsi menggunakan corak DI kerana kebergantungan boleh dipermainkan dengan mudah.
Suntikan kebergantungan menggunakan rangka kerja ujian unit JUnit
Apr 19, 2024 am 08:42 AM
Untuk menguji suntikan kebergantungan menggunakan JUnit, ringkasannya adalah seperti berikut: Gunakan objek olok-olok untuk mencipta kebergantungan: Anotasi @Mock boleh mencipta objek olok-olok bagi kebergantungan. Tetapkan data ujian: Kaedah @Sebelum dijalankan sebelum setiap kaedah ujian dan digunakan untuk menetapkan data ujian. Konfigurasikan tingkah laku olok-olok: Kaedah Mockito.when() mengkonfigurasi gelagat yang dijangkakan bagi objek olok-olok. Sahkan keputusan: assertEquals() menegaskan untuk menyemak sama ada hasil sebenar sepadan dengan nilai yang dijangkakan. Aplikasi praktikal: Anda boleh menggunakan rangka kerja suntikan kebergantungan (seperti Rangka Kerja Spring) untuk menyuntik kebergantungan, dan mengesahkan ketepatan suntikan dan operasi biasa kod melalui ujian unit JUnit.
Gunakan PHP dan AngularJS untuk membina tapak web responsif untuk menyediakan pengalaman pengguna yang berkualiti tinggi
Jun 27, 2023 pm 07:37 PM
Dalam era maklumat hari ini, laman web telah menjadi alat penting untuk orang ramai mendapatkan maklumat dan berkomunikasi. Tapak web responsif boleh menyesuaikan diri dengan pelbagai peranti dan memberikan pengguna pengalaman berkualiti tinggi, yang telah menjadi tumpuan dalam pembangunan tapak web moden. Artikel ini akan memperkenalkan cara menggunakan PHP dan AngularJS untuk membina tapak web responsif untuk memberikan pengalaman pengguna yang berkualiti tinggi. Pengenalan kepada PHP PHP ialah bahasa pengaturcaraan sisi pelayan sumber terbuka yang sesuai untuk pembangunan web. PHP mempunyai banyak kelebihan, seperti mudah dipelajari, merentas platform, perpustakaan alat yang kaya, kecekapan pembangunan
Bahasa Go: Panduan Suntikan Ketergantungan
Apr 07, 2024 pm 12:33 PM
Jawapan: Dalam bahasa Go, suntikan kebergantungan boleh dilaksanakan melalui antara muka dan struktur. Tentukan antara muka yang menerangkan tingkah laku kebergantungan. Buat struktur yang melaksanakan antara muka ini. Suntikan kebergantungan melalui antara muka sebagai parameter dalam fungsi. Membenarkan penggantian mudah kebergantungan dalam ujian atau senario yang berbeza.
Suntikan ketergantungan dan bekas perkhidmatan untuk fungsi PHP
Apr 27, 2024 pm 01:39 PM
Jawapan: Suntikan ketergantungan dan bekas perkhidmatan dalam PHP membantu mengurus kebergantungan secara fleksibel dan meningkatkan kebolehujian kod. Suntikan kebergantungan: Lulus kebergantungan melalui bekas untuk mengelakkan penciptaan langsung dalam fungsi, meningkatkan fleksibiliti. Bekas perkhidmatan: menyimpan contoh pergantungan untuk akses mudah dalam program, meningkatkan lagi gandingan longgar. Kes praktikal: Aplikasi sampel menunjukkan aplikasi praktikal bekas suntikan kebergantungan dan perkhidmatan, menyuntik kebergantungan ke dalam pengawal, mencerminkan kelebihan gandingan longgar.
