Wednesday, April 30, 2014

angularjs adding values and avoid duplicate entries:

<!doctype html>
<html lang="en" ng-app="wittyapp">
<head>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<script src="http://code.angularjs.org/angular-resource-1.0.0.min.js"></script>
</head>
<body>
<div ng-controller="ContactController">

    Email:<input type="text" ng-model="moviename" />

    <button ng-click="addmovie()">Add</button>

    <h2>Contacts</h2>
    <ul>
<li ng-repeat="movie in movies"> {{ movie.moviename }} </li>
</ul>

</div>

<script>
var wittyapp=angular.module("wittyapp",[]);
function ContactController($scope) {
    $scope.movies = [{moviename:'viralpatel.net@gmail.com'}, {moviename:'hello@email.com'}];
    var somemovie=$scope.movies;
    $scope.addmovie = function() {
    var newmovie=$scope.moviename;
    var oldmovie;
    angular.forEach($scope.movies,function(eachmovie){
    if(newmovie.toLowerCase()==eachmovie.moviename.toLowerCase()){
    oldmovie=true;
    //document.writeln("same value exist");
    alert("same value exist");
    }

    /*else{

    somemovie.push({moviename:newmovie});
       $scope.moviename = "";
       } */

    });
    if(!oldmovie){

    somemovie.push({moviename:newmovie});
       $scope.moviename = "";
       }

}

}

</script>

</body>
</html>

Tuesday, April 29, 2014

Angularjs startdate and end date example

http://www.codinginsight.com/angularjs-and-pickadate/#comment-92

Monday, April 28, 2014

Angularjs show the selected value in the drop down and display the values in array object:

<!DOCTYPE html>
<html ng-app="myApps">
<head>
<title>Welcome to AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>

<script>
var myApp = angular.module('myApps', []);

myApp.controller('MyController', function ($scope) {

$scope.selection = {};

$scope.select = function(artist) {
$scope.selected = artist;
};

$scope.list = [{
name: "Beatles",
songs: ["Yellow Submarine", "Helter Skelter", "Lucy in the Sky with Diamonds"]
}, {
name: "Rolling Stones",
songs: ["Ruby Tuesday", "Satisfaction", "Jumpin Jack Flash"]
}];

/*angular.forEach($scope.list ,function(s){
services.push({songsName : s });
}); */

});
</script>
<h3>Method on controller</h3>
<div ng-controller="MyController">
<p>selected: {{selected.name}}</p>
<ul>
<li ng-repeat="artist in list">
<button ng-click="select(artist)" >{{artist.name}}</button>
<ul> <li ng-repeat="song in artist.songs">{{song}}<br/></li> </ul>
</li>
</ul>
</div>
<hr />

<h3>Setting into $parent</h3>
<div ng-controller="MyController">
<p>selected: {{selected.name}}</p>
<ul>
<li ng-repeat="artist in list">
<button ng-click="$parent.selected = artist" >{{artist.name}}</button>
<ul> <li ng-repeat="song in artist.songs">{{song}}<br/></li> </ul>
</li>
</ul>
</div>
<hr />

<h3>Container object</h3>
<div ng-controller="MyController">
<p>selected: {{selection.artist.name}}</p>
<ul>
<li ng-repeat="artist in list">
<button ng-click="selection.artist = artist" >{{artist.name}}</button>
<ul> <li ng-repeat="song in artist.songs">{{song}}<br/></li> </ul>
</li>
</ul>
</div>
<hr />

</body>
</html>
output:

angularjs controller, angularjs controller syntax

http://stackoverflow.com/questions/19804095/angularjs-controller-syntax

http://stackoverflow.com/questions/12469742/angularjs-list-and-detail-view

http://www.bennadel.com/blog/2456-grouping-nested-ngrepeat-lists-in-angularjs.htm

Friday, April 25, 2014

angularjs display values in selectbox, in sorting order

angularjs ng-disabled with multiple conditions

Thursday, April 24, 2014

angularjs Filters in depth:

http://suhairhassan.com/2013/07/25/angularjs-in-depth-part-2.html#.U1m4Wld9qjM

Display values values in td by sorting order using ng-repeat in angularjs:

http://htmlcssjavascript.com/javascript/sorting-by-multiple-fields-with-different-sort-orders-using-the-angularjs-orderby-filter/

http://sravi-kiran.blogspot.in/2013/02/FilteringAndSortingDataUsingAngularJS.html

http://stackoverflow.com/questions/20041083/get-ng-repeat-to-use-object-property-order

http://stackoverflow.com/questions/15127834/how-can-i-iterate-over-the-keys-value-in-ng-repeat-in-angular

Sorting by Multiple Fields with Different Sort Orders Using the AngularJS orderby Filter

Posted on July 25, 2013 by Rob Larsen

I’m working on a new, interactive, interface to the $100,000 Club dataset I keep on itsalljustcomics.com. The data deals with the world’s most valuable comic books (those worth more than $100,000) and it’s always just been a static list. Since I’ve started keeping track of that data, the number of entries has steadily grown to include hundreds of books. Because of that growth and in concert with the relaunch of that site, I’ve started to put together an AngularJS based interface to the data. One of the things I need to do is sort the displayed data by three different fields and with two different sorts. This is very easy to do in Angular, you just might not know it since the documentation for orderBy is crummy. The one example that’s there is more confusing than it needs to be and only shows one variation.
Here’s how you do it.

ng-repeat

For starters, this example uses the ng-repeat directive. ng-repeat makes it trivial to loop through a collection and apply an HTML template to every member of the collection. In this example items is a collection of JavaScript objects stored in an array on the controller’s scope.

app.controller('MainCtrl', function($scope) {

  $scope.items = [{

    "title":"Action Comics",

    "issue":"1",

    "publisher":"DC Comics",

    "cover_date":"1938-06-01",

    "pedigree":"Church",

    "grade_src":"Anecdote",

    "grade":"9.2",

    "general_commentary":"Best Existing",

    "uid":0}]

});

Every time through the loop the value of that particular item in the array is exposed to the template as it and any properties of that object are available using familiar dot notation. Those values are included in the template using a familiar bracket pattern and Angular recognizes them, interpolating the values into the page.

<tr data-ng-repeat="it in items">

  <td>{{it.title}}</td>

  <td>{{it.issue}}</td>

  <td>{{it.pedigree}}{{it.collection}}{{it.provenance}}</td>

  <td>{{it.grade_src}}</td>

  <td>{{it.grade}}</td>

  <td>{{it.general_commentary}}</td>

</tr>

You’ll notice I don’t just throw ng-repeat in there. While ng-repeat will work as an attribute, I prepend data- to the attribute name. While this doesn’t matter to Angular, it’s the way the HTML specification defines adding custom attributes, so I use that pattern for consistency across all my code.
This initial version would output something like the following:
out-of-order

orderBy

While the previous example works fine, the rows are simply presented in the order of the members of the array. That might be okay for you if you’re getting a presorted collection, but if you want to change the order, you have the power to adjust it using Angular’s orderBy filter.
In this example we want to sort by the title of the comic (ascending, from A to Z), then by the issue number (ascending, from 1-∞) and finally by the grade (descending, from 10.0 to 0.5.) While this is dead easy to do using Angular, it’s not clearly documented.
This is where the superheroics happen. Inside the ng-repeat you invoke the orderBy filter on your data. This is done with the pipe “|” character. This will be a familiar pattern for you if you’ve hacked around on the Unix command line. Everything on the left of the pipe is passed to the filter referenced on the right of the pipe. In this case we’re using orderBy but it could be any of the built-in filters or a custom filter of your own devising. Commonly, orderBy is shown accepting a single variable (technically an Angular expression) representing one of the available properties of the members of the collection. What’s not clear from the documentation or common examples is that is that it can also accept an array of properties with which to order the collection.^{1 So passing ['title','issue','-grade'] to orderBy tells Angular to sort first by the title, then by the issue and finally by the grade properties of the it object. Notice something interesting about the way grade is passed into orderBy? Yes,
it’s that simple to reverse the sort in this syntax- simply negate the
variable with “-” and the sort on that property will be reversed. Pretty
sweet.}

<tr data-ng-repeat="it in items | orderBy:['title','issue','-grade']">

  <td>{{it.title}}</td>

  <td>{{it.issue}}</td>

  <td>{{it.pedigree}}{{it.collection}}{{it.provenance}}</td>

  <td>{{it.grade_src}}</td>

  <td>{{it.grade}}</td>

  <td>{{it.general_commentary}}</td>

</tr>

Here’s a plunker with a working demo. This example is basically Exhibit A of what I like about Angular and what drives me crazy about it at the same time. I love the elegant, declarative syntax that really does feel like HTML rewritten for web apps. I’m giddy over how powerful some of the pieces are- like the directives and filters we’ve seen here. The out of the box stuff is great and custom filters and directives are just such a powerful option.
And then there’s the documentation. While the documentation is mostly correct, and they provide some form of documentation for pretty much everything in the library, none of the documentation is great. It often reads like it’s written by an Angular engineer who’s been tasked with writing documentation- technically correct, but often bare-bones and written from an insider’s or experts perspective. For an example of the latter see the usage of the word “predicate” in the documentation of orderBy. Quick show of hands- how many of you know what that means? Obviously some of you will, but many of the self-taught hackers that populate the web developer sphere won’t and the documentation suffers because it often errs on the side of the experts.²

title

issue#

pedigree

grade_src

grade

general_commentary

sales

Action Comics

Larson

Anecdote

Action Comics

Church

Anecdote

9.2

Best Existing

Action Comics

PGX

9.0(r)

Action Comics

CGC

9.0

Comic Connect

2011-11-30

$2,161,000.00

Action Comics

CGC

8.5(mp)

How to create the spinner in our application in angularjs

spinner means when ever we click on something, before loading the data, we are showing the spinner once data loaded we are hiding the spinner.

In the index.html inlcude the angular.js file and font-awesome.css css file

and also include the font-awesome related files in to ur folder.

index.html:

<!DOCTYPE html>
<html>
<head>
<title>Welcome to AngularJS</title>
</head>
<body ng-app="myApp">
<div >
<div ng-controller="MainCtrl">
<p>Type a few numbers below to watch the filter</p>
<input type="text" ng-model="lowerBound" />
<ul>
<li ng-repeat="number in numbers | filter:lowerBound">
{{ number }}
</li>
</ul>
</div>
</div>
<div please-wait></div>
<link rel="stylesheet" href="font-awesome-4.0.3/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="constant.js"></script>
<script>
var myApp = angular.module('myApp', ['constant']); // here constant is the module name of constant.js

myApp.directive('pleaseWait', ['$rootScope', 'constants', function ($rootScope, constants) {
var getDocHeight = function(){
var D = document, h = 0;
h = Math.max(D.documentElement.scrollHeight, Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
return h;
};
return {
restrict: 'EA',
replace:true,
templateUrl: 'pleasewait.html',
link: function (scope, element) {
$rootScope.$on(constants.SHOW_PROGRESS_BAR, function () {
element.show();
element.css('height', getDocHeight());
});
$rootScope.$on(constants.HIDE_PROGRESS_BAR, function () {
element.hide();
});
}
};
}]);

myApp.controller('MainCtrl', ['$scope', 'constants', function ($scope,constants) {

$scope.$emit(constants.SHOW_PROGRESS_BAR);
// we simply include this above statement before calling the data

$scope.numbers = [10, 25, 35, 45, 60, 80, 100];

$scope.$emit(constants.HIDE_PROGRESS_BAR);
// we simply include this above statement after loading the data

// $scope.lowerBound = 42;

}]);

</script>

<style>
/* spinner */
#spinner .loading{background:rgba(0,0,0,0.4); height: 100%; left: 0; position: absolute; top:0px; width: 100%; z-index: 1051; text-align:center;}
#spinner .loading i{ color:#fff; margin-top:120px; font-size:30px;}
.loading{background:rgba(0,0,0,0.4); height: 100%; left: 0; position: fixed; top:0px; width: 100%; z-index: 1051; text-align:center;}
.loading i{ color:#fff; margin-top:10%; font-size:30px;}
</style>

</body>
</html>

constants.js:

angular.module('constant',[])
.constant('constants',{

"serviceErrorMsg":"We're sorry, your request could not be processed due to a technical problem with the server.",
"SHOW_PROGRESS_BAR": "SHOW_PROGRESS_BAR",
"HIDE_PROGRESS_BAR": "HIDE_PROGRESS_BAR"

});

pleasewait.html:

<div class="loading" ng-show="loading"><i class="fa fa-spin fa-refresh"></i></div>

Note: we called this file in directive

font-awesome.min.css:

/*!
* Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.0.3');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.3333333333333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.2857142857142858em;text-align:center}.fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;top:.14285714285714285em;text-align:center}.fa-li.fa-lg{left:-1.8571428571428572em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)}100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0,mirror=1);-webkit-transform:scale(-1,1);-moz-transform:scale(-1,1);-ms-transform:scale(-1,1);-o-transform:scale(-1,1);transform:scale(-1,1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2,mirror=1);-webkit-transform:scale(1,-1);-moz-transform:scale(1,-1);-ms-transform:scale(1,-1);-o-transform:scale(1,-1);transform:scale(1,-1)}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-asc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-desc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-reply-all:before{content:"\f122"}.fa-mail-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}

Note: here we are getting the spinner image from font-awesome.min.css file

Tuesday, April 15, 2014

Directive in angularjs

<h1>{{title}}</h1>
<div ng-repeat="friend in friends">

<h1>{{friend.firstName}}{{friend.lastName}}</h1>
<span>tweets:{{friend.tweets.length}}</span>

so instead of writing the above two ststements we simply create the directives and make use of it
in our entire application.

<contact-card></caontact-card>

or
<div contact-card></div>

go with

<contact-card data="friend">
<h1>contactcard</h1>
</caontact-card>

Note:
// it won't show in ouput because it is replaced with the directive,
still if we want to see this we need to include the transclude inside the directive.
like transclude:true, even if we include this inside directive we didin't see in output
so we need to another statement <div ng-transclude></div>
inside the our templateurl html page or within the
template inside the directive
i.e
template:"<div ng-transclude></div> <h1>{{friend.firstName}} {{friend.lastName}}</h1>",
i.e anything inside the directive is completely removed

another way to achieve the above functionality is adding attribute to the directive
<contact-card data="friend" title="contact">

</caontact-card>

so as we specify the title="card" as attribute inside the directive,
we included title inside the scope in a directive.
and also changed the
template:"<h1>{{title}}</h1> <h1>{{friend.firstName}} {{friend.lastName}}</h1>",

Note: <contact-card data="friend" title="contact"> </caontact-card>
In the above ststemnet we included the two attributes data and title, data attribute looking for the friend object data, and
title is looking for Contact object data.

Note:if we want to replace the contact tag from dom after we execute the program, we need to include the
replace: true, inside the directive.
here we need to remember the one point if we use replace: true,we need to place the template data as
inside the container, like the below.here container is div
template:"<div> <h1>{{title}}</h1> <h1>{{friend.firstName}} {{friend.lastName}}</h1> </div>",

if we place without container like below , we get the errors in the console.
template:"<h1>{{title}}</h1> <h1>{{friend.firstName}} {{friend.lastName}}</h1>",

</div>
Note: angularjs automatically converts the hyphenated version to camel case version
example above we mention the directive name as contact-card
but we create the name of directive as contactCard.
contactCard is name of directive.
and second argument fucntion is dependency injection function,
so here we may include others to inside the function.
What this function gonna return is objective.

angular.module("myapp",[])
.directive("contactCard",function(){
return{
restrict:"E",
scope:{
data:"=",
title:"=" // here data the is the name of the attribute we mentioned above in the directive
              here equal to menas binding can happen in both ways

}
controller:function($scope){
alert("controller");
console.log("controller");
console.log("$scope.friend");
},
replace: true,
template:"<div> <h1>{{title}}</h1> <h1>{{friend.firstName}} {{friend.lastName}}</h1> </div>",
link:function(scope,element,attribute){ // never add the $ sign for the scope inside the link function
                                           because it is just a parameter here not dependency injection
console.log(arguments);
element.click(function(){
alert('click');
}
}

};

});
How to pass the information to directive is through attributes
In the above instead of template we can use the templateUrl,
but we keep the html code in seperate file and and give that file name for templateUrl.

Note: we want to bind dom elements we use the link function, jquery as a element

so we can pass the data in 3 ways, inside the scope in a directive.

data:"@"----> for string
data:"="----> for object
data:"&"----> for run the function

Directives

namer.js:

index.html: here in this file we are injecting the above namer.js module, that namer module contains the namer directive, here directive use as a class.

Note: above namer.js file

angular.module("namer",[])
.directive("namer",function(){
return{
scope:true, // used to isolate the scope otherwise if we reuse the namer directive we get the same output all times chk without this once
restrict:"E", // here we may pass A or C or E as we like even with combination too like "EA"
link:function(scope,element,attribute){
scope.fullName=attribute.first+''+attribute.last;
scope.first=attribute.first;
scope.last=attribute.last;
},
template:"{{first}},{{last}}",
replace:true or false, // to replace the custopm directive tag or not
}
});