I can't figure out what I'm doing wrong here.
//app.js
'use strict';
var app = angular.module('maq', [
'ui.router',
'maq.home.controller'
]).run([
'$rootScope',
'$state',
'$stateParams', function($rootScope, $state, $stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}])
.config([
'$stateProvider',
'$urlRouterProvider', function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/home.html',
controller: 'maq.home.controller'
})
}]);
//controller
'use strict';
app
.controller('maq.home.controller', [function(){
}]);
//error
Uncaught Error: [$injector:modulerr] Failed to instantiate module maq due to:
Error: [$injector:modulerr] Failed to instantiate module maq.home.controller due to:
Error: [$injector:nomod] Module 'maq.home.controller' 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.
You actually do not have a module called maq.home.controller Instead your registration is in such a way that it is the controller name.
If you want to separate your controller to another module (as what you are trying to do)
try:-
angular.module('maq.controller', []); //<-- Module creation
//...
angular.module('maq.controller')
.controller('HomeController', [function() { //<-- Controller registration
}]);
and in your app:-
var app = angular.module('maq', [
'ui.router',
'maq.controller' //<-- Controller mmodule
]);
Or just remove the dependency on the module that does not exist:-
angular.module('maq', [
'ui.router',
//'maq.home.controller' <-- Remove this
])
You are trying to depend on another module named maq.home.controller when it is not a module, it is a controller. You do not need to list controllers as dependencies in your module declaration. So just take that dependency out like so:
var app = angular.module('maq', [
'ui.router'
])
Related
i'm trying to use the $state service to load a particular state i defined. The problem is that i'm getting all kind of errors when trying to do it. I've read about the circular dependencies and also tried the methods provided in other threads of stackoverflow like using:
$injector.get($state)
But it also fails, i'm getting unknown provider $state error. Hope someone can help me...
this is my code:
'use strict';
angular.module("home", ['ui.router', 'home.controllers', 'urlLanguageStorage', 'pascalprecht.translate'])
.config(['$stateProvider', '$translateProvider', '$state',
function($stateProvider, $translateProvider, $state){
$translateProvider.useUrlLoader("home/mensajes");
$translateProvider.useStorage("UrlLanguageStorage");
$translateProvider.preferredLanguage("euk");
$translateProvider.fallbackLanguage("en");
$stateProvider
.state("introduccion", {
url : "/prueba",
templateUrl : "resources/js/home/views/introduccion.html",
controller : "HomeController"
});
$state.go('introduccion');
}]);
'use strict';
angular.module("home.controllers", ['home.services'])
.controller('HomeController', ['$scope', 'HomeService', function($scope, HomeService) {
probar();
function probar(){
$scope.texto = HomeService.prueba().get();
}
}]);
'use strict';
angular.module('home.services',['ngResource'])
.factory('HomeService',function($resource){
return {
prueba: function() {
return $resource('http://192.168.11.6:8080/web/home/prueba');
}
};
});
'use strict';
angular.module('urlLanguageStorage',['ngResource'])
.factory('UrlLanguageStorage', ['$location',function($location){
return {
put : function (name, value) {},
get : function (name) {
return $location.search()['lang']
}
};
}]);
The error i'm getting is the following one:
Failed to instantiate module home due to: Error: [$injector:unpr]
http://errors.angularjs.org/1.5.5/$injector/unpr?p0=%24state
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:6:412
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:43:84
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:40:344)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:41:78)
at Object.invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:41:163)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:321)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:445
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:222
You confused with $stateProvider and $state.
$stateProvider is a Provider, and $state is a Service. They are not the same. Short answer: you use $stateProvider at config phase, and use $stateProvider in your controller.
Your error happens because you injected $state service in your .config, which is wrong:
.config(['$stateProvider', '$translateProvider', '$state'
Remove the $state and you are okay:
angular.module("home", ['ui.router', 'home.controllers', 'urlLanguageStorage', 'pascalprecht.translate'])
//take out $state from config phase
.config(['$stateProvider', '$translateProvider', '$state',
function($stateProvider, $translateProvider, $state) {
$translateProvider.useUrlLoader("home/mensajes");
$translateProvider.useStorage("UrlLanguageStorage");
$translateProvider.preferredLanguage("euk");
$translateProvider.fallbackLanguage("en");
$stateProvider
.state("introduccion", {
url: "/prueba",
templateUrl: "resources/js/home/views/introduccion.html",
controller: "HomeController"
});
//remove this line, set this in controller
//$state.go('introduccion');
}
]);
I tried two of the solutions here to no avail.
This is my Error:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module flavorApplication due to:
Error: [$injector:unpr] Unknown provider: underscore
Here is my code for the module:
var underscore = angular.module('underscore', []);
underscore.factory('_', ['$window', function() {
return $window._;
}]);
Here is my App Config:
(function(){
angular.module("flavorApplication",
['ui.bootstrap',
'ui.router',
'angular-loading-bar',
'angular-confirm',
]);
angular.module("flavorApplication").config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
'underscore', function ($stateProvider, $urlRouterProvider, $locationProvider, underscore){
Here I'm trying to inject it into a Controller (probably where I'm going wrong)
(function () {
'use strict';
angular
.module('flavorApplication')
.controller('UsedSearchesController', UsedSearchesController);
UsedSearchesController.$inject = ['$stateParams', '$state', 'DataService', '_'];
function UsedSearchesController($stateParams, $state, DataService, _) {
var vm = this;
vm.currentSearches = $stateParams.search.split("|")
activate(vm);
////////////////
function activate(vm, _) {
vm.removeSearch = function (searchTerm) {
$stateParams.search = _.filter(vm.currentSearches,
function(search){return search !== searchterm}).join("|")
$state.go('home');
}
}
}
})();
You missed $window dependency to inject in your factory
underscore.factory('_', ['$window', function($window) {
Other thing you can't get factory/service singleton object to be avail at config phase of angular, you can't get that object there.
//remove 'underscore' dependency from config phase like below.
angular.module("flavorApplication").config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider){
Additionally, you don't need to add _ as a parameter in activate function,
function activate(vm) { //<-- remove _ from here
Don't forget to inject underscore module to flavorApplication
module so that would make available _ object throughout application
modules & components.
angular.module("flavorApplication",
['ui.bootstrap',
'ui.router',
'angular-loading-bar',
'angular-confirm',
'underscore' //<-- added underscore module here
]);
i am using angle theme with Angular for my project and i am doing unit testing on this using jasmine framework. But when i run the test cases, it gives error of "Argument 'controller' is not a function, got undefined". here is my test.js file....
describe('registrationController',function(){
beforeEach(module('appTesting'));
var $controller;
beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));
it('Check Working Or Not', function() {
var $scope = {};
var controller = $controller('registrationController', { $scope: $scope });
$scope.password = 'passwordlength';
$scope.grade();
expect($scope.strength).toEqual('strong');
});
});
Error -
Error: [ng:areq] Argument 'registrationController' is not a function, got undefined http://errors.angularjs.org/1.3.10/ng/areq?p0=registrationController&p1=not%20a%20function%2C%20got%20undefined
No i am using karma to run jasmine.
I am defining my module here
var App = angular.module('appTesting', ['ngRoute', 'ngAnimate', 'ngStorage', 'ngCookies', 'pascalprecht.translate', 'ui.bootstrap', 'ui.router', 'oc.lazyLoad', 'cfp.loadingBar', 'ngSanitize', 'ngResource'])
.run(["$rootScope", "$state", "$stateParams", '$window', '$templateCache', function ($rootScope, $state, $stateParams, $window, $templateCache, $location) {
// Set reference to access them from any scope
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$storage = $window.localStorage;
}
]);
App.config(['$stateProvider','$urlRouterProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide', '$ocLazyLoadProvider', 'APP_REQUIRES', 'RouteHelpersProvider',
function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $ocLazyLoadProvider, appRequires, helper) {
'use strict';
App.controller = $controllerProvider.register;
App.directive = $compileProvider.directive;
App.filter = $filterProvider.register;
App.factory = $provide.factory;
App.service = $provide.service;
App.constant = $provide.constant;
App.value = $provide.value;
$stateProvider
.state('app.registrationState', {
url: '/registration',
title: 'Ragistration Page',
templateUrl: helper.basepath('registrationPage.html'),
resolve: helper.resolveFor('registrationController','angularFileUpload')
})
}])
.controller('NullController', function() {});
App.constant('APP_REQUIRES', {
scripts:
{
'registrationController' :['app/js/registrationcontroller.js'],
}
});
Angular
Can the controller be found?
Do you have a controller named registrationController?
Is it in a module named appTesting?
You should have the following code somewhere in your app:
angular.module("appTesting").controller("registrationController", ...);
Karma
If you are using Karma-jasmine:
Did you include the file where you define the controller (registration-controller.js) in your karma.conf.js?
karma.conf.js
module.exports = function(config) {config.set({
files : [
'src/registration-controller.js',
...
],
...
});};
Jasmine
If you're not using Karma to run Jasmine, I'm assuming you're using the Jasmine test runner (HTML file). In that case:
Did you include the controller in the HTML file?
You need to include the controller's script:
<head>
...
<script type="text/javascript" src="src/registration-controller.js"></script>
...
</head>
Either the controller cannot be found or was not created due to error on the source code where controller was defined.
In my case, it was due to a statement that had error which affected succeeding lines of code cause the controller to be not loaded.
This can happen due to variety of reasons.
-> controller name is not referenced right
-> controller is not created due to some error.
In my case, I had the controller name mismatched in
directive:
.controller('IAddController', AddController)
Jasmine spec.ts:
// Instantiate controller
addController= $controller<any>('AddController', {*
I used yo-angular to generate my angularjs template with bootstrap/grunt/bower. I also want to use underscore in the app:
npm install underscore --save-dev
In the MainCtrl I am calling underscore.js just to see whether it works:
angular.module('yomanApp')
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'AngularJS'
];
_.each([1,2,3],console.log);
});
When I run the application with Chrome I get this errmsg in the console:
ReferenceError: _ is not defined
at new <anonymous> (http://localhost:9000/scripts/controllers/main.js:18:5)
at invoke (http://localhost:9000/bower_components/angular/angular.js:4203:17)
at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:4211:27)
at http://localhost:9000/bower_components/angular/angular.js:8501:28
at link (http://localhost:9000/bower_components/angular-route/angular-route.js:975:26)
at invokeLinkFn (http://localhost:9000/bower_components/angular/angular.js:8258:9)
at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7768:11)
at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7117:13)
at publicLinkFn (http://localhost:9000/bower_components/angular/angular.js:6996:30)
at $get.boundTranscludeFn (http://localhost:9000/bower_components/angular/angular.js:7135:16) <div ng-view="" class="ng-scope">
After this error I added the module to the app config:
'use strict';
/**
* #ngdoc overview
* #name yomanApp
* #description
* # yomanApp
*
* Main module of the application.
*/
angular
.module('yomanApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'underscore'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.when('/accordeon', {
templateUrl: 'views/accordeon.html',
controller: 'IssuesCtrl'
})
.otherwise({
redirectTo: '/'
});
});
Now I am getting this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module yomanApp due to:
Error: [$injector:modulerr] Failed to instantiate module underscore due to:
Error: [$injector:nomod] Module 'underscore' 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.
Last thing I tried was adding it to the index.html:
<script src="node_modules/underscore/underscore.js"></script>
This results in the same error as above. Also get a 404 for the underscore.js?? Is this a grunt configuration issue or anything else?
I tend to just use a constant for this type of thing. It's a simple approach and allows you to explicitly state your dependencies in your application.
Install with bower:
bower install underscore --save
Load the library before angular:
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="app/scripts/app.js"></script>
Define it as a constant (in app/scripts/app.js for example):
application.constant('_',
window._
);
Then in your controllers/services:
application.controller('Ctrl', function($scope, _) {
//Use underscore here like any other angular dependency
var stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}];
$scope.names = _.pluck(stooges, 'name');
});
Create a module with the name of underscore a module and then you can pass it in your application and it will be accessible. Currently the underscore module is undefined and hence you are getting this errror.
Your app becomes like this:
var underscore = angular.module('underscore', []);
underscore.factory('_', function() {
return window._; //Underscore should be loaded on the page
});
angular
.module('yomanApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'underscore'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.when('/accordeon', {
templateUrl: 'views/accordeon.html',
controller: 'IssuesCtrl'
})
.otherwise({
redirectTo: '/'
});
})
.controller('MainCtrl', function ($scope, _) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'AngularJS'
];
_.each([1,2,3],console.log);
});
Here's how you do it:link
You basically need to add angular underscore module which acts as a bridge between the two.
In an attempt to initialize my application, I'm trying to init the module the run() method as follow, but it does not compile.
the error is:
Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.3.5/$injector/unpr?p0=%24routeProvider%20%3C-%20%24route
Error: error:unpr
Unknown Provider
Unknown provider: $routeProvider <- $route
and here's the code in app.js :
(function () {
'use strict';
angular.module('rage', [
'ui.router',
'ui.bootstrap',
'ui.dashboard',
'kendo.directives',
'jqwidgets'
]).run(['$route', '$rootScope', init]);
function init($route, $rootScope){
var i = 1;
}
})();
However with no dependencies, it runs through fine:
(function () {
'use strict';
angular.module('rage', [
'ui.router',
'ui.bootstrap',
'ui.dashboard',
'kendo.directives',
'jqwidgets' // Kendo UI and jQWidgets libs (loaded in index.html)
]).run(init);
function init(){
var i = 1;
}
})();
$routeProvider is not part of ui.router module. and ui.router does not use ngRoute as well so you cannot access $route service inside the run block because it does not exist. Try including ngRoute if you need to use it (But you already have a ui.router so i am not sure).
angular.module('rage', [
'ngRoute' //<-- Here
'ui.router',
'ui.bootstrap',
'ui.dashboard',
'kendo.directives',
'jqwidgets'
]
Or just remove $route from the dependency list.