What is AngularJS ?

AngularJS is a JavaScript framework which simplifies binding JavaScript objects with HTML UI elements.

Let us understand this with a simple Example.

So if we analyze the above code (Control Binding In Plain Javascript) visually it looks something as shown below.

5Vlbc9o6EP41PKaDbS7mMdA0fTnTzuTMtH0UtrDVyBaVZS759ZGsFbZsTAzBzckJDyCt1quVvo+9wMBbJLt7jtbxPyzEdOAOw93A+zxwXd8fyncl2GvBeChnShBxEmqRUwoeyBMGITwX5STEmaUoGKOCrG1hwNIUB8KSIc7Z1lZbMWrvukaR2bEUPASINqU/SChiOJY7KeVfMYlis7MzmemVJQoeI87yFPYbuN6qeOnlBBlbcNDdUE89X8/3MB+NzE6p5dETY4kl4Dgrbw9OS+wLSdHG2pOS9NG+nyXjIeYVJe9OgssZk4bUKNktMFUAG/DGvjdbzoLVauIGsyme3mjTX7qqH+6X4xScfa1JAGCDaA7XoQWZ2BtUcShBhinjImYRSxG9K6XzAjmstpA4zGORUDl05BDviPgJYjX+pcafxmqWCr5XS4Wamui1qVrULqh9a7w6cW7QyVjOA3isoQNsEYhHuM1OcX64vHvMEixdU4zT6q4LFwbfUMebwtcHqBEdHjlY+c6I9Lq7CX0EeKqKZd2QVzPkj21D+pwNQ7ecI3Uko7ZWCllVQw4qhy9FBZk6EgsO1ROx+mIIOHmSIUU0azKEY4oE2dgOtdKiHYSOYLv6gjuTw9aXA+3B1fCGm7PwnlB5h/MVKxwrgZ/8yVWILBZudBy+lQruaL0rF+UoUp//7kSeYZ6iBBuD0jdtU2s0eFWyRlFlGxOBH9aowHwr867NpCxGIdvCJKIoU4Aotq0IpQtGmQ7wJh/JBwRnj7iyMixeB0c2mAsMKHSmZWvAqcM4hO/4tsyvjikb4mpuNWnrGAOt7/k5IEMir4CcE1lhLH+rauL/DIM7ruHgeE0czJVXcfD6gMFsfuUkrRMzpOlDXq4smTTdZwTukqMLnVdE4IsvHpyr8F9zX7CcfCz+m5jzNvwHo1dPNos8E9I//hEzzchUaP+NVOPAifrqTFr6DxMCm11Lr52JYfQlYe9QKUBWuLw1Gbk1E7NaR9G1NfH8Fwy9aWviHKtVr59PzbgkVl/saelI2sCAVuAMYrxooisxGkGmbuhsYrQ4PD2vXWrzq7d2yYFfqk5yMA3lrkXKCFS6IEFLDIPgVIax13Htku63kiTGR3KEkZ3XJL8Iqzz2RTSsVTM3k27h6SrAw1bvDviW7POXgPffP/DN5vncotXxjxWtc5KGJI3k+jdoxLsVr7J2VPJqhWoVnClLVZ6rVqcgQpRE6gf2QDJK/QA+V5Uokf8D3MJCQsKwSJLHSmImtVe0YHcs9bB8oJJMT1bKvfzCUvuJZXSk7D3G7As6Gzkt/x3QnCr/B/LungE=

And if we analyze the code (Control Binding In Angular1) visually it looks something as shown below.

7Vjvb9o8EP5rkLYP70QwpPQjUNZOWrVq7dp3H93YJFZNjIz51b++5+RMnIS2rC2lSEUIxefz2X6ex2cuDTIYL081nSTninHZaDXZskFOGq1Wt9uEX2tY5YZOE1rWEGvBclNQGC7FPUcjjotngvFpydEoJY2YlI2RSlMemZKNaq0WZbeRkuVZJzR2MxaGy4jKuvVGMJPgtlphYT/jIk7czEF4nPfc0ugu1mqW4nyNFhlln7x7TF0s3OiymTfd+BW2gzYaJjQtLeleqXHJoPm0gA+3K8qIpHRemlSK9K4M0K3SjGvPiQyBXa0UBLJP4+WAS8uwY69NmyN6G7Lu8YjBl/2Xh/6+rfsaYM1TXOxrQ6LC5lTOEI6rpfkzhW1l9qlZOXYzfriNEzRIf5EIwy8nNLK9C5Az2BIzltg9TShTC2zEkk4tcsBSH6fj2nCU/TabynxwR6dcjbnRK6uD3P0IGcJjE3SwvShEGDifxBOg86NIa7yOXCAIDwjiloCSGqC9NJ5JekiAEoIxPgSi7Rqig9nUQOBDgrRz/JFE2qlBWoOSp6xn7wRoRRYbEVnIDNWmbvZA5Uth/vee/1pMv3VsK4VV2y4LcdYo+vLZOavdL8/hDUtWM50R/ER2g1XH/LE42YGt8+bx4ijYRIvmkhoxL697E1c4w4USsKO1LNZ3N8qChBW68+3hKD+xVwO5gS6QC+wC5RjUAmXSWW/7ZWrC+30XanpCM48rbVdqwtT+pJqyZLUvNZFKkiHtF6qp7QZioJYL/A5qOnqhmjYkoUIoVhy2Z6eJZl+0B1W2XCHxr7QHHbwYXKDq5bND2ruHSPt+7w4Xx532Kltbn/YAM/geaMeC7bBo32uS71TKnVpu3pb28Gh/p939O/F4vznrXQ2vh78brVACYn0m5vAY28cv14Iv8HUJzNW8gPIdGLQFgG0OFPwzUFJy/dUNhgV542uSgj/21u4XAxDhjg+UVLagT1UKnv2RkLJiolLE9t1ClM9P+rZMEPAOpIcdY8GYnWZj9aHAeyQzKSfgx2FAv1yzvG+d16xIqY1Z2FPy+v2HL+UQT+mbFiUBbsjTxPWP4c0neZvJC8gjx9cjz/0x8LlzfL4td/Ui/fzXyfDnJ3mbyQvbz5PnKrpXkgfN4pVknruLt89k+AA=

Component in Angular2

In Angular 2, Components are the main way we build and specify elements and logic on the page.

In Angular 1, we achieved this through directives, controllers, and scope. In Angular 2, all those concepts are combined into Components.

To build an Angular 2 application you define a set of components, for every UI element, screen, and route. An application will always have a root component that contains all other components. In other words, every Angular 2 application will have a component tree, which may look like this:

5VhPb6M+EP00HHcFGGhybLtp9/KTVuphd48OTMCqwcg4f+inrw3jEIemza9VmkabQ5R5NmP7vWePiUduy829pHXxn8iAe6GfbTzywwvDycTX3wZoeyD2dWSAXLKsh4IBeGBPgCA+ly9ZBo3TUQnBFatdMBVVBalyMCqlWLvdFoK7o9Y0tyMOwENK+Rj9zTJV4LLCZMB/AssLO3KQTPuWOU0fcymWFY7nhWTRffrmktpcuNCNjxkSBFoEYkxY08qZ0pMQpQNIaAb6cLnMZaSiKyfmrHp0CZoLmYHcmRmZaXWlEDqR+VVuboEbha16YeKHizidJHQaTefz4Fs//btju28JllDhZD+aEh22onyJdFzXNWcpZYqJqm9sVGsl7kQCkyzwyM26YAoeapqa1rX2tMYKVXJsbgqaiTUGOaeNoU8rdYNjglSA3j9mZV0fXNY9iBKUbI0ZsPsEc+DmsdZYD04MrH+KHRfafhS1zbeZBxr1D2TySFbJiNU7xhXI5oIIDRKX0MAeT2dhNBoxOitrLlrQB97lcBr5X4nT+CCnl7Tvp7YG9DGx1fAslGKpu2xKoy9F6dWI0hGVUGXX5v6io9Rww1KXPU2EbP8Yxr7HNvyLBMKGqZ0mHZkW81Q/DGSjS89bxOq5iaXslHyl5CoqcziUpysgY4F2BIhf4N9iEjhVbOXO+yVRcIRfgukVDVvKamtPKbKna788fGr3trGf6MpNZE87m6enYJSns8h21e9zzeRfdE1XJM/lGhLt1bb90+BY15AYxTtkvxPaBt8fPmSbT7fGWWW3tWHv2v3/RT9Qcz5BdDvUaVR/7Rg5qSPeOCy6q8q5XBNt39xxdtE7fbO9QWMiW3E+bBsdDm/yfffhTxsyewY=

LET US SEE A SIMPLE COMPONENT

ng-repeat lookup from another json

AngularJS Providers

Provider	Singleton	Instantiable	Configurable
Constant
Value
Service
Factory
Decorator
Provider

Constant

A constant can be injected everywhere. A constant can not be intercepted by a decorator, that means that the value of a constant should never be changed (though it is still possible to change it programmatically in Angular 1.x).

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

 app.constant('MOVIE_TITLE', 'The Matrix');

 .controller('MyController', function (MOVIE_TITLE) {
   expect(MOVIE_TITLE).toEqual('The Matrix');
 });
    

Value

A value is nothing more than a simple injectable value. The value can be a string, number but also a function. Value differs from constant in that value can not be injected into configurations, but it can be intercepted by decorators.

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

 .value('movieTitle', 'The Matrix');

 .controller('MyController', function (movieTitle) {
   expect(movieTitle).toEqual('The Matrix');
 })
    

Service

Use Service 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. A service is an injectable constructor. If you want you can specify the dependencies that you need in the function. A service is a singleton and will only be created once by AngularJS. Services are a great way for communicating between controllers like sharing data.

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

 .service('movie', function () {
   this.title = 'The Matrix';
 });

 .controller('MyController', function (movie) {
   expect(movie.title).toEqual('The Matrix');
 });
    

Factory

A factory is an injectable function. A factory is a lot like a service in the sense that it is a singleton and dependencies can be specified in the function. The difference between a factory and a service is that a factory injects a plain function so AngularJS will call the function and a service injects a constructor. A constructor creates a new object so new is called on a service and with a factory you can let the function return anything you want. As you will see later on, a factory is a provider with only a $get method.

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

 .factory('movie', function () {
   return {
     title: 'The Matrix';
   }
 });
 .controller('MyController', function (movie) {
   expect(movie.title).toEqual('The Matrix');
 });
 .factory('catalogueService', function($rootScope, $http) {
   // We first define a private API for our service.

   // Private vars.
   var items = [];

   // Private methods.
   function add( id ) {
     $http.put( $rootScope.apiURL, {id:id} )
     .success(function(data,status,headers,config) { items.push(data); })
     .then(function(response) { console.log(response.data); });
   }

   function store( obj ) {
     // do stuff
   }

   function remove( obj ) {
     // do stuff
   }

   // We now return a public API for our service.
   return {
     add: add,
     store: store,
     rm: remove
   };
 };
    

Decorator

A decorator can modify or encapsulate other providers. There is one exception and that a constant cannot be decorated.

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

 app.value('movieTitle', 'The Matrix');

 app.config(function ($provide) {
   $provide.decorator('movieTitle', function ($delegate) {
     return $delegate + ' - starring Keanu Reeves';
   });
 });

 app.controller('MyController', function (movieTitle) {
   expect(movieTitle).toEqual('The Matrix - starring Keanu Reeves');
 });
    

Provider

A provider is the most sophisticated method of all the providers. It allows you to have a complex creation function and configuration options. A provider is actually a configurable factory. The provider accepts an object or a constructor.

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

 app.provider('movie', function () {
   var version;
   return {
     setVersion: function (value) {
       version = value;
     },
     $get: function () {
       return {
           title: 'The Matrix' + ' ' + version
       }
     }
   }
 });

 app.config(function (movieProvider) {
   movieProvider.setVersion('Reloaded');
 });

 app.controller('MyController', function (movie) {
   expect(movie.title).toEqual('The Matrix Reloaded');
 });
    

Summary

• All the providers are instantiated only once. That means that they are all singletons.
• All the providers except constant can be decorated.
• A constant is a value that can be injected everywhere. The value of a constant can never be changed.
• A value is just a simple injectable value.
• A service is an injectable constructor.
• A factory is an injectable function.
• A decorator can modify or encapsulate other providers except a constant.
• A provider is a configurable factory.

Android vs. iOS vs. Windows Phone: Which is Best for Business?

The best business smartphones have sharp displays, high-quality builds and long battery life. But there's a lot more to a smartphone than hardware.

But, what makes a phone great for business is the software it runs on.

There are three major OS today

• iOS from Apple
• Android from Google
• Windows Phone from Microsoft

Lets see comparision between them.

	Andriod	iOS	Windows
Apps	Android app store (Google Play store) rivals the iOS App Store, with more than 1 million apps available.	It can match almost every offering and Android and Windows Phone.	The Windows Phone Store has about 100,000, Apps compared to selections of more than 1 million on Android and iOS.
Features	Offers Google Now, an intelligent personal assistant. The service works by monitoring your activity within the Google ecosystem and pushing relevant notifications to you as they're detected. The service can notify you weather, traffic delay, appointmemnt and much more	The iWork for iOS apps are fully integrated with Apple's desktop iWork applications, letting users view and edit documents seamlessly on multiple devices. It has similar notification features as andriod has.	Live Tiles, which update in real time to display relevant information right on your home screen, ensuring you never miss a message or meeting.
Security	It's easy to side-load an unapproved app on an Android phone by downloading and installing the application from a source other than the Google Play store.	Apple's iOS is a highly secure mobile operating system. It's virtually impossible to install apps from unofficial sources	Windows Phone platform is comparable to iOS. All apps are reviewed and approved by Microsoft, and unlike on Android there's no need to consider dedicated anti-virus and anti-malware software - See more at: http://www.businessnewsdaily.com/5759-android-vs-ios-vs-windows-phone-small-business.html#sthash.oGqedQTx.dpuf

Toggle class with ng-click on several elements

There is one liner code for Toggle class in jquery

   $('#page-wrapper').toggleClass('nav-small');

But what if we want to do it in a angular way

So I made simple directive for same:

module.directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                element.toggleClass(attrs.toggleClass);
            });
        }
    };
});

so you can make any element toggle class you need

<button id="btn" toggle-class="active">Change Class</button>
<div toggle-class="whatever"></div>

Hey, if there's anybody I can help out there, just let me know. Thanks ;)

Are hashbang URLs a recommended practice?

No, hashbang URLs are not a recommended practice. But it's important to be absolutely clear about what this means, so read on.

http://example.com/#foo is a hash URL. The #foo portion of the URL is never sent to the server, and will cause the page to automatically scroll to the first element with an id of "foo" (or the first <a> element with a name of "foo"). This is a perfectly good thing, and is a recommended practice for linking to specific sections within a page.

However, http://example.com/#foo could also be interpreted by JavaScript to indicate a particular state. Perhaps the "foo" state means "make an Ajax request to get the dictionary definition of the word 'foo' so we can display it to the user".

Now you've got a problem, because while this logic will work just fine as long as the JS runs, nothing at all will happen if the JS doesn't run. Furthermore, if you ever decide to change your URL structure to use a real URL like http://example.com/foo instead, then you'll either have to break all existing hash URLs that link to your site, or you'll need to keep that hash-handling JavaScript on your page forever so it can redirect users to the new URL.

In addition, search bots always ignore the hash portion of a URL when indexing a page. Always, with one exception: that one exception is that the GoogleBot (and only the GoogleBot) has some special and convoluted logic that allows to it recognize hashbang URLs like http://example.com/#!foo.

But there's a massive, massive caveat: the hashbang itself doesn't do a damn thing for you. All it does is tell the GoogleBot "hey, this website claims to support the Google Ajax Crawling Scheme". But the Ajax Crawling Scheme requires some pretty complicated server-side logic as well. You don't get it for free just by changing a # to a #!. So unless you've actually implemented the server-side logic necessary to support the Ajax Crawling Scheme, that #! in your URL is quite possibly damaging your Google rankings instead of helping them.

Furthermore, since Google is the only search engine that currently supports the Google Ajax Crawling Scheme (hint: the "Google" in the name of the scheme means "we just came up with this nonsense ourselves and didn't bother actually asking any other search engines if they thought it was a good idea"), your hashbang URLs will only be indexed by Google, even if you jump through all the hoops required to make this work properly.

So, to sum up:

• "Hash" URLs and "hashbang" URLs aren't the same thing, although "hashbang" has unfortunately become the generic name for "hash URLs that trigger JavaScript-based logic".
• Hash URLs are never sent to the server, so they're useless without JavaScript if you depend on them to trigger application logic.
• Since hash URLs require JS, you're doomed to either break all existing URLs or maintain a JS URL handler forever if you ever decide to change your URL scheme.
• "Hashbang" URLs don't automatically make your page indexable by search engines. You still need to do a lot of server-side work to make that happen. Even if you support the full Google Ajax Crawling Scheme correctly, that only helps you with Google. You're still screwed with the other search engines.

In short: relying on hash URLs for application logic should be an absolute last resort. If at all possible, you should avoid it.

Hey, if there's anybody I can help out there, just let me know. Thanks ;)