Dot Net Stuff

Defining Modules Values in AngularJS


The Module.value method allow us to create services that return fixed values and objects. This may seem like an odd thing to do, but it means we can use dependency injection for any value or object, not just the ones you create using module methods like service and filter. It makes for a more consistent development experience, simplifies unit testing, and allows you to use some advanced features, like decoration.

Defining a Value in the example.html File

...

...

In above example code we have defined a variable called now. We have assigned a new Date to the variable and then called the Module.value method to create the value service, which we called nowValue. We then declared a dependency on the nowValue service when we created my days service.

Using objects without values

Using values may seem like an unnecessary complication, and you may not be persuaded by the argument for unit testing. Even so, you will find that creating AngularJS values is just simpler than not using them because AngularJS assumes any argument to a factory function declares a dependency that it needs to resolve. Developers who are new to AngularJS will often try to write code like this, which doesn’t use a value:

...
var now = new Date();
myApp.service("days", function (now) {
this.today = now.getDay();
this.tomorrow = this.today + 1;
});
...

If we try to run this code, we will see an error like this one in the browser JavaScript console: Error: Unknown provider: nowProvider <- now <- days

The problem here is that AngularJS won’t use the local variable as the value for the now parameter when it calls the factory function, and the now variable will no longer be in scope when it is required. If we are determined that we don’t want to create AngularJS values—and most developers go through a phase of feeling this way—then we can rely on the JavaScript closure feature, which will let you reference variables from within functions when they are defined, example given below-

...
var now = new Date();
myApp.service("days", function () {
this.today = now.getDay();
this.tomorrow = this.today + 1;
});
...

Here we have removed the argument from the factory function, which means that AngularJS won’t find a dependency to resolve. This code works, but it makes the days service harder to test, and it is suggested to follow the AngularJS approach of creating value services.

As this article is also a part of Concepts while working with Angular JS Application . So, you must read other tutorials in order to complete understanding to developing Angular JS Application. Since, we are going to learn several concepts. That's why I have broken this article into several small article. Which allow us to easily understand several Angular JS features and concepts. Following are the list of articles.

Problems Solutions
Create an AngularJS module. Use the angular.module method.
Set the scope of a module. Use the ng-app attribute.
Define a controller. Use the Module.controller method.
Apply a controller to a view. Use the ng-controller attribute.
Pass data from a controller to a view. Use the $scope service.
Define a directive. Use the Module.directive method.
Define a filter. Use the Module.filter method
Use a filter programmatically. Use the $filter method.
Define a service. Use the Module.service, Module.factory, or Module.provider method.
Define a service from an existing object or value. Use the Module.value method.
Add structure to the code in an application. Create multiple modules and declare dependencies from the module referenced by the ng-app attribute.
Register functions that are called when modules are loaded. Use the Module.config and Module.run methods.

Summary: You should read above mentioned articles in order to completely understanding to developing an Angular JS application. This article is a part of Concepts while working with Angular JS Application, which is divided in to pieces of tutorials in order to understand easily. I hope you will like this article and find it useful.

Keen to hear from you...!

If you have any questions related to what's mentioned in the article or need help with any issue, ask it, I would love to here from you. Please MakeUseOf Contact and i will be more than happy to help.

About the author

Anil Sharma is Chief Editor of dotnet-stuff.com. He's a software professional and loves to work with Microsoft .Net. He's usually writes articles about .Net related technologies and here to shares his experiences, personal notes, Tutorials, Examples, Problems & Solutions, Code Snippets, Reference Manual and Resources with C#, Asp.Net, Linq , Ajax, MVC, Entity Framework, WCF, SQL Server, jQuery, Visual Studio and much more...!!!

blog comments powered by Disqus