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){
});
Related
I have some HTML that is coming in a string and need the HTML to be rendered. Looking at using the ng-bind-html. That requires $sce to be injected into the controller. All of the example that I can fine have the controller set up like this.
angular.module('mySceApp', ['ngSanitize'])
.controller('MyController', ['$sce'] ...
But I have my controllers set up like this
app.component('myComponent', {
templateUrl: '../template.html',
controller: myController,
Where myController is a separate js file.
Any idea how I am supposed to do this with my setup?
In your separate js file there should be function that reference the controller. just pass it as parameter to that function like this
function myController($sce){
}
I am new to angular and trying to use the $location service outside of the scope using $injector.
When I run the following code I keep getting an error
angular.injector(['myApp']).get('$location');
Any suggestions?
The $location service is not part of the myApp module, it is part of the internal ng module.
To get the $http service, use:
var $http = angular.injector(['ng']).get("$http");
The $location service depends on the $rootElement service which is created at bootstrap time. To get the $location service use:
var $rootElementModule = function($provide) {
$provide.value('$rootElement', angular.element(document))
}
var $location = angular.injector(['ng',$rootElementModule]).get("$location");
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');
});
I am trying to inject $http serivce into app config, but getting "unknown provider $http error".
woi.config(['$routeProvider', '$locationProvider','$http', function($routeProvider, $locationProvider,$http){
$routeProvider
.when("/channels", {
templateUrl: test,
resolve: {
app: function($http){
}
}
})
]});
My question is , is it possible to inject $http serivce in app config ,and if not then what are the other ways to do ajax call before controller and template is called.
Thanks,
You can directly pass $http or any dependency into the function, without defining it at config function. The DI framework of Angular would inject dependencies for resolve object functions.
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