I have an problem to import "oi.select" in my jhipster project.
My controller js file :
(function() {
'use strict';
angular
.module('myApp')
.controller('UserProfileDialogController', UserProfileDialogController);
UserProfileDialogController.$inject = ['$timeout', '$scope', '$stateParams', '$uibModalInstance', 'entity', 'UserProfile', 'MdmEnumeration','oi.select'];
function UserProfileDialogController ($timeout, $scope, $stateParams, $uibModalInstance, entity, UserProfile, MdmEnumeration,oiSelect) {
} ....
I have already inject in my index.html :
<script src="bower_components/oi.select/dist/select-tpls.min.js"></script>
<link rel="stylesheet" href="bower_components/oi.select/dist/select.min.css">
I get the followin error :
angular.js:13550 Error: [$injector:unpr] Unknown provider: oi.selectProvider <- oi.select <- UserProfileDialogController
Any ideas ?
i solved this. I have a file : app.module.js which contains all modules to inject in the app. I add "oi.select" and it works. Thanks for your help
Related
I have below AngularJS controller code
(function() {
'use strict';
angular
.module('app')
.controller('TemplateCtrl', TemplateCtrl);
function TemplateCtrl($http, $auth, $rootScope,$scope){
}
})();
After compression from http://jscompress.com/ I got below output.
!function(){"use strict";function t(t,l,n,e){}angular.module("app").controller("TemplateCtrl",t)}();
Before compression there was no error but after compression I am getting below error
Error: [$injector:unpr] Unknown provider: tProvider <- t <- TemplateCtrl
I am not finding any clue to fix this ?
Thanks for your help and time.
For angular compressing you need to do some extra stuff. You need to let it know how to compress dependencies. So you need this:
(function() {
'use strict';
angular
.module('app')
.controller('TemplateCtrl', ["$http", "$auth", "$rootscope", "$scope", TemplateCtrl]);
function TemplateCtrl($http, $auth, $rootScope,$scope){
}
})();
Angular resolves the dependency based on the names.
Read more here: https://stackoverflow.com/a/35336414/2405040 (Dependency Annotation)
And change your code like this:
(function() {
'use strict';
angular
.module('app')
.controller('TemplateCtrl', ["$http", "$auth", "$rootscope", "$scope", TemplateCtrl]);
function TemplateCtrl($http, $auth, $rootScope,$scope){
}
})();
To prevent missing things for minification and write code using inline annotation syntax, add the ng-strict-di annotation with ng-app attribute.
Below code worked for me.
(function() {
'use strict';
angular
.module('app')
.controller('TemplateCtrl', TemplateCtrl);
TemplateCtrl.$inject = ['$http', '$auth', '$rootScope', '$scope'];
function TemplateCtrl($http, $auth, $rootScope,$scope){
}
})();
After compression this is
!function(){"use strict";function t(t,o,e,c){}angular.module("app").controller("TemplateCtrl",t),t.$inject=["$http","$auth","$rootScope","$scope"]}();
Thanks to all.
wright you controller in this way :
angular
.module('app')
.controller('TemplateCtrl', function () {
var something = function ($http, $auth, $rootScope,$scope){
}
});
routes.js
angular
.module('main')
.config(config);
config.$inject = ['$routeProvider', '$httpProvider'];
function config($routeProvider){
$routeProvider
.when('/', {
templateUrl:'main/views/landing.client.view.html',
controller:'MainController',
controllerAs:'mainCtrl',
resolve: {
orgTypes: orgTypes
}
})
.otherwise({
redirectTo:'/'
});
}
function orgTypes($http){
return $http
.get('emrsvs/orgTypes')
.then(function successCallBack(response){
return response;
}, function errorCallBack(error){
console.log(error);
});
}
controller.js
angular
.module('main')
.controller('MainController', MainController);
MainController.$inject = ['$rootScope', '$timeout', 'orgTypes'];
function MainController($rootScope, $timeout, orgTypes){
var mainCtrl = this;
mainCtrl.orgTypes = orgTypes;
}
Error
[$injector:unpr] Unknown provider: orgTypesProvider <- orgTypes <- MainController
Here i am injecting a dependency 'orgTypes' from route to controller. It produced unknown provider error. Is there anything wrong with my sysntax? can someone find my mistake
you should include following code in routes.js , before orgTypes function definition
angular.module('main')
.factory('orgTypes', orgTypes);
orgTypes.$inject = ['$http'];
/*You need to apply following changes also in controller*/
angular
.module('main')
.controller('MainController', MainController);
MainController.$inject = ['$rootScope', '$timeout', 'orgTypes'];
function MainController($rootScope, $timeout, orgTypes){
var mainCtrl = this;
orgTypes.then(function(response){
mainCtrl.orgTypes = response;
})
}
I can't see anything wrong if you inject the controller with the ng-view directive.
<div ng-app="main">
<ng-view></ng-view>
</div>
Your code works in this JSFiddle.
In your router config, you inject orgTypes from a resolver function. The $routeProvider service injects resolvers as locals into controllers. That method works OK.
If you use the ng-controller directive to load MainController, you will get that error. The $compile service doesn't have access to those resolvers in that case.
I'm writing routing logic using ngRoute of angular JS. The following is my code.
index.js
(function() {
'use strict';
function config($routeProvider, $httpProvider, cfpLoadingBarProvider, $tooltipProvider) {
$routeProvider.otherwise({redirectTo: '/404'});
$httpProvider.defaults.withCredentials = false;
$httpProvider.defaults.headers.common['content-type'] = "application/json";
}
angular
.module('pacman', ['ngCookies', 'ngRoute', 'ui.bootstrap', 'ui.validate',
'angular-cache', 'angular-loading-bar', 'angular-md5', 'rt.iso8601', 'ngAnimate']
)
.config(['$routeProvider', '$httpProvider', 'cfpLoadingBarProvider', '$tooltipProvider', config])
.run(['$rootScope', '$location', '$modalStack', '$cookies']);
})();
app.controller.js
(function() {
'use strict';
function config($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'app/components/landingpage/landingpage.html',
controller: 'appController'
});
}
function appController($scope, $rootScope, $location) {
$scope.submitLogin = function() {
alert("Successfully loggedIn");
};
}
angular
.module('pacman')
.controller('appController', ['$scope', '$rootScope', '$location', appController])
.config(['$routeProvider', config]);
})();
notFound.controller.js
(function() {
'use strict';
function config($routeProvider) {
$routeProvider.when('/404', {
templateUrl: 'app/components/notFound/404page.html',
controller: 'notFoundController'
});
}
function notFoundController($scope, $rootScope, $location) {
debugger;
}
angular
.module('pacman')
.controller('notFoundController', ['$scope', '$rootScope', '$location', notFoundController])
.config(['$routeProvider', config]);
})();
My code is a simple app. I'm trying to load different controllers based on routes. However at the time of loading the app, in the last controller's '$routeProvider' it throws an error
Uncaught Error: [ng:areq] Argument 'fn' is not a function, got string
http://errors.angularjs.org/1.4.8/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20string
I have no clue how to figure out the problem. Any leads would be appreciated.
The following is my library bundle order.
'node_modules/jquery/dist/jquery.js',
'node_modules/angular/angular.js',
'node_modules/angular-route/angular-route.js',
'node_modules/jquery.transit/jquery.transit.js',
'node_modules/angular-cache/dist/angular-cache.js',
'node_modules/angular-cookies/angular-cookies.js',
'node_modules/angular-loading-bar/build/loading-bar.js',
'node_modules/angular-ui-validate/dist/validate.js',
'node_modules/chart.js/Chart.js',
'node_modules/angular-md5/angular-md5.js',
'node_modules/angular-iso8601/dist/angular-iso8601.js',
'node_modules/angular-animate/angular-animate.js',
'node_modules/angular-chart.js/dist/angular-chart.js',
'node_modules/rx/dist/rx.all.js',
'node_modules/angular-ui-bootstrap/ui-bootstrap-tpls.js',
'node_modules/bootstrap/dist/js/bootstrap.js'
Kindly help.
Issue is in your index.js where you define the run method on your angular app.
angular
.module('pacman', []) // removed dependencies for brevity
.run(['$rootScope', '$location', '$modalStack', '$cookies']);
The last argument in the array passed to run should be a function but you forgot to pass a function. Change your run to add some implementation like below or remove the run if you don't see any use for it.
angular.module('pacman', []) // removed dependencies for brevity
.run(['$rootScope', '$location', '$modalStack', '$cookies',
function($rootScope,$location,$modalStack,$cookies){
// some statements here
}]);
Angular JS file declaration must come before the jquery in your index.html
'node_modules/angular/angular.js',
'node_modules/jquery/dist/jquery.js',
Using 5.2.11 of https://github.com/m-e-conroy/angular-dialog-service/tree/v5.2.11
Angular 1.4.8
I'm adding ui.bootstrap and dialogs.main to my app file:
var FuelTeamworkHelperApp = angular.module( "FuelTeamworkHelperApp", [ "ui.bootstrap", "dialogs.main", "ui.router", "ncy-angular-breadcrumb", "ngResource", "angular-loading-bar", "ngAnimate", "angular-growl", "ngPrettyJson", "angularMoment" ] );
However, I get an error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=FuelTeamworkHelperA…alhost%3A2804%2Fassets%2Fjs%2Fvendor%2Fangular%2Fangular.min.js%3A19%3A463)
Scripts are all definitely in the HTML and browser is loading them.
I tried using 'dialogs.controllers' which works, though according to the documentation that's not how you're meant to use it..!
Not sure how to then get it into my controllers either, which name I should be using? Just 'dialogs' doesn't work.
angular
.module( "FuelTeamworkHelperApp" )
.controller( "AdminSettingsController", AdminSettingsController );
//---
AdminSettingsController.$inject = [ "$scope", "$rootScope", "$state", "$stateParams", "$filter", "$resource", "$q", "growl", "dialogs", "FuelTeamworkHelperConfig", "AppSettings", "SowCustomListSections" ];
function AdminSettingsController ( $scope, $rootScope, $state, $stateParams, $filter, $resource, $q, growl, dialogs, FuelTeamworkHelperConfig, AppSettings, SowCustomListSections ) {
...
Answer to this (as commented by Mike) was the need to include the dependancy ngSanitize.
https://code.angularjs.org/1.4.8/angular-sanitize.min.js
docs.angularjs.org/api/ngSanitize
I get this error when i try to make a test
Error: [$injector:unpr] Unknown provider: $translateProvider <- $translate
I'm using karma with requirejs.
loadingCtrlSpec.js
define([
'angular',
'angular-mocks',
'app',
'angular-translate'
], function(angular, mocks, app) {
'use strict';
describe('loadingCtrl', function(){
var ctrl, scope, translate;
beforeEach(mocks.module('TestApp'));
beforeEach(inject(function($injector){
scope = $injector.get('$rootScope').$new();
translate = $injector.get('$translate');
}));
it("contains spec with an expectation", function() {
expect(true).toBe(true);
});
});
});
loadingCtrl.js
define(['angular'], function (angular) {
'use strict';
angular.module('TestApp', [])
.controller('loadingCtrl', ['$scope', '$translate', function($scope, $translate) {
$translate(['build.DEFAULT_EMAIL_SUBJECT','build.DEFAULT_EMAIL_NOTES']).then(function (translations) {
$scope.title = translations["build.DEFAULT_EMAIL_SUBJECT"];
$scope.notes = translations["build.DEFAULT_EMAIL_NOTES"];
});
}]); })
If i don't use angular-translate ($translate) everything is working so i don't think the problem is from karma.conf.js or test-main.js (require.conf for karma).
Your TestApp module will need to specify the pascalprecht.translate module as a dependency. Also be sure to include angular-translate as a dependency when defining your main module so the relevant script gets loaded:
define(['angular', 'angular-translate'], function (angular) {
angular.module('TestApp', ['pascalprecht.translate']);
});