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
};
}
})();
Related
Module:
(function () {
"use strict";
angular.module("myModule", []);
})();
(function (module) {
"use strict";
module.config(['$httpProvider', function ($httpProvider) {
}]);
})(angular.module("myModule"));
Controller:
myModule.controller("MyController", function($scope) {
$scope.testvalue = "testvalue";
}
Now I want $scope.testvalue inside module.config,
(function (module) {
"use strict";
module.config(['$httpProvider', function ($httpProvider) {
var controllerdata = $scope.testvalue;
}]);
How can I do this? how to pass value from controller to module.config (both are in same module scope)
Not every variable has the privilege to appear in the config blocks. In your case, you cannot access the scope variable in your module's config block.
But there are alternatives:
Use a constant: Constants are available in config blocks, and are useful for static values that don't change.
Use a provider: If you need a custom configurable service available in your app, you can create an angular provider to make it customizable in the config blocks.
I have seen a lot of topic like that, but i didn't find solution.
I'm getting this error Error:
$injector:unpr Unknown Provider
Unknown provider: restaurantsProvider <- restaurants <- restaurantsController
Here is my controller:
(function () {
'use strict';
angular
.module('myApp')
.controller('restaurantsController', restaurantsController);
restaurantsController.$inject = ['$scope', 'restaurants'];
function restaurantsController($scope, restaurants) {
$scope.restaurants = restaurants.query();
}
})();
And service file:
(function () {
'use strict';
var restaurantsService = angular.module('restaurantsService', ['ngResource']);
restaurantsService.factory('restaurantsService', ['$resource', function ($resource) {
return $resource('/api/restaurants', {}, {
query: { method: 'GET', params: {}, isArray: true }
});
}]);
})();
If it affects on something, I'm using ASP.NET.
That error indicates that you are trying to inject something that angular doesn't know about. There are a few issues I'm seeing with your app structure which are leading to this issue...
You never actually declare your "myApp" module which is where you need to inject your restaurantService app.
Your controller takes in a 'restaurant' dependency but the service is actually called 'restaurantsService'
I would expect the app structure to look something like this:
(function () {
'use strict';
var restaurantsServiceApp = angular.module('restaurantsServiceApp', ['ngResource']);
restaurantsServiceApp.factory('restaurantsService', ['$resource', function ($resource) {
return $resource('/api/restaurants', {}, {
query: { method: 'GET', params: {}, isArray: true }
});
}]);
})();
(function () {
'use strict';
var myApp = angular.module('myApp', ['restaurantsServiceApp']);
myApp.controller('restaurantsController', restaurantsController);
restaurantsController.$inject = ['$scope', 'restaurantsService'];
function restaurantsController($scope, restaurantsService) {
$scope.restaurants = restaurantsService.query();
}
})();
Your serviceApp needs to be declared prior to it being injected in the other app.
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');
}
}
})();
Was building out an angular application, but am getting error undefined with the service or factory. Specifically "can not read property of setName undefined". I have went here to figure out my error. Even changed around my syntax figuring I maybe had something out of place but still throwing an undefined error.
Here is the controller:
(function() {
"use strict";
angular
.module("app", [])
.controller("mainCtrl", ["$scope", mainCtrl]);
function mainCtrl($scope, productService) {
$scope.testService = productService.setName("Data Service");
}
}());
Here is the service script:
(function() {
"use strict";
angular
.module("app")
.service("productService", function() {
var serviceObj = {};
serviceObj.name = '';
serviceObj.setName = function(newName) {
serviceObj.name = newName;
};
return serviceObj;
});
}());
Originally, I had the service as :
(function() {
"use strict";
angular
.module("app")
.service("productService", setName);
function setName(newName) {
var serviceObj = {};
serviceObj.name = '';
serviceObj.setName = function(newName) {
serviceObj.name = newName;
};
return serviceObj;
}
}());
I've had this problem recently and it seems to be that the function must be defined before the controller is created. I would recommend doing it the following way:
(function () {
"use strict";
//function
function mainCtrl($scope, productService) {
$scope.testService = productService.setName("Data Service");
}
//Controller and Module Init
angular
.module("app", [])
.controller("mainCtrl", mainCtrl);
//Inject requirements (This is needed for Minification)
mainCtrl.$inject = ["$scope", "productService"];
}());
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;
}());