Difference Between Constant and Value in AngularJS

Today I was reading AngularJs documentation about Constants and Values.

As far as I understand, I would like to put together all the reading which I gathered.

1. Constant can be used during config phase of Angular Js and Value is can only be used during run phase.

2. A constant can be injected anywhere as its value cannot be changed that is why it cannot be intercepted by a decorator 

For eg:

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

app.constant('PI', 3.14159265359);

app.controller('appCtrl', function(PI) {
    var radius = 4;
    // calculate area of the circle
    var area = PI * radius * radius; 
});

A value cannot be injected into configurations, But it can be intercepted by a decorator.

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

app.value('greeting', 'Hello');

app.config(function ($provide) {
    $provide.decorator('greeting', function ($delegate) {
        return $delegate + ' World!';
    });
});

You can learn more about decorators in below blog:
http://www.bennadel.com/blog/2870-using-module-decorator-in-angularjs-1-4.htm


3. Objects can be used inside a constant as long as we have not decide to change any value therein.
So, it is best to stick with values if values are changeable.

// Storing multiple constant values inside of an object
// Keep in mind the values in the object mean they can be modified
// Which makes no sense for a constant, use wisely if you do this
var app = angular.module(‘myApp’, []);

app.constant(‘config’, {
    appName: ‘My App’,
    appVersion: 2.0,
    apiUrl: ‘http://www.google.com?api’
});

// Storing multiple values inside of an object
var app = angular.module(‘myApp’, []);

app.value(‘user’, {
    firstName: ’‘,
    lastName: ’‘,
    email: ’’
});

How to improve Angularjs Performance

If  you are planning to create a large application using Angularjs, you need to take care of some basic performance issues in angular which may slow down your application.

1. Minimize Watchers

Angularjs uses dirty checking to keep track of all the updates in an app.So if we use so many watchers in our app it will rerun the digest cycle if one watcher is dependent on other watcher.

The following codes creates so many watchers.

1. Avoid using {{expressions}} instead use ng-bind.
2. Instead of using ng-repeat='product in products' use ng-repeat = 'product in products trackby product.id', also you can add pagination or autoscroll if using ng-repeat.
3. Avoid using $scope.$watch instead use $watchcollection
4. Avoid {{ value | filter }}, instead use $filter inside controller.
5. Use ng-if instead of ng-show.
6. If lot of changes happen in ng-model , Debounce it like ng-model-options="{debounce: 250}"
7. Use bind once if possible like below:
{{name}} to {{::name}}
8. Avoid calling $scope.apply and $scope.digest manually, as angularjs automatically calls these process.

If we put  :: before value data will work as a one way binding.

Integrating IIS Express with asp.net and connecting to DB

Yesterday I installed asp.net application on my system without installing visual studio and heavy editors.

Actually my purpose was to just run project and redesign the layout for responsive structure.
If you are comfortable with sublimeText or dreamweaver editor and would like to implement a static changes or frontend coding this article will be so helpful.

1. Install IIS Express from https://www.microsoft.com/en-us/download/details.aspx?id=48264 

2. Install SQL Server 2014 from https://www.microsoft.com/en-in/download/details.aspx?id=42299 and while installing remember/note username and password for database connectivity credentials

3. I had a backup file of SQL named sqlbackup.bak

To import .bak file in SQL Server follow below steps:

• Connect to a server you want to store your DB.
• Right-click Database.
• Click Restore.
• Choose the Device radio button under the source section.
• Click Add.
• Navigate to the path where your .bak file is stored, select it and click OK.
• Enter the destination of your DB.
• Enter the name by which you want to store your DB

4. After IIS Express is installed add your  asp.net files into Documents/My Websites/Website1/ folder
5. Open SQL Server 2014 Configuration Manager and Open
SQL Server Network Configuration -> Protocols for MSSQLServer : Enable Named Pipes and TCP/IP and restart sql server
6. Add connection string to web.config file.

Now after installing and configuring:
Open http://localhost:8080/myproject/ and done !!!

If you want to change css/html code can use any editor save and it just works great.

Services, Factories or Providers

When we start creating an angular js app, there are many modules and functions which doubts us which one to use and whereThe major ones are services, factories and providersThey both seems like so similar in angularjs and lets go ahead and work around some code examples which clearly mention the correct ways.

This shows how the CarService will always a produce a car with 4 cylinders, you can't change it for individual cars. Whereas CarFactory returns a function so you can do new CarFactory in your controller, passing in a number of cylinders specific to that car. You can't do new CarService because CarService is an object not a function.

The reason factories don't work like this:

app.factory('CarFactory', function(numCylinder) { this.dealer="Bad"; this.numCylinder = numCylinder
});

| Type | Singleton| Instantiable | Configurable|
| Factory | Yes | No | No |
| Service | Yes | Yes | No |
| Provider| Yes | Yes | Yes | ---------------------------------------------------

app.factory('CarFactory', function() {
function Car(numCylinder) {
this.delaer="Bad";
this.numCylinder = numCylinder
};
Car.prototype.breakCylinder = function() {
this.numCylinder -= 1;
};
return Car;
});
---------------------------------------------------
---------------------------------------------------
---------------------------------------------------
---------------------------------------------------
app.factory('CarFactory', function() {
return {
numCylinder: 4
};
});
app.service('CarService', function() {
this.numCylinder = 4;
});

And automatically return a function for you to instantiate, is because then you can't do this (add things to the prototype/etc):

See how it is literally a factory producing a car.

The conclusion from his blog is pretty good:

In conclusion,

1. Use Factory when you need just a simple object such as a Hash, for example {foo;1, bar:2} It’s easy to code, but you cannot instantiate it.
2. Use Service when you need to instantiate an object, i.e new Customer(), new Comment(), etc.
3. Use Provider when you need to configure it. i.e. test url, QA url, production url.

If you find you're just returning an object in factory you should probably use service.

Don't do this:

Use service instead: