我正在开发 MEAN 堆栈应用程序。我在应用程序中使用了外部角度模块。由于性能问题，我使用 $ocLazyLoad 模块在应用程序中加载模块明智的依赖项。它适用于我创建的自定义控制器、指令和服务，并且可以延迟加载。但是当我尝试使用外部角度模块时，它会返回一个错误。例如“reCAPTCHA”模块，用于将 google recaptcha 集成到应用程序中。它仅在一个地方使用，即注册。现在我需要全局包含在 index.html 中，它不必要地加载到应用程序的每个页面中。所以我不知道如何使用 $ocLazyLoad 加载外部角度模块。
如果我从 index.html 中删除依赖项并添加 $ocLazyLoadProvider 那么它会抛出一个角度模块依赖项的错误。谁能建议我如何解决这个问题？我无法找到此问题的解决方案。我的主要问题是我不知道如何使用 $ocLazyLoad 管理这个外部模块依赖项。我试图从 Internet 上找到，但无法在应用程序中进行管理。
应用程序.js
(function() {
'use strict';
}());
/*
* @param angular
*/
angular.
module('myApp', [
'ngResource',
'ngCookies',
'ngRoute',
'ngAnimate',
'ui.router',
'ngNotificationsBar',
'reCAPTCHA',
'oc.lazyLoad'
])
.config(
['reCAPTCHAProvider',
function(reCAPTCHAProvider) {
// required, please use site key:)
reCAPTCHAProvider.setPublicKey('my publick key');
// optional
reCAPTCHAProvider.setOptions({
theme: 'custom',
custom_theme_widget: 'recaptcha_widget' // The id of your widget element.
});
}
], ['notificationsConfigProvider',
function(notificationsConfigProvider) {
// auto hide
notificationsConfigProvider.setAutoHide(true);
}
], ['cookieProvider',
function(cookieProvider) {
}
],
.run(['$rootScope', '$http', 'UserService', function($rootScope, $http, UserService) {
}]);
app.routes.js
(function () {
function config($ocLazyLoadProvider, $stateProvider, $urlRouterProvider, $httpProvider, $provide, $locationProvider) {
$urlRouterProvider.otherwise('home');
$ocLazyLoadProvider.config({
debug: true, // For debugging 'true/false'
events: true, // For Event 'true/false'
cache: true,
series: true,
modules: [{
name: 'authenticationAndAuthorization',
files: [
"/modules/auth/controllers/auth.js"
]
}, {
name: 'userNotification',
files: [
"/modules/user/controllers/UserNotificationCtrl.js",
]
}, {
name: 'appSocket',
files: [
"/modules/common/services/HzSocket.js"
]
}]
});
$stateProvider
.state('app', {
url: '/',
abstract: true,
views: {
'globalHeaderLine1': {templateUrl: '/partials/headerLine1.html'},
},
resolve: {
content: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load(['userNotification'])
}]
}
})
/*
* Error page
*/
.state("app.error", {
url: "error/:code",
views: {
'content@': {templateUrl: '/partials/error.html', controller: 'ErrorCtrl', controllerAs: 'Error'}
}
})
.state("app.signin", {
url: "signin/:referer",
views: {
'globalHeaderLine1@': "",
'content@': {templateUrl: '/views/auth/signin.html', controller: 'SigninCtrl', controllerAs: 'Signin'}
}
})
.state("app.signup", {
url: "signup",
views: {
'globalHeaderLine1@': "",
'content@': {templateUrl: '/views/auth/signup.html', controller: 'SignupCtrl', controllerAs: 'Signup'}
}
})
}
angular
.module('myApp')
.config(['$ocLazyLoadProvider', '$stateProvider', '$urlRouterProvider', '$httpProvider', '$provide', '$locationProvider', config])
}());
索引.html
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="lt-ie9 lt-ie8 lt-ie7" lang="en">
<![endif]-->
<!--[if IE 7]>
<html class="lt-ie9 lt-ie8" lang="en">
<![endif]-->
<!--[if IE 8]>
<html class="lt-ie9" lang="en">
<![endif]-->
<!--[if gt IE 8]>
<!-->
<html lang="en" ng-app="myApp" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="MobileOptimized" content="320" />
<meta name="description" content="MyApp" />
<meta http-equiv="Cache-control" content="public" />
<link rel="shortcut icon" href="/favicon.ico" />
<link data-require="bootstrap-css@3.0.1" data-semver="3.0.1" rel="stylesheet" href="/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="/css/angular-csp.css" />
<link type="text/css" rel="stylesheet" href="/css/style.css" />
<link type="text/css" rel="stylesheet" href="/css/animation.css" />
<title>Welcome to MyApp</title>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
</head>
<body>
<div id="site_loader"></div>
<!-- Header section -->
<header id="ccr-header" ui-view="globalHeaderLine1"></header>
<div class="clear"></div>
<div>
<div class="container_video" ui-view="homeVideoPage"></div>
<div ui-view="featureBar"></div>
<div ui-view="content"></div>
<footer class="clear" ui-view="footer"></footer>
</div>
<!-- Javascript Dependencies -->
<!-- Application-->
<script type="text/javascript" src="/vendor/utils/modernizr.custom.js"></script>
<script type="text/javascript" src="/vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/vendor/utils/lodash.min.js"></script>
<!-- angular core files -->
<script type="text/javascript" src="/vendor/angular/angular.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-cookies.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-sanitize.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-animate.js"></script>
<script type="text/javascript" src="/vendor/utils/ocLazyLoad.js"></script>
<!-- notificationbar -->
<script type="text/javascript" src="/vendor/angular/ngNotificationsBar.min.js"></script>
<!-- google recaptch -->
<script type="text/javascript" src="/vendor/angular/angular-re-captcha.min.js"></script>
<script type="text/javascript" src="/client/app.js"></script>
<script type="text/javascript" src="/client/app.routes.js"></script>
</body>
</html>
控制器.js
我正在按照以下方式在控制器中开发代码。
(function () {
'use strict';
function SignupCtrl($http, $scope, $rootScope, $cookies, UserService, HzServices, HzSocket) {
// Signup code.
}
angular
.module('myApp')
.controller('SignupCtrl', ['$http', '$scope', '$rootScope', '$cookies', 'UserService', 'HzServices', 'HzSocket', SignupCtrl]);
}());