Angular JS, javascript, jquery: January 2014

Tuesday, January 28, 2014

Angularjs example using ng-repeat and angular.forEach

dipslay json data into table and by using textbox add data to that table using input and submit.
with the duplicate entries:

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://code.angularjs.org/angular-1.0.0.min.js"></script>
<script src="http://code.angularjs.org/angular-resource-1.0.0.min.js"></script>
</head>
<body>
<div ng-app="wittyApp" id="ng-app" ng-controller="AvoidDuplicateEntries">

<table class="table table-bordered">
<thead>
<tr>
<td>#</td>
<td>Movie Names</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="movie in movies">
<td>{{$index+1}}</td>
<td>{{movie.moviename}}</td>
</tr>
</tbody>
</table>
<br/>
<form ng-submit="add()">
<input type="text" placeholder="enter moviename" size="30" ng-model="moviename"/><br/>
<input type="submit" class="btn btn-primary"/>
</form>


</div>

<script>
var wittyApp=angular.module('wittyApp',[]);
function AvoidDuplicateEntries($scope) {
$scope.movies = [
{moviename: "superman"},
{moviename: "spiderman"},
{moviename: "heman"}

];
var somemovie=$scope.movies;
$scope.add = function() {
var newmovie=$scope.moviename;
somemovie.push({moviename:newmovie});
$scope.moviename = "";
}
}

</script>

</body>

</html>

Angularjs example using ng-repeat and angular.forEach

dipslay json data into table and by using textbox add data to that table using input and submit.
and also restrict the duplicate entries:

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://code.angularjs.org/angular-1.0.0.min.js"></script>
<script src="http://code.angularjs.org/angular-resource-1.0.0.min.js"></script>
</head>
<body>
<div ng-app="wittyApp" id="ng-app" ng-controller="AvoidDuplicateEntries">

<table class="table table-bordered">
<thead>
<tr>
<td>#</td>
<td>Movie Names</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="movie in movies">
<td>{{$index+1}}</td>
<td>{{movie.moviename}}</td>
</tr>
</tbody>
</table>
<br/>
<form ng-submit="add()">
<input type="text" placeholder="enter moviename" size="30" ng-model="moviename"/><br/>
<input type="submit" class="btn btn-primary"/>
</form>

</div>

<script>
var wittyApp=angular.module('wittyApp',[]);
function AvoidDuplicateEntries($scope) {
$scope.movies = [
{moviename: "superman"},
{moviename: "spiderman"},
{moviename: "heman"}

];
var somemovie=$scope.movies;
$scope.add = function() {
var newmovie=$scope.moviename;
var oldmovie;
if(newmovie){
angular.forEach($scope.movies,function(eachmovie){
if(newmovie==eachmovie.moviename){
alert("moviename already exists");
oldmovie=true;
}
});

if(!oldmovie){

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

}
}
}

</script>

</body>
</html>

Tuesday, January 21, 2014

Angularjs built in directives to apply css conditionally

Angular provides a number of built-in directives for manipulating CSS styling conditionally/dynamically:

ng-class - use when the set of CSS styles is static/known ahead of time
ng-style - use when you can't define a CSS class because the style values may change dynamically. Think programmable control of the style values.
ng-show and ng-hide - use if you only need to show or hide something (modifies CSS)
ng-if - new in version 1.1.5, use instead of the more verbose ng-switch if you only need to check for a single condition (modifies DOM)
ng-switch - use instead of using several mutually exclusive ng-shows (modifies DOM)
ng-disabled and ng-readonly - use to restrict form element behavior
ng-animate - new in version 1.1.4, use to add CSS3 transitions/animations

The normal "Angular way" involves tying a model/scope property to a UI element that will accept user input/manipulation (i.e., use ng-model), and then associating that model property to one of the built-in directives mentioned above.

When the user changes the UI, Angular will automatically update the associated elements on the page.

Q1 sounds like a good case for ng-class -- the CSS styling can be captured in a class.

ng-class accepts an "expression" that must evaluate to one of the following:

a string of space-delimited class names
an array of class names
a map/object of class names to boolean values

Assuming your items are displayed using ng-repeat over some array model, and that when the checkbox for an item is checked you want to apply the pending-delete class:

<div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
   ... HTML to display the item ...
   <input type="checkbox" ng-model="item.checked">
</div>

Angularjs links

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

http://rabidgadfly.com/2012/12/angularjs-data-loading-and-assignment/

select country load cities:
http://plnkr.co/edit/hcN3M7ohREQpKjLMQtWG?p=preview

--------------------------------------
list and sub list display:

http://stackoverflow.com/questions/18408496/looping-through-deep-objects-in-ng-repeat?rq=1

http://jsfiddle.net/c4Kp8/
-----------------------

http://tutorials.jenkov.com/angularjs/views-and-directives.html

http://stshare.net/video-tutorials/13899-angularjs-fundamentals-2013/

https://github.com/young-zhang/angularjs-fundamentals

-----------------
http://joelhooks.com/blog/2013/08/03/learn-angularjs-in-a-weekend/

http://tutorialzine.com/2013/08/learn-angularjs-5-examples/

http://www.befundoo.com/university/tutorials/angularjs-directives-tutorial/

http://argutech.blogspot.com/2013/10/simple-angularjs-tutorial.html

-------
http://www.jiwhiz.com/post/2013/9/AngularJS_Learning_Experience_Directive

http://petar-minchev.blogspot.com/2013/06/angularjs-step-by-step-tutorials_23.html

http://odetocode.com/blogs/scott/archive/2013/02/18/starting-with-angularjs.aspx

http://simonguest.com/2013/04/08/jquery-mobile-and-angularjs-working-together/

------------------

http://misox.blog.matfyz.sk/p24218-angularjs-in-depth-part-ii use

------------
http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/
-------------------
http://blog.rodolfocaldeira.com/2013/05/24/interesting-bits-8-angularjs.html use
-------------------------
http://bundlr.com/b/angularjs3

http://12devs.co.uk/articles/rapid-prototyping-with-angularjs/
---------------------------

Thursday, January 2, 2014

what is angularjs

Angularjs...!

AngularJS		Comment
module		Application building block
controller		Contains the application logic and exposes it to views
scope		Provides data that can be bound to view elements
filter		Modifies data before it reaches the view
directive		Re-usable UI element
factory, service		Provide services to other module elements

Wednesday, January 1, 2014

Wish you a very happy new year to all...!
2014 year 365 days....
1st day started with birla temple completed with very normal way with no excitement....!
2nd day started with saibaba temple...followed by office...!
Angularjs:
More things left in angularjs, so wanted to learn more....!