Wednesday, November 25, 2015

Angular - Services

Design Patterns in angular

Services->constructor DP
Factory->factory DP
Provider->Factory , can be configured

Factory

mainApp.factory('ProductService', function(){

var obj={}

obj.save=function(Product)

{

this.contacts.push(Product);

}

};

return obj;

Provider

whenever we use Provider, it should contain $get() method

it should return an object

//Defining provider

App.provider('configurable',function(){
var roi=2;
this.setRoi=function(rate)
{
roi=rate;
}
this.$get=function()
{
return{
rate:roi,getInterest:function(p,t)
{
var i= p* this.rate*t/200;
return i ;
}
};
};
};
);

Tuesday, November 24, 2015

The built-in filters cover many common use cases. but there are scenarios where we may have to create our own filters and use it as per the requirement which cannot be achieved using inbuilt filters .

Creating Custom filter to find StringLength

<body>

<div>
<form>

<input type = "text" ng-model="acc"/>

<div>
String Length is : {{acc|stringLength}}
</div>

</form>

</div>
<script>
angular.module('myapp', [])
.filter('stringLength',function()
{
return function(input){
return input.length;
}

}

);
</script>
</body>

Angular- forms

Resetting the values to default
<body>
<div ng-controller='sampleController'>
<input name="firstname" ng-model="firstname"/>
<button ng-click="reset()">reset</button>
</div>

<script>
angular.module('myapp', [])
.controller('sampleController',function($scope)
{
$scope.reset=function(){
$scope.firstname="supreet"
}
$scope.reset();
});
</script>
</body>

Form Validation for email field

<body>

<div>
<form name="myform" novalidate>

<input type="email" name="email" ng-model="email" length="100" minlength="3" maxlength="50" required/>
<button>submit</button>
<span ng-show="myform.email.$dirty && myform.email.$invalid">

<div ng-show="myform.email.$error.required">Email is required</div>
<div ng-show="myform.email.$error.email">Invalid format</div>
<div ng-show="myform.email.$error.minlength">enter atleast 3 characters</div>

</span>
<button ng-disabled="myform.email.$dirty && myform.email.$invalid">submit</button>

</form>

</div>

</body>

Monday, November 23, 2015

Angular- Filters

Name:<input type ="text" ng-model="Name"/><br><br>

//Formats a number as a currency
<span>subtraction :{{num1-num2|currency}}</span><br><br>

//Converts the specified string to uppercase
<span>subtraction :{{Name|uppercase}}</span><br><br>

number

Formats a number as text.

<h1>Hello Plunker!</h1>
number :<input type ="text" ng-model='val'><br>
Default formatting: <span id='number-default'>{{val | number}}</span><br>
No fractions: <span>{{val | number:0}}</span><br>
Negative number: <span>{{-val | number:4}}</span>

orderBy

it is ordered alphabetically for strings and numerically for numbers.

<!DOCTYPE html>

<head>

</head>

<body>

<tr>

</tr>

</tr>

</table>

</div>

angular.module('myapp', [])

.controller('ageController',function($scope)

{

$scope.person=[{"name":"tom", age:30},{"name":"harry", age:25}]

});

</script>

</body>

</html>

Angular - creating own directives

Creating a directive named "hello"

A custom directive simply replaces the element for which it is activated.

here 'Element' and 'Attribute' is replaced by hello world

<!DOCTYPE html>
<html ng-app="app" >

<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
<script src="script.js"></script>
</head>

<body>
<div ng-controller="MainController">
<hello>Element</hello> - <u>Elemet</u>
<div data-hello>Attribute </div> - <u>Attribute</u>

</div>

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

//Create a directive, first parameter is the html element to be attached.

app.directive('hello',[function(){
return{
restrict:'ECMA',
replace:true,
template:'<span><br> Hello {{name}}</span>'
}
}]);

app.controller('MainController',function($scope)
{
$scope.name='World'
})

</script>
</body>

</html>

Angular - initial and Loop

To repeat a series of elements instead of just one parent element, ngRepeat is used

<!DOCTYPE html>
<html ng-app="jj" ng-init="products=[{name:'Acer',category:'Laptop'},{name:'samsung',category:'phone'},{name:'fastrack',category:'watch'}]">

<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
<script src="script.js"></script>
</head>

<body>
<div ng-controller="prController">

<p>List of products</p><br>

<table border="1">
<tr>
<td>name</td>
<td>category</td>

</tr>
<tr ng-repeat="pr in products">
<td >{{pr.name}}</td>
<td >{{pr.category}}</td>

</tr>
</table>
</div>

<script>
angular.module("jj",[]).controller("prController",function($scope){
$scope.name;
$scope.category;

}

);
</script>
</body>

</html>

Angular model 2

<body>
<div ng-controller="logonController">
Productname: <input type="text" name="txtname" ng-model="products[0].Productname"/><br>
price: <input type="text" name="txtname" ng-model="products[0].price"/><br>
brandname: <input type="text" name="txtname" ng-model="products[0].brandname"/><br>
mfgdate: <input type="text" name="txtname" ng-model="products[0].mfgdate"/><br>
<span>{{myname}}</span>

<table border="1">
<tr>
<td>Productname</td>
<td>price</td>
<td>brandname</td>
<td>mfgdate</td>
</tr>
<tr>
<td>{{products[0].Productname}}</td>
<td>{{products[0].price}}</td>
<td>products[0].brandname</td>
<td>{{products[0].mfgdate}}</td>
</tr>
</table>
</div>

<script>
angular.module("jj",[]).controller("logonController",function($scope){
$scope.products = [
{Productname:'iphone', price:'408 555 1212',brandname:'Apple',mfgdate:'123'},
];

}

);
</script>
</body>

Sunday, November 22, 2015

Angular 2- ng-model

The ngModel directive binds an input,select, textarea etc to model value
<!DOCTYPE html>
<html ng-app>

<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
<script src="script.js"></script>
</head>

<body>

name: <input type="text" name="txtname" ng-model="myname"/>

<span>{{myname}}</span>
</body>

</html>

2nd way :
<body>
<div ng-controller="logonController"> name: <input type="text" name="txtname" ng-model="myname"/>
<span>{{myname}}</span>
</div>

<script>
angular.module("jj",[]).controller("logonController",function($scope){
$scope.myname="supreet";
}

);
</script>

Array of elements

<body>
<div ng-controller="logonController">
Productname: <input type="text" name="txtname" ng-model="products[0].Productname"/><br>
price: <input type="text" name="txtname" ng-model="products[0].price"/><br>
brandname: <input type="text" name="txtname" ng-model="products[0].brandname"/><br>
mfgdate: <input type="text" name="txtname" ng-model="products[0].mfgdate"/><br>
<span>{{myname}}</span>
</div>

<script>
angular.module("jj",[]).controller("logonController",function($scope){
$scope.products = [
{Productname:'iphone', price:'408 555 1212',brandname:'Apple',mfgdate:'123'},
];

}

);

</body>

Angular-1 Creating and using Controllers

MVVM

model is a personal property of a view (no seperate entity model created.
whatever user enters become model data )
request goes to view
view decides which controller to invoke

Modules
Views contains modules .
Module has controller(s)

Angular Directives

ng-app : to bind module in the view
ng-controller: define your controller for your view with scope

<!DOCTYPE html>
<html ng-app="myapp">

<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
<script src="script.js"></script>
</head>

<body>

<div ng-controller="HelloController as hello">

{{2+2}}
<h1>Hello {{hello.helloTo.Title}}</h1>

</div>
<div ng-controller="SalaryController">
<h1>salary is {{salary}}</h1>
</div>
<script>
angular.module("myapp",[]).controller("HelloController",function($scope)
{
this.helloTo={};
this.helloTo.Title="Supreet";

})

.controller("SalaryController",function($scope)
{
$scope.salary=10000;

}

);

</script>
</body>

My Technical Lessons

Menu