I am working on a SailsJS web app, using Angular. However, I am running into issues. When I load my page, nothing appears and the copnsole is full of errors, most elating to angular.js
ncaught Error: [$injector:modulerr] Failed to instantiate module HomepageModule due to:
Error: [$injector:modulerr] Failed to instantiate module toastr due to:
Error: [$injector:nomod] Module 'toastr' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
As you can see from the page source below, there is a link to toastr, which if I click, it goes to the source file of javascript. I have tried alternating the order so jQuery loads first (doesn't help). What is causing these errors?
<!DOCTYPE html>
<html>
<head>
<!--STYLES-->
<link rel="stylesheet" href="/bower_components/toastr/toastr.css">
<link rel="stylesheet" href="/styles/angular-toastr.css">
<link rel="stylesheet" href="/styles/bootstrap.3.1.1.css">
<link rel="stylesheet" href="/styles/importer.css">
<!--STYLES END-->
<script type="text/javascript">
window.SAILS_LOCALS = { _csrf: "null" };
</script>
</head>
<body ng-app="HomepageModule" ng-controller="HomepageController" ng-cloak>
//content of my page
</body>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/bower_components/toastr/toastr.js"></script>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/js/dependencies/compareTo.module.js"></script>
<script src="/js/public/signup/SignupModule.js"></script>
<script src="/js/private/dashboard/DashboardModule.js"></script>
<script src="/js/public/homepage/HomepageModule.js"></script>
<script src="/js/private/dashboard/DashboardController.js"></script>
<script src="/js/public/homepage/HomepageController.js"></script>
<script src="/js/public/signup/SignupController.js"></script>
<!--SCRIPTS END-->
</body>
</html>
HomePageModule:
angular.module('HomepageModule', ['toastr', 'compareTo']);
and then this is where it is used HomepageController:
angular.module('HomepageModule').controller('HomepageController', ['$scope', '$http', 'toastr', function($scope, $http, toastr){
$scope.loginForm = {
loading: false
}
$scope.submitLoginForm = function (){
// Set the loading state (i.e. show loading spinner)
$scope.loginForm.loading = true;
// Submit request to Sails.
$http.put('/login', {
email: $scope.loginForm.email,
password: $scope.loginForm.password
})
.then(function onSuccess (){
// Refresh the page now that we've been logged in.
window.location = '/';
})
.catch(function onError(sailsResponse) {
// Handle known error type(s).
// Invalid username / password combination.
if (sailsResponse.status === 400 || 404) {
toastr.error('Invalid email/password combination.', 'Error', {
closeButton: true
});
return;
}
toastr.error('An unexpected error occurred, please try again.', 'Error', {
closeButton: true
});
return;
})
.finally(function eitherWay(){
$scope.loginForm.loading = false;
});
};
}]);
There is toastr, which is a toastr JavaScript library and there AngularJS-Toaster, which is an AngularJS toastr library.
You should be using the latter but it seems that you are using the former.
To use the latter in AngularJS try the following (as per the documentation):
angular.module('main', ['toaster', 'ngAnimate'])
.controller('myController', function($scope, toaster) {
$scope.pop = function(){
toaster.pop('success', "title", "text");
};
});
Include First angular js and then its dependencies always to avoid this kind of errors
<script src="/bower_components/angular/angular.js"></script> in head tag
<script src="/bower_components/toastr/toastr.js"></script> anywhere after head tag
angular.module('HomepageModule', ['toaster', 'ngAnimate'])
.controller('HomepageController', function($scope, toaster) {
$scope.pop = function(){
toaster.pop('success', "title", "text");
};
});
<script src="/bower_components/angular/angular.js"></script> First
<script src="/bower_components/toastr/toastr.js"></script> Second
Do not forget adding dependency
angular.module('app', ['toastr'])
in my own case, i remembered to include my app.js script .
Related
I'm having an error while using AngularJS, I can't import a Service from one module to another. I have a Service called MenuDataService in module Data, that I want to use in module MenuApp, and when I try to do it, it gives an error with the following link https://docs.angularjs.org/error/$injector/unpr?p0=MenuDataServiceProvider%20%3C-%20MenuDataService%20%3C-%20CategoriesController.
src/data-module/data.module.js:
angular.module('Data', []);
src/data-module/menudata.service.js:
angular.module('Data')
.constant('CATEGORIES_URI', 'some_uri')
.service('MenuDataService ', MenuDataService);
MenuDataService.$inject = ['$http', 'CATEGORIES_URI'];
function MenuDataService($http, CATEGORIES_URI) {
var service = this;
service.getAllCategories = function () {
return httpRequest(CATEGORIES_URI);
};
};
src/menuapp-module/menuapp.module.js:
angular.module('MenuApp', ['Data']);
src/menuapp-module/categories.controller.js:
angular.module('MenuApp')
.controller('CategoriesController', CategoriesController);
CategoriesController.$inject = ['MenuDataService'];
function CategoriesController(MenuDataService) {
console.log('CATEGORIES CONTROLLER');
};
index.html:
<script type="text/javascript" src="./lib/angular.min.js"></script>
<script type="text/javascript" src="./src/data-module/data.module.js"></script>
<script type="text/javascript" src="./src/data-module/menudata.service.js"></script>
<script type="text/javascript" src="./src/menuapp-module/menuapp.module.js"></script>
<script type="text/javascript" src="./src/menuapp-module/categories.controller.js"></script>
Any help would be great since I don't know what I'm doing wrong...
Thank you very much!
There is an extra space in the service name that you define.
.service('MenuDataService ', MenuDataService);
^
I have this main application called dashboard and I want to inject a custom made module called core.
I keep getting this injection error and I have no idea why. I am following a template that my co-worker has and it is pretty much word for word so I do not know why it is not working for me.
app.js
(function(){
'use strict';
var dependencies = [
'ngRoute',
'core'
]; // all our modules
angular.module('dashboard', dependencies).config(Config); //.config(Config);
Config.$inject = ['$locationProvider'];
function Config($locationProvider){
$locationProvider.hashPrefix('!');
}
angular.element(document).ready(function(){
angular.bootstrap(document, ['dashboard']);
});
})();
layout.hbs
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<link rel='stylesheet' href='/javascripts/bootstrap/dist/css/bootstrap.css' />
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<div class="flud-container">
{{{body}}}
</div>
</body>
<!-- JS Libraries -->
<script type='text/javascript' src='/lib/jquery/dist/jquery.min.js'></script>
<script type='text/javascript' src='/lib/bootstrap/dist/js/bootstrap.min.js'></script>
<script type='text/javascript' src='/lib/angular/angular.min.js'></script>
<script type='text/javascript' src='/lib/angular-route/angular-route.min.js'></script>
<script type='text/javascript' src='/modules/core/core.client.module.js'></script>
<script type='text/javascript' src='/modules/core/config/core.client.routes.js'></script>
<script type='text/javascript' src='/app.js'></script>
</html>
core.client.module.js
(function(){
'use strict';
// var dependencies = [
// ];
angular.module('core', []);
angular.module('core').run(intialize);
initialize.$inject = ['$rootScope', '$location'];
function intitialize($rootScope, $location){
//initialize module's variables here
}
});
console error:
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=dashboard&p1=Error%…(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular%2Fangular.min.js%3A20%3A463)
As you were using IIFE pattern for restricting the scope of code, you should invoke function of core.client.module.js immediately to core module get available.
core.client.module.js
(function(){
//---- code here-----//
})(); //<---invoke the function
I am trying simply read qr code by web camera but I get this error in console open angular help page but saying using ngRoute
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.7/$injector/modulerr?p0=q...)
angular and html code here
<html ng-app="App">
<body ng-controller="qrCrtl">
<qr-scanner width="400" height="300" ng-success="onSuccess(data)" ng-error="onError(error)" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
<script data-main="qr-scanner.js" src="require.js"></script>
<script src="src/jsqrcode-combined.min.js"></script>
<script>
var App = angular.module('App', ['qrScanner']);
App.controller('qrCrtl', ['$scope', function($scope) {
$scope.onSuccess = function(data) {
console.log(data);
};
$scope.onError = function(error) {
console.log(error);
};
$scope.onVideoError = function(error) {
console.log(error);
};
}]);
</script>
</body>
</html>
It seems that you did not inject the ngRouter library into your module, like so,
var App = angular.module('App', ['qrScanner', 'ngRoute']);
See here and here
Also, make sure that you import the Angular route library after angular, like so,
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
I have an AngularJS app. I want this app to run both in the browser and be able to distribute it with PhoneGap. In an attempt to do this, I have the following code:
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/app/app.js"></script>
</head>
<body>
...
<script type="text/javascript">
if (window.location.protocol === "file:") {
document.addEventListener('deviceready', startApp, false);
} else {
startApp();
}
</script>
</body>
</html>
app.js
function startApp() {
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function() {
...
});
myApp.run(function() {
...
});
}
controller.js
"use strict";
myApp.controller('MyController', function($rootScope, $scope, $location) {
...
});
myApp.controller('MyOtherController', function($rootScope, $scope, $location) {
...
});
...
If I add controllers.js after app.js in the head tag, I get an error that says:
Uncaught ReferenceError: myApp is not defined
This is happening because I'm manually bootstrapping the AngularJS app. I need to manually bootstrap it because of my need to startApp. For this reason, I need a way to dynamically load controllers.js from within startApp. Yet, I'm not sure how to do that. Can anyone provide some help?
THank you
you have missed ng-app="" attribute in html tag...
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script type="text/javascript" src="/app/app.js"></script>
</head>
<body>
...
<script type="text/javascript">
if (window.location.protocol === "file:") {
document.addEventListener('deviceready', startApp, false);
} else {
startApp();
}
</script>
</body>
</html>
Why don't you give requirejs a try?
He has a strong dependency management based loader and will avoid issues like this.
First thing first: To initialize your app angular module its require angular-route.js with angular.js file and these js file should be loaded before your app js.
<head>
<script type="text/javascript" src="/app/angular.js"></script>
<script type="text/javascript" src="/app/angular-route.js"></script>
<script type="text/javascript" src="/app/app.js"></script>
</head>
I'm attempting to follow the Sammy.js tutorial they have on their documentation site, and when I attempt to render my template it throws me:
Uncaught SyntaxError: Unexpected token ) sammy.template-latest.min.js:5
in Chrome. And in Firefox:
[14:55:55.136] SyntaxError: missing ; before statement # mysitehere/workspace/scripts/vendor/sammy/plugins/sammy.template-latest.min.js:5
My application script is:
(function($) {
var app = $.sammy('#main', function() {
this.use('Template');
this.around(function(callback) {
var context = this;
this.load('data/items.json')
.then(function(items) {
context.items = items;
})
.then(callback);
});
this.get('#/', function(context) {
context.app.swap('');
$.each(this.items, function(i, item) {
context.render('templates/item.template', {id: i, item: item})
.appendTo(context.$element());
});
});
});
$(function() {
app.run('#/');
});
})(jQuery);
In markup, I've imported:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="scripts/vendor/sammy/sammy-latest.min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/vendor/sammy/plugins/sammy.template-latest.min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/vendor/sammy/plugins/sammy.json-latest.min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/application/application.js" type="text/javascript" charset="utf-8"></script>
All of which resolve as 200's.
My template path is verified and copied from their github repo.
I did hear that it's a possible Chrome issue for pulling data not on the http:// protocol but I also tried in FF to no avail either.
Any ideas?