Restangular call service as query string parameters angularjs

How to call a service as query string(like shown below) parameters in angularjs??

/resource/subelement?query=param

Get to know what is restangular here

application-service.js:

var getDetails = function(application, location, product) {
return $q(function(resolve, reject){
var params = {
product: product,
location: location,
};

Restangular.one(‘servicename’).customPOST(application, “”, params, {}).then(function(response){
console.log(“servicename”, response);

resolve(response);
}, function(reason){
reject(‘Problem submitting the application. Reason: ‘ + reason);
});
});
};

Now in controller where ever you should call this getDetails method. Just add ApplicationService as dependency injection. Thats it, you can run your application and check response in console.log after service call.

React JS – A Javascript library from Facebook

I came to know about this new framework by facebook when i was exploring web. Will this can be useful anyways to our CI?? If yes, we can make a document and share it…
A brief note to know about React JS:
React, sometimes styled React.js or ReactJS, is an open-source JavaScript library for creating user interfaces that aims to address challenges encountered in developing single-page applications. It is maintained by Facebook, Instagram and a community of individual developers and corporations.
React is intended to help developers build large applications that use data that changes over time. Its goal is to be simple, declarative and composable. It is considered to only be the view in the model–view–controller (MVC) software pattern, and can be used in conjunction with other Javascript libraries or larger MVC frameworks such as AngularJS.
New Features:
React maintains a virtual DOM of its own, rather than relying solely on the browser’s DOM. This allows the library to determine which parts of the DOM have changed by diffing the new version with the stored virtual DOM, and using the result to determine how to efficiently update the browser’s DOM.
One of it’s unique selling points is that not only does it perform on the client side, but it can also be rendered server side, and they can work together inter-operably.
React Supports .net too. Hence there is a separate framework for .net. Its http://reactjs.net/http://reactjs.net/
For More Details:

 

AngularJS: $watch, $digest and $apply

Kindly ignore this post..this is just an angular.copy(benlesh_blog_post) 😉

I would like to thank benlesh for such a great post explaining what is watch,digest and apply in an clear cut manner.

For my reference i am just posting necessary content here.

What is a $watch?

Let’s talk about this first. $watch is arguably the most important internal feature of Angular. $watches can be used to watch any value, and trigger a function call when that value changes. A $watch can be set up from any $scope by calling $scope.$watch() as shown below.

Setting up a $watch

There are two ways to set up a watch, by expression, or by function. Technically, they both do the same thing. If you pass an expression (a string), it will be evaluated against $scope and converted to a function to be watched. If you pass a function, it just watches that function, with no conversion necessary.

By Expression

The following will watch 'foo'. Which is an expression evaluated against $scope.

  1. //$scope.$watch(<function/expression>, <handler>);
  2.  
  3. $scope.$watch(‘foo’, function(newVal, oldVal) {
  4. console.log(newVal, oldVal);
  5. });

By Function

To set up a $watch by function, you can do the following, which is technically the same as what is shown above:

  1. $scope.$watch(function() {
  2. return $scope.foo;
  3. }, function(newVal, oldVal) {
  4. console.log(newVal, oldVal);
  5. });

Facts about $watch:

  • A watcher can evaluate any value.
  • A watcher’s handler can execute anything when aforementioned value has changed.
  • All watchers are evaluated when $digest() is called.
  • If the first argument of a $watch is a string, it is $eval’ed into a function prior to registration. It’s functionally equivalent to passing a function as the first argument, just with an extra step internally.

What is $digest?

At it’s core, the important thing to know about $digest is that it loops through all watchers on the scope it was called on and it’s child scopes. and evaluates them to see if they’ve changed, executing their handlers if they have. That’s the important part you need to know.

How to call $digest:

  1. $scope.$digest();

    What is $apply?

    Simply put, it’s a wrapper around $rootScope.$digest that evaluates any expression passed to it prior to calling $digest(). That’s it.  So, if you’re calling it by itself without passing an argument to it, you may as well just call $digest().

    How to call $apply:

    1. $scope.$apply(‘foo = “test”‘);
    2. //or
    3. $scope.$apply(function(scope) {
    4. scope.foo = ‘test’;
    5. });
    6. //or
    7. $scope.$apply(function(){
    8. $scope.foo = ‘test’;
    9. });

When to use $apply vs $digest?

$scope.$digest should rarely be used outside of some very specific instances. Such as an isolated scope in a directive that might want to only update itself. Or, in an extreme edge case if a scope object has been created for some other isolated purpose. $scope.$apply or $rootScope.$digest should be favored most of the time, as the general desired effect is to update an entire view or model.

You do need to use it if you are going to run code in a new turn. And only if that turn isn’t being created from a method in the AngularJS library. Inside that new turn, you should wrap your code in $scope.$apply(). Here is an example. We are usingsetTimeout, which will execute a function in a new turn after a delay. Since Angular doesn’t know about that new turn, the update will not be reflected.

function Ctrl($scope) {
  $scope.message = "Waiting 2000ms for update";
    
    setTimeout(function () {
        $scope.message = "Timeout called!";
        // AngularJS unaware of update to $scope
    }, 2000);
}

But, if we wrap the code for that turn in $scope.$apply(), the change will be noticed, and the page is updated.

function Ctrl($scope) {
  $scope.message = "Waiting 2000ms for update";
    
    setTimeout(function () {
        $scope.$apply(function () {
            $scope.message = "Timeout called!";
        });
    }, 2000);
}
http://www.sitepoint.com/understanding-angulars-apply-digest/

How to download youtube videos

Many people are not aware of this downloading youtube videos.

1. I hope few might be aware of tubemate app in android which downloads youtube videos in to your mobile directly.

2. Few might be aware of keepvid.com or similar sites to download youtube videos. But this doesnt work if your machine doesnt installed with java. Eventhough you install java..chances are less sometimes in working with this.

3. Few aware of download managers/chrome extensions where people struggle alot..

My best solution for downloading youtube videos is…….

Baidu Browser – download

06-03-2015 00-38-06

You can download audio/video from youtube/anysite..

Built in torrent software

video pop player and more..

 

 

Angular-material project from scratch

I would like to use yeoman(The web’s scaffolding tool for modern webapps) and nodejs to generate webapp and setup a proper environment for your project.

Prerequisites:

Nodejs

Git

Once after installation of nodejs and git(command prompt) check those version in command prompt by

node –version && npm –version && git –version && bower –version && yo –version && grunt-cli –version && grunt –version

you can update npm by npm update -g npm/npm install -g npm

First install all necessary dependencies globally by

npm install -g bower

npm install -g yo

npm install -g grunt / gulp

npm install -g grunt-cli

or simply all above in one line

npm install -g bower yo grunt-cli

Once this is done..you have to install

npm install -g generator-webapp //To scaffold a web application, you'll need to install the generator-webapp generator.

This is the default web application generator that will scaffold out a project containing HTML5 Boilerplate, jQuery, Modernizr, and Bootstrap.

Once this is done you can install your own required generator(say angular generator) using yo angular-generator

Now that the generator is installed, create a directory for your new project in c:/workspace

mkdir project
cd project

Scaffolding an AngularJS app

As always, before using a new generator, you must install it from npm first:

npm install -g generator-angular
(or)

npm install –global generator-angular

Hoping you are in your project folder say c:/workspace/project/

Now run all commands like npm install bower, npm install yo, npm install grunt to create all dependencies in local project folder.

If at any time any command throws error like ‘yo’ is not an internal/external command like that..you have to install those in locally..that is c:/workspace/project/. you can do that by using npm install yo (or) npm install yo –save-dev

c:/workspace/project/> yo angular

This generates an app folder in your directory where you will have all views/controllers/style etc etc

Now grunt serve will allow to run the application in localhost:9000

Question??

You may be thinking why we installed globally i.e., -g like npm install -g bower etc. This allows to install bower globally. You can check that in c:/users/username/appdata/roaming/npm

Note: appdata will be in hidden default. you have to make it visible in folder options.

With this we are done with setting environment and run your default application in localhost:9000.

If you want you can upload this repository to git and clone it anywhere. Refer this tutorial to enable git for your project.

 Angular-Material

Now lets move in working with angular material. Before you start working with..kindly refer this

Tutorials:

https://github.com/angular/material-start/tree/es5-tutorial

https://github.com/angular/material-start

use bower search angular-material to search for libraries.

Now install angular material using following command

bower install angular-material

Now you installed angular-material in your project folder. you can cross check by exploring bower_components folder. Now include this angular-material.css file in index.html.