We Keep Coding

AngularJS minified js files not working

I minified and merged all js files in one and included in html nothing is working in site.
There are so many files in js and I dont want include all one by one, so modified and merged all in one.
Is there any other way to decrease number of http calls for js files.

When minifying your AngularJS documents it is important that you follow the docs for dependancy injection, otherwise your code can break. You should make sure you are using the preferred array method an example can be seen below:
someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
// ...
}]);
As seen in the official Angular JS docs: https://docs.angularjs.org/guide/di.

It seems, that's a reason of implicit dependency injection. According to the Angular JS documentation:
Careful: If you plan to minify your code, your service names will get renamed and break your app.
Use strict dependency injection instead. For example:
angular
.module("MyModule")
.controller("MyCtrl", ["$scope", "$timeout", function ($scope, $timeout) {
...
}]);
More over, consider using ng-annotate that's much easier:
angular
.module("MyModule")
.controller("MyCtrl", function ($scope, $timeout) {
"ngInject";
...
});

To follow up on #dayle-salmon 's answer, if you have your controllers like this
app.controller('DemoCtrl', function(dependency1, dependency2){
// controller code
});
Change it to
app.controller('DemoCtrl', ['dependency1', 'dependency2', function(dependency1, dependency2){
// controller code
}]);
Reason JS minificators usually change the name of the dependency that is injected. And Angular wont have a clue on what the dependency is. So, you manually declare them so it won't cause a problem after minification!

Injecting Angular modules: Unknown provider

I followed a tutorial on how to organize and Angular project. I have a ng directory that contains all my controllers, services and my routes.js. This is then bundled all together into an app.js by my gulp config.
My module.js is like this:
var app = angular.module('app', [
'ngRoute',
'ui.bootstrap'
]);
Here's a bit of my routes.js:
angular.module('app')
.config(function ($routeProvider) {
.when('/login', { controller: 'LoginCtrl', templateUrl: 'login.html'})
});
Here's what my working LoginCtrl looks like:
angular.module('app')
.controller('LoginCtrl', function($scope, UserSvc) {
$scope.login = function(username, password) {
...
}
})
The tutorial didn't make use of any Angular modules and I wanted to try one out. I added ui.bootstrap to my page from a CDN and try to change the LoginCtrl to:
angular.module('app')
.controller('LoginCtrl', function($scope, $uibModal, UserSvc) {
...
})
But this throws me the following error:
"Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $uibModal
What is causing this error? In every tutorial I find this seems to be how they load a module, the only difference I see is that the tutorial don't seem to be using a router.
PS: Note that if I use an empty module list [] I get the exact same error. If I use a non-existing module ['helloworld'] I get an errorModule 'helloworld' is not available'. So I'm concluding that my `ui.bootstrap' module is indeed available.
EDIT: Plunker fiddle here: http://plnkr.co/edit/FWHQ5ZDAByOWsL9YeMUH?p=preview

angular route is another module you should not only include but also use like this
in the app module creation
means DI of route
angular.module('app', ['ngRoute']);
Please go through the angular route doc

Remove ['ui.bootstrap'] form controller. You should add dependencies only one time but you add it twice so the second dependency list override the first one.
angular.module('app')
.controller('LoginCtrl', function($scope, UserSvc) {
... })

your routes snippet looks wrong, you should be hanging the when call off $routeProvider and maybe declare $routeProvider as an injected val if it's not being picked up e.g.
angular.module('app')
.config(["$routeProvider", function ($routeProvider) {
$routeProvider.when('/login', { controller: 'LoginCtrl', templateUrl: 'login.html'})
}]);

I have checked your link. I think there is a serious issue with angular and ui bootstrap version.In ui-boostrap dashboard, it is written that 0.12.0 is the last version that supports AngularJS 1.2.x. I have tried with all combinations but it doesn't work with your angular version.
I suggest you to change angular version to latest and ui-bootstrap version to latest so it will work.
Please check out this working Plukr
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js'></script> //change this to latest also.
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.0.3/ui-bootstrap.min.js'></script>
<script src='./app.js'></script>
If you want to go with your angular version only. I'd request you to do some R&D. Try with different versions of ui-bootstrap. still if it doesn't work you can make PR.

adding another module dependency in angularjs, the application stops working

I ran into a weird problem that I could not figure out, I could not get a good explanation even after searching on the internet.
I have a application (webpage) which consists of ui-bootstrap's accrodion element which gets the data from a json file by $http request. This part is working perfectly fine. Now I wanted to add a multiselect dropdown and I wanted to use the element provided in ui-select. But when I add the dependencies 'ngSanitize' and 'ui-select' in the module, the application doesn't work. I haven't added any dropdown elements, just the dependencies. I don't understand where the problem is.
The original application controller
var app = angular.module('callApp', ['ui.bootstrap']);
app.controller('firstController', function($scope, $http, $modal, $log) {
//some functions are defined here
});
angular.module('callApp').service('popupService', function () {
//service is defined
});
Then i added the dependencies ngSanitize and ui.select
var app = angular.module('callApp', ['ui.bootstrap', 'ngSanitize', 'ui.select']);
app.controller('firstController', function($scope, $http, $modal, $log) {
//some functions are defined here
});
angular.module('callApp').service('popupService', function () {
//service is defined
});
Now the application doesn't work. I haven't modified any other function or added any elements in the html. Why does such a problem arrive? Is there anything wrong with the declaration?

Have you added the reference to the js files to your html page too?
What errors do you see in the console (press F12)?
If the reference to the js files exist in your html then just check the paths are correctly pointing to the actual path.
Regards,

AngularJS : get translate key in app.js

In my application, I use the AngularJS module Pascal Precht (translate module). I come to you because I can not get in my method myApp.Run of app.js a translation key.
I can do in a controller or a view. But impossible to get it at the initialization of the project. It shows me the key, not correspondence.
Do you have a solution?
Here is my code:
var myApp = angular.module('myApp', ['ngRoute', 'ngAnimate', 'myApp.filters', 'myApp.services', 'myApp.directives', 'pascalprecht.translate']);
// Declare routeProvider
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl:'partials/connectView.html', controller:'ConnectController'});
$routeProvider.when('/homeView', {templateUrl:'partials/homeView.html', controller:'HomeController'});
}]);
// Declare translateProvider
myApp.config(['$translateProvider', function($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: 'res/localization/lang-',
suffix: '.json'
});
$translateProvider.preferredLanguage('fr_FR');
//$translateProvider.preferredLanguage('en_US');
}]);
// Declare Global variables
myApp.run(['$rootScope', '$filter', function($rootScope, $filter) {
$rootScope.list = false;
etc....
//I'm trying to get translate Key but it doesn't work
console.log($filter('translate')('MY_KEY'));
}]);
My AngularJS version is 1.2.16 (last stable version). Thx

Try injecting the $translate service in app.run().
angular-translate version 1.1.1 and below
myApp.run(['$rootScope', '$translate', '$log', function ($rootScope, $translate, $log) {
$log.debug($translate('MY_KEY'));
}]);
I'd also suggest you to upgrade to the latest version of Pascal Precht's angular-translate. There are some changes in the new version.
angular-translate version 2.0.0 and above
myApp.run(['$rootScope', '$translate', '$log', function ($rootScope, $translate, $log) {
// translate via promises (recommended way)
$translate(['MY_KEY', 'MY_OTHER_KEY'])
.then(function (translation) {
$log.debug(translation.MY_KEY);
});
// translate instantly from the internal state of loaded translation
$log.debug($translate.instant('MY_KEY'));
}]);
See this helpful migration guide.

Why don't you inject the $translate service in the run section
and then call it instead of using the filter?!
console.log($translate('MY_KEY'));

Well, Apparently I can't comment because of reputation issue, we came across something that might be what you are experiencing - since the locale file is downloaded only in the config part of angular, it might not be available (yet) when you call the translate.
We solved this by adding all the locale files upfront (we don't have many and they are small) and in the initialization we just choose the correct one, that way we avoid the problem.
(again this should probably be more of a comment then an answer, but I can't comment...)

This is not a solution for your issue, but if you try the following code in your 'run', you will get an idea, why the translation is not available at the initializing state.
myApp.run(['$rootScope', '$filter','$timeout', function($rootScope, $filter,$timeout) {
$timeout(function(){
alert($filter('translate')('MY_KEY'));
},5000)
}]);
Problem here is, by the time the translation is being loaded the 'run' will be executed. So it cannot be assured that you will get the translation loaded at that time.

App not working if dependency left blank, working if dependency completely removed

I have a simple Angular app, calling a controller, which in turn calls a service. This service then loops through an array and returns a few strings.
If I leave the dependencies on the angular.module empty in the controller and the service it does not return the array:
app.js
angular.module('list_app', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/list', {
templateUrl: 'views/template.html',
controller: 'ListCtrl'
})
.otherwise({redirectTo: '/list_page'});
});
Controller
angular.module('list_app', [])
.controller('ListCtrl', ['$scope', 'Service', function ($scope, Service) {
Service.getList($scope);
}]);
Service
angular.module('list_app', [])
.factory(
'Service', function Service() {
function getList($scope){
var listRules = $scope.rules=['Test One', 'Test Two'];
var arrayLength = listRules.length;
for (var i = 0; i < arrayLength; i++) {
return(listRules[i]);
}
};
return {
getList: getList
}
});
But if I remove the dependancy [] from the controller and service, it works fine...
Like this:
angular.module('list_app', )...
Can anyone tell me why this is?

Thats because you only need to initialize your module once.
This happens when you use the curly braces:
angular.module('list_app', ['ngRoute'])
Afterwards you dont need them anymore as the module already is initialized.
So afterwards you can just call in all subsequent calls (controller, service):
angular.module('list_app')

Missing Include?
In order to use ngRoute you need to include angular-route before you load your controller. That would be the following (as of right now):
<script type="text/javascript" src="//code.angularjs.org/1.2.14/angular-route.min.js" />
You can also download the minified or full version of this library from the angular site.
Multiple Module Definitions
Another thing I noticed about the code is it looks like you are calling "angular.module" multiple times. You should only do this once, something like:
var list_app = angular.module('list_app', ['ngRoute']);
// define the service as an example:
list_app.factory('MyService', function Routine() {
});
// then define the controller
list_app.controller('MainController, ['$scope', function ($scope) {
}]);
The point is after you define the module once - you should use that reference to make any further declarations! This also might help fix your issue.
Side Note
One more comment is that when you try to inject a dependency that angular can't find the most common error you will see in the console is:
Uncaught Error: [$injector:modulerr] (etc.)
Whenever you see a message like this you should start to look at whether or not you are missing script includes and checking to make sure these are in the correct order.