I am trying to make a simple login page and click event on login button. I am able to display view. But in between I am getting this error on console:
Error: [ng:areq] http://errors.angularjs.org/1.3.13/ng/areq?p0=controllers%2FLoginCtrl&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:37:417
at Sb (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:50:510)
at tb (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:51:78)
at $get (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:106:331)
at c.controller.I.appendViewElement (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:387:3265)
at Object.c.factory._.create.H.render (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:385:16956)
at Object.c.factory._.create.H.init (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:385:16191)
at c.controller.I.render (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:387:2221)
at c.controller.I.register (http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js:387:1952)
Here is my code https://dl.dropbox.com/s/mq2vdmxmx5qbfdd/testapp.zip?dl=0
Please run index.html to get error
/*global define, require */
define(function (require) {
'use strict';
var controllers = angular.module('app.controllers', []);
controllers.controller('LoginCtrl', require('controllers/LoginCtrl'));
return controllers;
});
try to "execute" module , note the extra () parenthesis on the end of file
define(function () {
'use strict';
function ctrl($scope, $state) {
$scope.login = function () {
alert("--")
};
}
ctrl.$inject = ['$scope', '$state'];
return ctrl;
}());
Related
I have a controller as shown below.
(function () {
"use strict";
var app = angular.module('Demo')
.controller('MainController', ['$rootScope', '$scope', '$location', 'curUser',MainController]);
function MainController($rootScope, $scope, $location, curUser) {
//some logic here
}());
I tried to include a third party module called ngIdle and the resultant code looks like below.
(function () {
"use strict";
var app = angular.module('Demo', ['ngIdle'])
.controller('MainController', ['$rootScope', '$scope', '$location', 'curUser','Idle', function ($rootScope, $scope, $location, curUser, Idle) {
}]).config(function (IdleProvider, KeepaliveProvider) {
// configure Idle settings
IdleProvider.idle(5); // in seconds
IdleProvider.timeout(5); // in seconds
KeepaliveProvider.interval(2); // in seconds
})
.run(function (Idle) {
// start watching when the app runs. also starts the Keepalive service by default.
Idle.watch();
});
}());
Now I get an error as Error: [$injector:unpr] Unknown provider: curUserProvider <- curUser <- MainController. Here's the curUser factory definition
(function () {
"use strict";
angular.module("services").factory("curUser", curUser)
function curUser() {}
}());
curUser is defined in the services module so it needs to be added as a dependency in your app. This would have been the case even before adding ngIdle.
var app = angular.module('Demo', ["ngIdle", "services"])
The factory function should also return something.
function curUser() {
return { username: 'fooBar'};
}
See working plunker.
I am working on an project and need to modify some code to resolve an error
directive:
(function () {
'use strict';
angular.module('myApp').directive("myDirective", function ($filter) {
return {
// code
};
});
})();
This throws an error with the minified version only.
I am using angular 1.5.9
I think I need to define $filter somewhere.
I assume you have the app already defined somewhere.
You seem to have not injected $filter, try this instead:
(function () {
'use strict';
angular.module('myApp').directive("myDirective", ["$filter", function ($filter) {
return {
// code
};
}]);
})();
When you are using minified version of angular you need to inject the dependencies as a separate string array. Otherwise, dependency injector unable to identify which is which
(function () {
'use strict';
angular.module('myApp')
.directive("myDirective",myDirective);
myDirective.$inject = ['$filter'];
function myDirective($filter) {
return {
// code
};
}
})();
I'm trying to use a service from my main module that I'm going to use everywhere.
This is my controller where I would like to use it:
(function () {
'use strict';
angular.module('app.page')
.controller('authCtrl', ['$scope', '$window', '$location','requestService', authCtrl]);
function authCtrl($scope, $window, $location, requestService) {
$scope.login = function() {
requestService.test();
}
}
})();
module:
(function () {
'use strict';
angular.module('app.page',['app']);
})();
Service
(function () {
'use strict';
angular.module('app')
.service('requestService',requestService);
function requestService() {
this.test = function()
{
alert('test');
}
}
})();
But the requestService() is not found in my controller. What am I doing wrong here?
--EDIT--
error message:
angular.js:13424 Error: [$injector:unpr] http://errors.angularjs.org/1.5.3/$injector/unpr?p0=requestServiceProvider%20%3C-%20requestService%20%3C-%20authCtrl
at Error (native)
at http://localhost:3000/bower_components/angular/angular.min.js:6:416
at http://localhost:3000/bower_components/angular/angular.min.js:43:7
at Object.d [as get] (http://localhost:3000/bower_components/angular/angular.min.js:40:270)
at http://localhost:3000/bower_components/angular/angular.min.js:43:69
at d (http://localhost:3000/bower_components/angular/angular.min.js:40:270)
at e (http://localhost:3000/bower_components/angular/angular.min.js:41:1)
at Object.invoke (http://localhost:3000/bower_components/angular/angular.min.js:41:86)
at S.instance (http://localhost:3000/bower_components/angular/angular.min.js:88:235)
at n (http://localhost:3000/bower_components/angular/angular.min.js:64:174) <section data-ui-view="" class="view-container {{main.pageTransition.class}} ng-scope" data-ng-animate="1">
When you defined your service module you didn't provide an empty dependency array to create a new module. Angular will try to find an existing app module and not find it. You need to define your service module like this:
(function () {
'use strict';
angular.module('app', [])
.service('requestService',requestService);
function requestService() {
this.test = function()
{
alert('test');
}
}
})();
I am trying to make a login page. I have one controller on my login page. On button click I am showing an alert. But it is not displaying. I created a module of controller that why I am not able to create plunker or fiddle. I will share my small code in which I write a controller.
Here is my code
LoginCtrl.js
define(function () {
'use strict';
function ctrl($scope, $state) {
$scope.login = function () {
alert("--")
};
}
ctrl.$inject = ['$scope', '$state'];
return ctrl;
});
controller.js
/*global define, require */
define(function (require) {
'use strict';
var controllers = angular.module('app.controllers', []);
controllers.controller('LoginCtrl', require('controllers/LoginCtrl'));
return controllers;
});
Make sure in your HTML file you have added the controller name to the parent element or the appropriate element.You need to give the same controller name in both your HTML file and also the js file.
Make sure your controller file is included in your index.html file.
I'm using AngularAMD + RequirsJS for a single page app and I'm having some issues when injecting a service in the app.js file.
Here the code:
login_service.js
define(['app'], function(app) {
'use strict';
app.service('loginService', function($location, $state, Restangular) {
return {
login: function(data, scope) {},
logout: function() {},
isLogged: function() {}
}
});
});
app.js
define(['angularAMD', 'restangular', 'angular-ui-router'], function(angularAMD) {
'use strict';
var app = angular.module('MyApp', ['restangular', 'ui.router', 'loginService']);
app.run(function($rootScope, $state, $stateParams, $location, loginService) {
console.log(loginService)
/*
Error: [$injector:modulerr] Failed to instantiate module MyApp due to: [$injector:modulerr]
Failed to instantiate module loginService due to:
$injector:nomod] Module 'loginService' is not available! You either misspelled the module name or forgot to load it.
*/
});
app.config(function($stateProvider, $urlRouterProvider, $i18nextProvider, RestangularProvider) {
});
});
I would liked to access the loginService in the run function but can't as I keep getting the "Failed to instantiate module MyApp" error message.
I've tried to load the login service file as follow:
define(['angularAMD', 'restangular', 'angular-ui-router', 'services/login_service'], function(angularAMD) {
});
But then I have another error stating that app is undefined in the Login Service.
Thank you very much for your helps.
David
It is happeing because 'loginService' is not a module it's a service and you cannot add 'loginService' (service) to the module you can only add only module to another module.
you can do one thing :-
var app = angular.module('loginService',[]);
app.service('loginService', function($location, $state, Restangular) {
return {
login: function(data, scope) {},
logout: function() {},
isLogged: function() {}
}
});
Ps:- I am not sure about this :-P
The problem is caused by the fact that requireJS loads the files dynamically and this assures you that the files are already loaded before it runs the code.
You should do the following:
Remove the ng-app from your html
Use a manual bootstrapping:
angular.element().ready(function(){
angular.bootstrap(document,['MyApp']);
});