使用脚本 ui.route angularjs 调用插件模板/页面?
call plugin template /page with script ui.route angularjs?
嘿,你能帮我吗,我想为模板调用 css 和 jquery 文件,但是一页,我已经完成了,但它没有显示它的页面和插件文件已经打电话!!
- 此函数app.constant 用于调用插件
{
app.constant('MODULE_CONFIG', [
{
name: 'alumnss',
module: true,
files: [
'public/alumni/css/icomoon.css',
'public/alumni/css/simple-line-icons.css',
'public/alumni/css/magnific-popup.css',
'public/alumni/css/owl.carousel.min.css',
'public/alumni/css/owl.theme.default.min.css',
// 'public/alumni/css/salvattore.css',
'public/alumni/css/style.css',
'public/alumni/js/modernizr-2.6.2.min.js',
'public/alumni/js/jquery.easing.1.3.js',
'public/alumni/js/jquery.waypoints.min.js',
'public/alumni/js/jquery.magnific-popup.min.js',
'public/alumni/js/owl.carousel.min.js',
'public/alumni/js/jquery.countTo.js',
'public/alumni/js/main.js'
]
}
]).config(['$ocLazyLoadProvider', 'MODULE_CONFIG', function($ocLazyLoadProvider, MODULE_CONFIG) {
$ocLazyLoadProvider.config({
debug: false,
events: false,
modules: MODULE_CONFIG
});}]);}
2。此路由页面
app.config(function($stateProvider, $urlRouterProvider, MODULE_CONFIG) {
$urlRouterProvider.otherwise('/alumnis');
$stateProvider
.state('alumnis', {
url: '/alumnis',
templateUrl: 'alumni.html',
controller:'',
resolve: load(['alumnss']) // **THIS CALL FROM 'MODULE_CONFIG' has been called, But the html page not showing **
})
function load(srcs, callback) {
return {
deps: ['$ocLazyLoad', '$q',
function( $ocLazyLoad, $q ){
var deferred = $q.defer();
var promise = false;
srcs = angular.isArray(srcs) ? srcs : srcs.split(/\s+/);
if(!promise){
promise = deferred.promise;
}
angular.forEach(srcs, function(src) {
promise = promise.then( function(){
angular.forEach(MODULE_CONFIG, function(module) {
if( module.name == src){
if(!module.module){
name = module.files;
}else{
name = module.name;
}
}else{
name = src;
}
});
return $ocLazyLoad.load(name);
} );
});
deferred.resolve();
return callback ? promise.then(function(){ return callback(); }) : promise;
}]
}
}
});
和this image,页面空白没有显示模板,或者代码有问题???请帮帮我???
我得到了你的解决方案
像这样更改 ocLazyLoad CDN
<script data-require="oclazyload@1.0.9" data-semver="1.0.9" src="https://cdnjs.cloudflare.com/ajax/libs/oclazyload/1.1.0/ocLazyLoad.min.js"></script>
并为 JQ_CONFIG 而不是 MODULE_CONFIG
编写代码
var app = angular.module('routerApp');
app.constant('JQ_CONFIG', {
callplugincss: [
'style.css'
]
});
app.constant('MODULE_CONFIG', [{
name: 'ngGrid',
module: true,
files: [
'js of ng grid'
]
}]);
和依赖关系的变化
routerApp.config(function ($stateProvider, $urlRouterProvider, MODULE_CONFIG, JQ_CONFIG) {
我认为它会起作用。谢谢。
嘿,你能帮我吗,我想为模板调用 css 和 jquery 文件,但是一页,我已经完成了,但它没有显示它的页面和插件文件已经打电话!!
- 此函数app.constant 用于调用插件
{
app.constant('MODULE_CONFIG', [
{
name: 'alumnss',
module: true,
files: [
'public/alumni/css/icomoon.css',
'public/alumni/css/simple-line-icons.css',
'public/alumni/css/magnific-popup.css',
'public/alumni/css/owl.carousel.min.css',
'public/alumni/css/owl.theme.default.min.css',
// 'public/alumni/css/salvattore.css',
'public/alumni/css/style.css',
'public/alumni/js/modernizr-2.6.2.min.js',
'public/alumni/js/jquery.easing.1.3.js',
'public/alumni/js/jquery.waypoints.min.js',
'public/alumni/js/jquery.magnific-popup.min.js',
'public/alumni/js/owl.carousel.min.js',
'public/alumni/js/jquery.countTo.js',
'public/alumni/js/main.js'
]
}
]).config(['$ocLazyLoadProvider', 'MODULE_CONFIG', function($ocLazyLoadProvider, MODULE_CONFIG) {
$ocLazyLoadProvider.config({
debug: false,
events: false,
modules: MODULE_CONFIG
});}]);}
2。此路由页面
app.config(function($stateProvider, $urlRouterProvider, MODULE_CONFIG) {
$urlRouterProvider.otherwise('/alumnis');
$stateProvider
.state('alumnis', {
url: '/alumnis',
templateUrl: 'alumni.html',
controller:'',
resolve: load(['alumnss']) // **THIS CALL FROM 'MODULE_CONFIG' has been called, But the html page not showing **
})
function load(srcs, callback) {
return {
deps: ['$ocLazyLoad', '$q',
function( $ocLazyLoad, $q ){
var deferred = $q.defer();
var promise = false;
srcs = angular.isArray(srcs) ? srcs : srcs.split(/\s+/);
if(!promise){
promise = deferred.promise;
}
angular.forEach(srcs, function(src) {
promise = promise.then( function(){
angular.forEach(MODULE_CONFIG, function(module) {
if( module.name == src){
if(!module.module){
name = module.files;
}else{
name = module.name;
}
}else{
name = src;
}
});
return $ocLazyLoad.load(name);
} );
});
deferred.resolve();
return callback ? promise.then(function(){ return callback(); }) : promise;
}]
}
}
});
和this image,页面空白没有显示模板,或者代码有问题???请帮帮我???
我得到了你的解决方案
像这样更改 ocLazyLoad CDN
<script data-require="oclazyload@1.0.9" data-semver="1.0.9" src="https://cdnjs.cloudflare.com/ajax/libs/oclazyload/1.1.0/ocLazyLoad.min.js"></script>
并为 JQ_CONFIG 而不是 MODULE_CONFIG
编写代码var app = angular.module('routerApp');
app.constant('JQ_CONFIG', {
callplugincss: [
'style.css'
]
});
app.constant('MODULE_CONFIG', [{
name: 'ngGrid',
module: true,
files: [
'js of ng grid'
]
}]);
和依赖关系的变化
routerApp.config(function ($stateProvider, $urlRouterProvider, MODULE_CONFIG, JQ_CONFIG) {
我认为它会起作用。谢谢。