From this URL https://github.com/angular/angular-seed/blob/master/app/js/app.js, I got a controller like below.
function WineListCtrl(Wine) {
this.wines = Wine.query();
}
So far what I have been doing in angular is define a controller with $scope getting injected. So i tried, changing the above controller to
function WineListCtrl(Wine, $scope) {
console.log($scope, this)
this.wines = Wine.query();
}
But this is giving an error Error: Unknown provider for '$scope'.
I have three questions here:
Why the $scope of the controller is not injected.
Does this inside the WineListCtrl means the $scope.
Most of the errors in Angular are of the format 'Unknown provider
for XXXX'. What should i look for, if the firebug says so?
You are using "inferred dependencies" (see DI page) which should work fine, unless you minify or obfuscate your JavaScript.
See my answer to this question: 'this' vs $scope in AngularJS controllers
'Unknown provider' errors normally occur when you forget to use ng-app somewhere, or you forget to initialize your app with the appropriate module:
angular js unknown provider
AngularJS linky filter throws an "Unknown Provider" error
When writing your controllers in that form you should inject them with dependencies like so:
function WineListCtrl(Wine, $scope) {
console.log($scope, this)
this.wines = Wine.query();
}
WineListCtrl.$inject = ['Wine', '$scope'];
this is not the same as $scope. $scope is an angular-specific object created with $rootScope.$new()
See #1
Related
I am unable to inject resolve property of ui-routing in controller.
It is giving
Error: $injector:unpr
Unknown Provider
When I'm using controller property in state definition object as following
.state('widget', {
url: '/widgets',
template: '<h1>{{name}}</h1>',
controller: function(widget, $scope) {
$scope.name = widget.name;
},
resolve: {
// standard resolve value promise definition
widget: function() {
return {
name: 'myWidget'
};
},
// resolve promise injects sibling promise
features: function(widget) {
return ['featureA', 'featureB'].map(function(feature) {
return widget.name+':'+feature;
});
}
}
});
Then it is working fine and I'm able to get the widget in controller and able to use in html.
Please see the fiddle for code.
http://jsfiddle.net/sunilmadaan07/ugsx6c1w/8/
Might be I'm making a silly mistake.
Before posting this question I have tried returning with simple object, promise object to the property.
Thanks In Advance.
You can not get resolved data in the directive with the code you did. Basically, you are trying to implement component based structure with an older version of angular 1.3.x.
You have two options to achieve this.
Create route controller then you can access resolve to the controller as local dependency then use that dependency as binding to the directive.
Here is example - http://plnkr.co/edit/TOPMLUXc7GhXTeYL0IFj?p=preview
Upgrade angular version to 1.5.x and use "ui-router-route-to-components": "^0.1.0"
Here working example of your code - http://jsfiddle.net/ugsx6c1w/25/
In order for the controller to be able to use resolvers, it should be route component (only in UI Router 1.x) or route controller.
widget and features are local dependencies, they aren't registered in the injector and aren't available anywhere in the application except route controller/component.
As explained here, resolvers can be passed to nested components in UI Router 0.3.x and injected directly to route components in 1.x.
in the official doc :
https://ui-router.github.io/docs/latest/modules/ng1.html , in the example :
MyController.$inject = ['$transition$'];
function MyController($transition$) {
var username = $transition$.params().username;
// .. do something with username
}
$transition$ is injected in the controller, but when I do the same with angular 1.6.1 and ui-router 1.0.0-beta.3 I have the follwing error, using a component architecture:
Error: [$injector:unpr] Unknown provider: $transition$Provider
I am able to inject $transition$ only in a resolve.
From the ui-router Route to Component guide:
When routing to a legacy style template/controller (not routing to
components), the transition could be injected as $transition$.
...
To access the Transition on a routed component, you should bind to
$transition$ in your component.
As you noted, therefore this can only be accessed via the resolve when routing to components. This is because the $transition$ service is a locally scoped injectable which is not available for components. More information can be found in issue ui-router#3110
You are trying to inject the '$transition$' object where you should be injecting the '$transitions' service into your controller. See the distinction in the documentation on this page:
https://ui-router.github.io/ng1/docs/latest/modules/injectables.html#transition
$transition$ isn't a global service, it's a locally scoped injectable.
https://github.com/angular-ui/ui-router/issues/3110
You can use component input bindings to address this:
.component('adminApplicants',{
bindings: { $transition$: '<' },
templateUrl:'admin.applicants.html',
controller:function($http,$transition$){
}
})
I have JS file with simple function on clear JS:
function Alert(){
alert();
}
In another file I have application on Angular JS.
At first connected simple JS file on page and after Angular JS on tags <head>
How I can call Alert() method from controller Angular JS?
Simple JS file:
$(function(){
function leftTimeInit(){
$.each($('.action-loader'), function(index, val) {
initLoader($(this), $(this).data('percentage'));
});
}
});
Angular JS in controller:
leftTimeInit();
I get error:
Uncaught ReferenceError: leftTimeInit is not defined
You shouldn't do DOM manipulations in your controllers. So you should probably rethink how you want to use that function.
Anyway, leftTimeInit is declared in an anonymous function, and only visible there. You can't call it anywhere else. If you want that, you'll have to move it out of $(function(){}) . But as I've said, not recommended.
As for your Alert() example... In Angular you have access to simple JS global functions via $window (of course, they're global and you could access them anyway, but if you use $window you can mock them in tests).
.controller('Ctrl', function ($scope, $window) {
$window.Alert('something');
});
For File uploading in Angularjs $upload is injecting into controller(RegistrationCtrl), But there are multiple scope, $location etc are injected into it. Then while injecting $upload into the RegistraionCtrl I am getting some injector errors in console and page is not loading properly.
Controller Code as follows:
.controller("registrationCtrl",["$scope","$rootScope","$upload","$location","logger","$http","$q","$modal","$log",function($scope,$rootScope,$upload,$location,logger,$http,$q,$modal,$log){
});
Im having problem with injections.
app.js
angular.module('Help', []);
var app = angular.module('app', [
'restangular'
,'Help'
]);
app.$inject = ['RestangularProvider'];
app.config(
function(RestangularProvider) {
RestangularProvider.setBaseUrl('http://localhost:8080/api');
}
)
help.js
function HelpCtrl($rootScope, $scope, Restangular){
Restangular.one('questions').getList();
}
HelpCtrl.$inject = ['$scope', '$rootScope','Restangular']; //"TAG1"
angular.module('Help').controller("HelpCtrl", HelpCtrl);
I get the following error:
Uncaught TypeError: Object [object Object] has no method 'one'
If I remove line TAG1, everything works. However I need to inject it the right way. What is the problem here?
The injector is used to help AngularJS know the order of parameters given to the function in case the variable name change (e.g. after minimizing your JavaScript).
In your case, you've switched up the order of your injector parameters and the method signature, meaning that AngularJS will think that $scope is $rootScope and vice versa.
Either remove your $inject or make sure the parameters are in the same order in both your method signature and in your injection array.