I have a problem with Angular and injecting $cookies into a controller.
The $cookies is working fine in a service, but with this controller I'm getting an issue.
var app = angular.module('app', [
"ui.router",
"ngCookies",
'ui.bootstrap']);
angular
.module("app")
.controller("ListController", ListController);
ListController.$inject = ['$scope', 'DataService', '$state', "AuthenticationService", "$cookies"];
function ListController($scope, DataService, $state, AuthenticationService, $cookies) {
....
}
The $cookies object is coming through as undefined. The angular-cookies.js is included on the page, and is working inside the included AuthenticationService.
I found my problem:
Someone had cut and pasted the original controller code into a new controller, but neglected to rename the controller on the line:
ListController.$inject =[...];
So, when I came along and added the $cookies parameter, my version was being overridden.
Try this way
var app = angular.module('app', [
"ui.router",
"ngCookies",
'ui.bootstrap']);
angular
.module("app")
.controller("ListController",['$scope', 'DataService', '$state', "AuthenticationService", "$cookies", function ($scope, DataService, $state, AuthenticationService, $cookies) {
....
}]);
Did you include the file angular-cookies[.min].js ?
Also, as a good practice, don't use the same module for the app and the controllers. Have a
angular.module('app', [ 'app.controllers']);
angular.module('app.controllers', [
\\ define each controller here
]);
defined so that you can have clean separation of them.
Are $scope, DateService, $state available in your controller? I usually put this line of code after the declaration of controller
angular
.module("app")
.controller("ListController", ListController);
Related
Ok, first I install this from bower:
bower install angular-underscore-module
Then in modules/core/clients/app/config.js, in line 7 I added the injection:
var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ngMessages', 'ui.router', 'ui.bootstrap', 'ui.utils', 'angularFileUpload', 'underscore'];
To inject it in my controller, in modules/articles/client/controllers/articles.client.controller.js
I've added it like this:
angular.module('articles').controller('ArticlesController', ['$scope', '$stateParams', '$location', 'Authentication', 'Articles', '_',
function ($scope, $stateParams, $location, Authentication, Articles, _) {
Then, I've got this error:
angular.js:13920 Error: [$injector:undef] Provider '_' must return a value from $get factory method.
Then in this article:
Provider 'xx' must return a value from $get factory method in AngularJs
It says, I should insert { in front of return and Not at the next line, however, I couldn't find that return. Am I doing something wrong here? Please suggest. Thanks.
underscore attaches itself to window object. you don't need to include the dependency in controller. however if you still want to use '_' you could do something like this:
app = angular.module('MyApp', ['underscore']);
app.factory('_', ['$window', function($window) {
return $window._;
});
then you can include '_' as a dependency in your controllers.
Found it!
In your config/assets/default.js, the client.lib.js, you have to include both underscore.min.js and angular-underscore-module.js as code below:
[...]
'public/lib/underscore/underscore-min.js',
'public/lib/angular-underscore-module/angular-underscore-module.js',
[...]
This is a very common problem apparently when declaring multiple controllers but every fix on this forum that I tried to follow or somewhere else, didn't seem to work (probably am missing something).
I have app.js file and 3 separate controller files and a services file.
I used one of the controllers and everything worked fine. Now I am trying to redirect to another view which handled by ProfileManagement controller, but it is showing the error:
Error: [ng:areq] Argument 'ProfileManagementController' is not a
function, got undefined
This is what I have in the beginning of each controller file and also app.js...
app.js:
var app = angular.module('starter', ['ionic', 'starter.controllers', 'starter.services']);
app.run(function($ionicPlatform) {...
and in app.js, I am using this route before the error shows:
.state('tab.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/tab-home.html',
controller: 'ProfileManagementController'
}
}
})
My controllers are here...
UserAccessController:
app.controller('UserAccessController', ['$scope', '$http', '$state', '$q', '$rootScope', 'CreateUserService', 'UserObjectService', function($scope, $http, $state, $q, $rootScope, CreateUserService, UserObjectService){
and ProfileManagementController:
app.controller('ProfileManagementController', ['$scope', '$http', function($scope, $http){
}]);
Also with tabs project template of ionic framework, I got the file controller.js by default where I commented all controllers but left the first line:
angular.module('starter.controllers', []);
//.controller('ProfileController', function($scope) {})
//
//.controller('OrdersController', function($scope) {
//
//})
//
//.controller('MoreOptionsController', function($scope, $stateParams) {
//
//})
//
//.controller('ConnectionsController', function($scope) {
//
//});
What am I doing wrong here that leads to the error message? (the view actually associated with the route tabs.home actually loads but the console shows the error.
Thanks,
You probably forgot to add the script tag to define your controller within the html.
for example:
<script src="yourController.js"></script>
// <...loading all JS in one file by the Mincer library...>
angular
.module('firstapp', ['ngRoute', 'ngMaterial', 'ngMdIcons'])
.factory('MessagesService', ['$scope', '$filter', '$mdToast', '$animate', MessagesService])
.controller('MenuController', ['$scope', '$filter', '$location', 'MessagesService', MenuController]);
MessagesService is a function;
MenuController is a function;
I received a error: MessagesService is not exists.
If i remove MessagesService dependency from MenuController - it works good.
But i need create Message controller, what will add some toast about application, and dont know, how.
You could never inject $scope dependency inside angular factory
It should be without $scope dependency
.factory('MessagesService', ['$filter', '$mdToast', '$animate', MessagesService])
Is there a way to know what dependencies were injected into my Angular module?
angular.module('myModule', [
'ui.bootstrap'
])
.controller('myController', [function () {
// var dependencies = Magic.dependencies;
// console.log(dependencies);
}]);
In your controller, if you inject $window, you can dig for the dependencies, specifically, there exists a .requires on your module. To do this, you can either declare your module as a global var so we can find it on our $window, in this case, let's call it app - or - you can bypass globals and $window and call angular.module('myModule').requires directly.
I've added ngRoute as well to prove the array of dependencies that will be discoverable.
var app = angular.module('myModule',
[
'ui.bootstrap',
'ngRoute'
]).controller('ctrl', ['$scope', '$window', function($scope, $window) {
console.log($window.app.requires) // ["ui.bootstrap", "ngRoute"]
console.log(angular.module('myModule').requires) // without global - $window not needed
}]);
JSFiddle Link - working example
Note - If leveraging globals, you can simply call the window as such: window.app.requires - without injecting $window. However, see the AngularJS $window docs to understand why $window is preferred.
Building on #salniro's answer, you don't need globals, or $window.
The dependencies are listed on the .requires property of angular.Module:
angular.module('myModule', [
'ui.bootstrap',
'ngRoute'
])
.controller('ctrl', function() {
var app = angular.module('myModule');
console.log(app.requires); // ["ui.bootstrap", "ngRoute"]
});
http://jsfiddle.net/8vtf6gar/1/
I'm trying to add the bootstrap-ui module to my angular.js project. The documentation states that I simply have to add
angular.module('myModule', ['ui.bootstrap']);
to get this working. But I can't find out how I would add this in any way. I've read the whole chapter of https://docs.angularjs.org/guide/module and read lots of threads about it, but everything I tested didn't work so far.
my app.js:
angular.module('MyApp', ['ngCookies', 'ngResource', 'ngMessages', 'ngRoute', 'mgcrea.ngStrap'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
// followed by my routing
myCtrl
angular.module('MyApp')
.controller('MyCtrl', ['$scope', '$location', '$rootScope', '$routeParams', '$resource', '$alert', 'MyService',
function ($scope, $location, $rootScope, $routeParams, $resource, $alert, MyService) {
what I tried:
adding 'ui.bootstrap' after 'mgcrea.ngStrap' in app.js
adding 'ui.bootstrap' after *'MyService' in myCtrl
many more similar variations
The error messages I get depend on what I did. Since I'm probably completely on the wrong path at the moment I was hoping someone could tell me how I can add a module in angular.js correctly?
edit some error messages I encountered:
When I start my Crtl code with:
angular.module('MyApp', ['ui.bootstrap'])
I get
[ng:areq] Argument 'NavbarCtrl' is not a function, got undefined
(navbarctrl is a completely different ctrl)
when I start my app.js with
angular.module('MyApp', ['ngCookies', 'ngResource', 'ngMessages', 'ngRoute', 'mgcrea.ngStrap', 'ui.bootstrap'])
I get
TypeError: object is not a function
In my AuthService I try to use $alert (this works without bootstrap-ui) like
$alert({
title: 'Success!', //...
**edit 2: ** the problem seems to be that I can only use ngStrp OR ui.bootstrap (both use bootstrap underneath)
Are you ensuring that Angular UI specific JS Files are sent from server to client through bundling or direct reference?
You have to inject dependency of module in your app: something like this angular.module('MyApp', ['ui.bootstrap']);