I'm trying to get this fileuploader plugin working on a page (it's actually .cshtml, but hopefully that's not the source of the problem). I don't know how to debug angular references to find out what's missing.
The fileuploader does work in a different place in the app:
markup: Views\Shared_MasterClientLayout.cshtml
<script src="#Html.GetContentPathAbsolute()/Content/lib/angular-file-upload/angular-file-upload.min.js"></script>
<body id="ng-app" ng-app="clientPortal"
controller: www\public\app\disabilities\disabilities.app.js
(function () {
'use strict';
var app = angular.module('disabilities', ['angularFileUpload']);
app.controller('disabilitiesController', ['$scope', '$rootScope', '$routeParams', '$fileUploader', disabilitiesController]);
function disabilitiesController($scope, $rootScope, $routeParams, $fileUploader) {
}
})();
But it does not work on my page:
markup: Views\Referral\ThankYou.cshtml
<script src="#Html.GetContentPathAbsolute()/Content/lib/angular-file-upload/angular-file-upload.min.js"></script>
<div id="ng-app" ng-app="cmorApp">
controller: ReferralContent\app\CreateReferral\cm.attachmentUploadCtrl.js
var AttachmentUploadCtrl = ['$scope', '$http', '$fileUploader',
function ($scope, $http, $fileUploader) {
I get
Uncaught Error: [$injector:unpr] Unknown provider: $fileUploaderProvider <- $fileUploader
I can see on the Sources tab in Dev tools that angular-file-upload-min.js has been loaded.
The worst part about this is a lack of consistency of implementation across pages that the various components are spread across. I know of no way to debug angular empirically.
I literally have no way to tell which of several apps is running, which controller is attached to a page and which is referring to what page.
Is there any way of inspecting a page and exposing what objects are loaded on it?
Can I write console.log(ng-app) and have it return 'cmorApp'?
Or console.log(app.controller) and have it return 'AttachmentUploadCtrl'?
Related
I have the following scenario that works perfectly in debug mode, but as soon as I run it in release mode the second function (details page) is never triggered - I can only assume it has to do with minification.
Perhaps my design is the problem, but with my limited knowledge of Angular I need some advise on this.
Scenario:
2 MVC pages (First a summary list, second a details page)
1 ng-app instance
1 module
2 controllers - 1 per page.
On the first page the angular values resolve correctly, but on the details page all I see is the "{{ form.logEntry.Message }}" text (only in Release mode). This renders correctly in debug mode.
In the MVC pages I initiate the controllers as follows:
Summary page: <div class="container-fluid" ng-controller="LogEntriesController as table">
Details page: <div class="container-fluid" ng-controller="LogEntryController as form">
The outline of the angular code is as follows:
(function() {
'use strict';
var logEntryApp = angular.module('magiclogs',[]);
logEntryApp.controller('LogEntriesController', LogEntriesController)
LogEntriesController.$inject = ['$scope','$filter','$http','$q','$timeout'];
logEntryApp.controller('LogEntryController', LogEntryController);
LogEntryController.$inject = ['$scope','$filter','$http','$q'];
function LogEntriesController($scope, $filter, $http, $q, $timeout)
{
....
};
function LogEntryController($scope, $filter, $http, $q)
{
....
};
})();
The browser console points to an Unknown Provider error:
https://docs.angularjs.org/error/$injector/unpr?p0=nProvider%20%3C-%20n
Any insights/corrections welcomed.
I have implemented DirPagination in angularJs and it is working fine locally, but when I deployed it on server, it throws error
[$injector:unpr]
I assume this is minified version related issue, as on server my all js files including controller and app are using minified version,
Implementation
Simply indluded dirPagination.js file and pagination html file
Then after
var App= angular.module('App', ['ngRoute', 'use', 'ngMessages', 'angularUtils.directives.dirPagination']);
Then
In View
<li dir-paginate="u in list| filter:q | itemsPerPage: pageSize" current-page="currentPage">
And it is working with non-minified version.
Update
I confirmed this is minified version issue, as when I removed app and controller js min to non min files, it is working.
Any help how to fix this
You probably didn't use the synthax to keep your code right when minified.
When minifying, all the injections are remplaced with shorter names.
Let's take an example.
myApp.controller('MyCtrl', function($scope, $location) { ... });
When minified will be transform to:
myApp.controller('MyCtrl', function(a, b) { ... });
As you can see, you lost the dependancies names.
JavaScript variables are renamed, but strings stay unchange. You should change it to this synthax (as advice by the Angular team):
myApp.controller('MyCtrl', ['$scope', '$location', function($scope, $location) { ... }]);
This is a general dependency injection question. Obviously I am doing it wrong.
I am trying to get angular-xeditable working in my app.
https://vitalets.github.io/angular-xeditable/
I've installed it using bower, and added the appropriate script link to my head.
Now I'm trying to inject it.
The docs say
var app = angular.module("app", ["xeditable"]);
so, in my app: I do this:
portalApp.controller('portalController',
['$scope', '$http','$filter', 'xeditable',
function($scope, $http, $filter, xeditable) {
but I get the provide error, meaning it can't find xeditable.
angular.js:13642Error: [$injector:unpr] http://errors.angularjs.org/1.5.6/$injector/unpr?p0=xeditableProvider%20%3C-%20xeditable%20%3C-%20portalController
What am I doing wrong?
OK, duh. It should be
var portalApp = angular.module("portalApp", ['xeditable']);
portalApp.controller('portalController', ['$scope', '$http','$filter', function($scope, $http, $filter) {
I'm still getting lots of errors, but at least not that one.
I have a project which I would like to add a modal to. Great, so I read up and it sounds like the way to go is by using $dialog. I've got angular already, I've got bootstrap and bootstrap-ui.
Reading a post from 2013, they say "Hey, go get The Angular-UI Module, that's where $dialog is!"
Okay, I went to the angular-ui site, and unless I'm really stupid (and maybe I am) there is no such thing as The Angular-UI Module. Nor can I figure out easily which file on that site (since there are a WHOLE bunch) would contain the magical $dialog.
Help?!
This is being included:
<script src="lib/AngularJS/angular.js"></script>
<script src="lib/AngularJS/angular-route.js"></script>
<script src="lib/AngularJS/angular-sanitize.js"></script>
<script src="lib/jQuery/jquery-2.1.1.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="lib/bootstrap-ui/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="lib/lodash/lodash.min.js"></script>
<script src="lib/angular-file-upload/dist/angular-file-upload-all.js"></script>
var myApp = angular.module("myApp",
['ngRoute',
'angularFileUpload',
'ui.bootstrap.tpls',
'ui.bootstrap.rating',
'ui.bootstrap',
'ngMap',
'ngSanitize']
);
myApp.controller('myController',
['$scope','$rootScope', '$dialog',
function ($scope, $rootScope, $dialog) {
If I remove $dialog from the controller, everything is fine. As soon as I put it in there, I get the unknown provider error.
What you most likely want is $modal
myApp.controller('myController',
['$scope','$rootScope', '$modal',
function ($scope, $rootScope, $modal) {
Read more about it here: http://angular-ui.github.io/bootstrap/#/modal
If I remember correctly, is used to be called $dialog and was since changed.
The following file "works" (the sense that it does not throw any errors):
<!doctype html>
<html ng-app="modx">
<script src="http://code.angularjs.org/angular-1.0.0rc7.js"></script>
<script>
angular.module("modx", [], function($routeProvider) {
});
</script>
</html>
but this
<!doctype html>
<html ng-app="modx">
<script src="http://code.angularjs.org/angular-1.0.0rc7.js"></script>
<script>
angular.module("modx", [], function($routeProvider, $rootScope) {
});
</script>
</html>
gives the error:
Error: Unknown provider: $rootScope from modx
Source File: http://code.angularjs.org/angular-1.0.0rc7.js
Line: 2491
WTF?
You can not ask for instance during configuration phase - you can ask only for providers.
var app = angular.module('modx', []);
// configure stuff
app.config(function($routeProvider, $locationProvider) {
// you can inject any provider here
});
// run blocks
app.run(function($rootScope) {
// you can inject any instance here
});
See http://docs.angularjs.org/guide/module for more info.
I've found the following "pattern" to be very useful:
MainCtrl.$inject = ['$scope', '$rootScope', '$location', 'socket', ...];
function MainCtrl (scope, rootscope, location, thesocket, ...) {
where, MainCtrl is a controller. I am uncomfortable relying on the parameter names of the Controller function doing a one-for-one mimic of the instances for fear that I might change names and muck things up. I much prefer explicitly using $inject for this purpose.
I don't suggest you to use syntax like you did. AngularJs lets you to have different functionalities as you want (run, config, service, factory, etc..), which are more professional.In this function you don't even have to inject that by yourself like
MainCtrl.$inject = ['$scope', '$rootScope', '$location', 'socket', ...];
you can use it, as you know.