AngularJS: Injecting service into a HTTP interceptor (Circular dependency)

Recently, I’m getting circular dependency error while I’m injecting my service to HTTP interceptor. Code works well if I’m remove my service dependency from HTTP interceptor.

Find my interceptor code below where I’m injecting my ‘waitingDialog‘ service which have ‘$uibModal’ (angular ui-modal) dependency. Continue reading

Common Developer Mistakes in AngularJS

Hi All,

After long time, finally got a time for blog. I found such a nice post on Toptal.com by Michal Mikolajczyk. He list out top 18 most common developer mistakes in AngularJS. Couple of mistakes that I found that I’m already did such as overusing of resolve, not using named views, not fully utilizing controllerAs syntax etc. Thanks Michal 🙂

Find out complete list here and list out your mistakes. Hope it will helps you as well !!!!

Use the same controller for modal and non-modal template in Angular UI Bootstrap

Hi

I am using “Angular UI-Bootstrap” modal directive (http://angular-ui.github.io/bootstrap/) to open my template in modal window. And my controller that handles modal template which takes $modalInstance as one of its dependency. But now the issue is that for desktop and tablet view I want my template to open as modal window. While for mobile view I don’t want modal window but the same template need to open as separate page. Here I’m trying to use same controller and same html template for the both mobile view as well as desktop view.

But in mobile view the controller wasn’t created via $modal.open method and so Angular throws an error something like: Unknown provider: $modalInstanceProvider <- $modalInstance.
Continue reading

Nested view with ui-router

Hi All,

When creating single page applications, routing will be very important. We want our navigation to feel like a normal site and still not have our site refresh. UI-Router provides great flexibility and power when defining states and nested states in application.

AngularUI Router

The UI-Router is a routing framework for AngularJS built by the AngularUI team. It provides a different approach than ngRoute in that it changes your application views based on state of the application and not just the route URL.

Example

Let’s go with sample application which demonstrates ui-router with nested view as well as with multiple view.

Continue reading

Faced Problem After Minifying AngularJS Application

Hello devs!

I would like to share the problem that I have faced after minifying my AngularJS Application.

First of all, What is Minification of the Application?? Minifying applications let’s you speed up your application with smaller file sizes. You can load the one minified file of all of your modules together, which makes it speed up as well as it’s easy to setup your application.

Now let’s go to what happens with me. To speed up my AngularJS application, I have do minification of it. But after minifying I found that my apps doesn’t works correctly. While my unminified version works well. Now it’s very difficult to found exact error in minified file. (This is the one drawback of Minification). But after sometimes I found what is wrong with my minified file.

I found that I have declare Model and controller something like this in my unminified JS file:

var app = angular.module('myApp', []);

app.controller('mainController', function($scope) {
	$scope.variable_name = 'ANY MESSAGE';	
});

While I found the same code in my minified JS file is something like this:

var app=angular.module("myApp",[]);app.controller("mainController",function(e){e.variable_name="ANY MESSAGE"})

Here I can see that the $scope variable that was so crucial to my application has been turned into a tiny litter e. Angular will no longer know how to use that message that I declared.

Solution to Angular Minification

Now, what is the solution for this? After some googling I found two ways to fix this:

Solution# 1: Explicitly Inject Dependencies

We can use Angular’s $inject property on controllers as below:

var app = angular.module('myApp', []);

app.controller('mainController', function($scope) {
	$scope.variable_name = 'ANY MESSAGE';	
});

mainController.$inject = ['$scope'];
Solution# 2: Inline Annotation

This is the easier of the two solutions. Once you get in the habit of declaring all your Angular modules like this, then you won’t ever have to worry about minifying problems. Here I’ve added $http into this example just to show how you would inject multiple things.

var app = angular.module('myApp', []);

app.controller('mainController', ['$scope', '$http', function($scope) {
	$scope.variable_name = 'ANY MESSAGE';	
}]);

This is what I learn the proper way to declare Angular modules, otherwise our Angular applications may not work correctly after minification. For more information, see the Angular docs (scroll down to A Note on Minification).