I am developing MEAN stack application. I have used external angular modules in an application. Due to the performance issue, I used the $ocLazyLoad module to load module wise dependency in an application. It works fine with a custom controller, directive, services which I have created and it loads lazily. But when I tried to use with external angular modules, it returns an error. Such as "reCAPTCHA" module of angular use for integrating google recaptcha in an application. it uses only in one place which is signup. Right now I required to include in index.html globally and it loads unnecessarily in every page of an application. So I don't know how to load external angular modules using $ocLazyLoad.
If I remove the dependency from index.html and add in $ocLazyLoadProvider then it throws me an error of an angular module dependency. Can anyone suggest me how to resolve this issue? I am not able to find out the solution of this issue. My main issue is that I don't know how to manage this external modules dependency using $ocLazyLoad. I tried to found from Internet but fails to manage in an application.
app.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])
}());
index.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>
controller.js
I am following below way to developing a code in the controller.
(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]);
}());
