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.

AngularJS Controller is not a function error

I'm getting error when adding ng-controller="HeaderController" to a div.
Error: ng:areq
Bad Argument
Argument 'HeaderController' is not a function, got undefined
my HTML looks like that:
<div ng-app="myApp">
<div ng-controller="HeaderController">
</div>
<div ng-controller="PostController">
</div>
</div>
Also I include following files:
MyApp.js
var myApp = angular.module('myApp', ['postServices', 'angularFileUpload', 'ngSanitize', 'ui.date', 'bootstrapLightbox', 'profileServices']);
HeaderController.js
myApp.controller('HeaderController', ['$scope', 'PostServices', '$http', function($scope, PostServices, $http) {
$scope.getBookmarksCount = function() {
PostServices.getBookmarksCount().then(function(response) {
if (response.data.status == 'success') {
$scope.bookmarksCount = response.data.bookmarksCount;
} else {
$scope.errorMessage = response.data.message;
}
})
};
}]);
PostController.js beggining of this file looks like:
myApp.controller('PostController', ['$scope', 'PostServices', '$http', 'FileUploader', 'Lightbox',function($scope, PostServices, $http, FileUploader, Lightbox) {
PostService.js contains a module named postServices and it contains a service PostServices:
angular.module('postServices', [])
.service('PostServices', ['$http', function($http) {
if I delete ng-controller="HeaderController" everything works fine.
Does anyone knows what could be the problem?

In your module you add the postServices without a capital at the start, while you add it in your headercontroller as PostServices. This might mess with the forming of your headercontroller.
Either one of those could be a typo, but it is very important that you inject the service precisely as it is defined (in your .service or .factory) in the ['PostService', bit. So if the service is called: postService, you should inject it in your controller as: ['postService, function(someNameThatDoesntMatter) if its called PostService, inject it as ['PostService', function(someNameThatDoesntMatter)
As I just shown, how you call it afterwards in the function parameter is up to you.
Update
You could create a module for your controllers to fix this. Make sure to inject your postServices in this module aswell. Then inject the controllers module in your myApp module :-) The benefit of working in a structured way like this, is that you can create a structure of including your JS which you can apply on every project you work on.

I don't know which version of Angular you use , I took 1.4.0 for my plunk example and try just to limit to the code you provide to see if I recreated the error.
I had to deal more with scripts inclusion order. It created error. The right order in order to make it work is
<link rel="stylesheet" href="style.css">
<script src="//code.angularjs.org/1.4.0/angular.js"></script>
<script src="MyApp.js"></script>
<script src="PostController.js"></script>
<script src="PostService.js"></script>
<script src="HeaderController.js"></script>
http://plnkr.co/edit/NhzQFmI1s9r98uAMZwYg
So Main point was to defined PostService.js before HeaderController

It seems likes
you forget include that HeaderController.js file in index.html.
Make sure your HeaderController.js is loaded properly.
Missing some where in gulp/grunt process.

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,

Angular.js - can't inject external module

I'm trying to make the simplest possible website setting, where I have an Angular.js app with single module depending on one external module (for example Restangular).
I don't know why, but I can not get it working. I'm getting get this kind of error:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.17/$injector/unpr?p0=restangularProvider%20%3C-%20restangular
Actually, it doesn't matter that it's restangular - I've tried it with other modules and the result was analogical.
I have created a plunker that shows my problem:
http://plnkr.co/edit/3ZUoDYtd4sVTT7nLpURi?p=preview
But there is not that much code - I will paste it here too.
In my index.html file I include angular.js, lodash.js (required by restangular), restangular.js and my application's script.js files with tags.
This is the body of my html:
<body ng-app="example" ng-controller="AppCtrl">
<p>Take a look into console... Restangular can not get injected. What am I doing wrong?</p>
</body>
And this is the content of script.js:
var app = angular.module( 'example', ['restangular'])
app.controller('AppCtrl', ['$scope', 'restangular', function($scope, Restangular) {
console.log(Restangular);
}]);
As a note - in the console I can do this:
angular.module('restangular')
but, this does not work:
angular.injector(["ng"]).get('restangular')
It seems that I'm missing something basic about Angular.js. Help will be appreciated...

Could it be this?
app.controller('AppCtrl', ['$scope', 'Restangular', function($scope, Restangular) {
Restangular hast to be written with a capital R
You wrote
app.controller('AppCtrl', ['$scope', 'restangular', function($scope, Restangular) {
At least now I see in the console
URL visited /edit/3ZUoDYtd4sVTT7nLpURi
editor-0.7.30.js
Object { configuration={...}, requestParams={...}, defaultHeaders={...}, more...}