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]);
}());
Related
I've been working on my ngRoute without sucess. I can't load the module 'ngRoute'. I don't know why. When I try this code, nothing happens, just a blank page.
Here is my app.js .
var app = angular.module('tutorialApp', ['ngRoute', 'tutorialCtrlModule']);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "views/viewCourse.html"
controllers : "tutorialCtrl"
});
});
My index.html:
<html ng-app="tutorialApp">
<head>
<meta charset="utf-8">
<title>Teste</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<script src="lib/angular-route.min.js"></script>
<script src="lib/angular-locale-pt-br.js"></script>
<script src="lib/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/tutorialCtrl.js"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div ng-view></div>
</body>
</html>
Two Things:
Load angular-route.js after loading Angular.js
there is a syntax Error while defining the route in app.js; as there should be a comma ',' after 'templateUrl' value.
It should look like this:
.when("/", {
templateUrl : "views/viewCourse.html",
controllers : "tutorialCtrl"
});
Also do you mind sharing the URL while accessing this page in your the browser.
I have created a simple Plunker: http://plnkr.co/edit/tBisV2hhmJbHOyYAPPhn
angular.module("myApp", ['ngRoute']);
angular.module("myApp").config(function($routeProvider) {
$routeProvider
.when('/test', {
templateUrl: 'Welcome.html',
controller: 'TestController',
controllerAs: 'testController'
})
});
angular.module("myApp").controller('testCtrl', testCtrl);
function testCtrl($timeout, $q, $log, $location, $scope) {
$scope.navigate = function(){
$log.info('Success');
$location.path('/test');
}
}
I used Angular for a while, but it has changed greatly since I last used it... I'm running into some issues, as I can't get the application to load at all.
When I try to load the individual webpages, I get just the basic HTML, but no error messages... [I'm loading it using the live preview option in Brackets]
The file hierarchy is as follows:
index.html
bower_components
js
-- app.js
-- ctrl
--- about.js
--- home.js
html
-- home.html
-- about.html
The files:
index.html
<!DOCTYPE HTML>
<html lang="en" np-app="stagerite" ng-controller="indexCtrl">
<head>
<!-- meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- title/icon -->
<title>StageRite - {{ Page.title() }}</title>
<link rel="shortcut icon" href="img/" />
<!-- bower imports -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<link type="text/css" rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- local css -->
<!-- local js -->
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/ctrl/index.js"></script>
<script type="text/javascript" src="js/ctrl/home.js"></script>
<script type="text/javascript" src="js/ctrl/about.js"></script>
<!-- fonts -->
</head>
<body unresolved fullbleed>
<div ng-view></div>
</body>
</html>
app.js
/*global angular, console, alert*/
(function () {
'use strict';
/* Initialize application. */
var stagerite = angular.module('stagerite', [
'ngRoute'
]);
/* Set routes. */
stagerite.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/about', {
templateUrl: '../html/about.html',
controller: 'aboutCtrl'
}).
when('/home', {
templateUrl: '../html/home.html',
controller: 'homeCtrl'
}).
otherwise({
templateUrl: '../html/home.html',
controller: 'homeCtrl'
});
}]);
/* Set page titles. */
stagerite.factory('Page', function () {
var title = 'Home';
return {
title: function () {
return title;
},
setTitle: function (newTitle) {
title = newTitle;
}
};
});
}());
home.html
<div ng-controller="homeCtrl">
</div>
index.js
/*global angular, console, $, alert*/
/*jslint plusplus: true*/
(function () {
'use strict';
var indexCtrl = angular.module('stagerite', []);
indexCtrl.controller('indexCtrl', ['$scope', 'Page', function ($scope, Page) {
$scope.Page = Page;
}]);
}());
home.js
/*global angular, console, $, alert*/
/*jslint plusplus: true*/
(function () {
'use strict';
var homeCtrl = angular.module('stagerite', []);
homeCtrl.controller('homeCtrl', ['$scope', 'Page', function ($scope, Page) {
Page.setTitle('Home');
}]);
}());
I have a problem with routing.
When the routing changes the scripts included in the head do not work within the template is loaded, it is as if the functions are disabled or absent.
main.php
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Site</title>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
<script src="routes.js" type="text/javascript"></script>
<script src="script2.js" type="text/javascript"></script>
<script src="script3.js" type="text/javascript"></script>
<base href="/"></base>
</head>
<body>
<div class="page" ng-view ng-controller="myappCtrl" anim-class></div>
</body>
</html>
routes.js
'use strict';
var app = angular.module("myapp", [
"ngRoute",
"ngAnimate"
]);
// ROUTE CONFIG
app.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$locationProvider.hashPrefix('!');
$routeProvider.
when("/dashboard", {
templateUrl: "dashboard.php",
controller: "dashboardCtrl",
animate: "slide-left"
}).
when("/associati", {
templateUrl: "associati.php",
controller: "associatiCtrl",
animate: "slide-left"
}).
otherwise({
redirectTo: "/dashboard"
});
}]);
// PAGE ANIMATE DIRECTIVE
app.directive('animClass',function($route){
return {
link: function(scope, elm, attrs){
var enterClass = $route.current.animate;
elm.addClass(enterClass)
scope.$on('$destroy',function(){
elm.removeClass(enterClass)
elm.addClass($route.current.animate)
})
}
}
});
/************************************************
**************** CONTROLLER *********************
************************************************/
// MAIN CONTROLLER
app.controller("myappCtrl", function($rootScope, $scope, $location) {
});
// DASHBOARD CONTROLLER
app.controller("dashboardCtrl", function($scope) {
});
// ASSOCIATI CONTROLLER
app.controller("associatiCtrl", function($scope) {
});
Every time you change the css files are included page regularly while js no longer work.
Suggestions?
I'm trying to create simple navigation in my ionic application, but I get following error.
Argument 'LoginCtrl' is not a function, got undefined in the Ionic
What I did wrong?
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!— IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
—>
<!— ionic/angularjs js —>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/angular-route.js"></script>
<script src="lib/angular-cookies.js"></script>
<script src="lib/ng-cordova/dist/ng-cordova.min.js"></script>
<!— cordova script (this will be a 404 during development) —>
<script src="cordova.js"></script>
<!— your app's js —>
<script src="js/app.js"></script>
<script src="js/restService/login.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
app.js:
angular.module('starter', ['ionic',
'Authentication',
'ngCookies'])
.config(function($stateProvider, $urlRouterProvider) {
//$urlRouterProvider.otherwise('views/main')
$stateProvider.state('login', {
url: '/login',
controller: 'LoginCtrl',
templateUrl: 'views/throbber.html'
})
})
.run(['$ionicPlatform', '$rootScope', '$location', '$cookieStore', '$http',
function($ionicPlatform, $rootScope, $location, $cookieStore, $http) {
$ionicPlatform.ready(function() {
try {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
} catch (ex) {
alert(ex);
}
});
}]);
angular.module('Authentication', []);
js/restService/login.js:
angular.module('Authentication')
.controller('LoginCtrl' [
function () {
alert('test');
}
]);
views/throbber.html:
<div>THROBBER</div>
your login.js is loaded after app.js.
When you are configuring routes, LoginCtrl controller is not available to angular, therefore it is "undefined"/"not a function".
You need to have the contents of login.js moved into app.js, or have your gulp/grunt task runner to combine the contents.
My index.html is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body ng-app="app">
THIS WORKS NOW!
<div ng-view></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
And in app.js, I have:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: 'templates/home.html'
}).when('/dashboard', {
templateUrl: '/templates/dashboard.html'
}).otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}
]);
So I run cordova build ios and it does it's magic to make an xcode project, which I then open and run. I see THIS WORKS NOW!, but I don't see the contents of my home.html file.
What am I doing wrong?
You need bootstrap angular:
app.js is fine!
but remove ng-app inside the tag <body> and start angular when the event onDeviceReady has been triggered :
index.js file:
var app = {
initialize: function () {
this.bindEvents();
},
bindEvents: function () {
document.addEventListener("deviceready", this.onDeviceReady, false);
},
onDeviceReady: function () {
angular.element(document).ready(function () {
angular.bootstrap(document, ["app"]);
});
}
};
normally that is all you need to do.