factories in angular

Factory is used for large code but to expose some of the variables and functions that are useful. factory return an object.

Syntax:

myModule.factory("factoryName", function(){
//code goes here
return {
// functions/varibles to expose
}
});


Example:
angular.module('myApp.factory',[]).factory('myfactory', function(){
function calculteArea(s) {
var area = s * s;
alert(area);
}
return {
areaOfScure: calculteArea;
}
});

Inject factorynamr in controller to use it's methods.

angular.module('myApp.controller',[]).controller('demoController1',['$scope','myfactory',function($scope, helloService){
myfactory.areaOfScure(10);
}]);

output:

return an alert with 100 as area.

services in angular

Service:

Services is a singleton object. It will create instance only for the first time, after that it will reuse that object.

syntax:
angular.module("module_name").service("service_name", function(){
//constroctor function
})

Example:
angular.module('myApp.service',[]).service("helloService", function(){
this.name = "saritha",
this.company = "cts"
this.display = function(){
alert(this.name);
}
});

Inject this service module into another module to reuse.

var myApp = angular.module('myApp',['myApp.controller','myApp.service']);


In controller we can use it as:

angular.module('myApp.controller',[]).controller('demoController1',['$scope', 'helloService',function($scope, helloService){
helloService.display();
}]);

output: output the alert

advantages:
Easy to create object,
Less time to execute,
Reusabuluity

drawbacks:
It is very difficult to execute for larger code.

Constant in angular:

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).

Syntax:

.constant(name, value);

name --> name of constant

value --> value of constant

Example:

var myAppangular.module('myApp', []);

myApp.constant("clientId", "123456");

myApp.config(['clientId', function(clientId){

console.log(clientId);

}])

myApp.controller('myController',['clientId', function(clientId){

console.log(clientId);

}])

so, the difference between constant and value is constant inject in  config block but value can't

Value in angular:

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.

Syntax:

module_name.value('name', 'value')

name --> instance name

value --> the value of instance

Example:

1, Create a module

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

2. Add value to module

myApp.value("clientId", "123456");

3, Inject value to your controller function to use it

myApp.controller('MyController', function (clientId) {

  console.log(clientId);

});

Routing in angular js

1, download angular-route.min.js from https://code.angularjs.org/1.5.5/
2, include angular-route.min.js file to your application using script tag
   <script src="angular-route.js">

3, Then load the module in your application by adding it as a dependent module:
   angular.module('myApp', ['ngRoute']);

With that you can use all the methods, providers, services in ng-route module

ngRoute:
The ngRoute module provides routing and deeplinking services and directives for angular apps.

ngView:
ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

Example:

1, Create 2 html files named as route1.html and route2.html respectively in views folder.
2, inject ngRoute module to myApp module.
   angular.module('myApp', ['ngRoute']);

3, In config use $routeProvider to configure routes
   angular.module('myApp', ['ngRoute']).config(['$routeProvider', function($routeProvider){
    $routeProvider.when('/route1', {
templateUrl: 'views/route1.html',
}).when('/route2', {
templateUrl: 'views/route2.html',
});
   }])
4, In index.html create two links use anchor tag.
<a href="#/route1">route1</a> |
  <a href="#/route2">route2</a>
5, Add ng-view in index.html
<div ng-view></div>

that's it...now refresh your index.html and then check it.. :-)

custom filters in angular:

syntax:
angular.module("module_name").filter('filter_name'), function( dependencie_if_any){

});

Example:
//uppercase is a predefined filter we are passing as a dependency injection, so that we can use it in controller.

angular.module('myApp').filter('capitalize',function(uppercaseFilter){
return function(input,a){
console.log(a);
var result = null;
if(typeof(a) == 'undefined'){

result = uppercaseFilter(input[0])+input.substring(1,input.length);
} else{
result = input.substring(0,a-1) +uppercaseFilter(input[a-1])+input.substring(a,input.length);

}
return result;
}
});


in index.html we can use it as:

{{"saritha chakilala" | capitalize}}
output: Saritha chakilala

[["saritha chakilala" | capitalize : 2]]
sAritha chakilala

number filter in angular:

If the input is null or undefined, it will just be returned. If the input is infinite (Infinity or -Infinity), the Infinity symbol '∞' or '-∞' is returned, respectively. If the input is not a number an empty string is returned.

syntax: {{ number_expression | number : fractionSize}}

Ex:

Task1 : 

{{ 12345.625252 | number }}

output: 12345.625

Task2 :

{{ 12345.625252 | number:2 }}

output: 12345.62

Task3:

{{ 12345.625252 | number:0 }}

output: 12346

lowercase and uppercase filter in angular

lowercase filter in angular:
To convert string to lowercase

syntax: {{ string_expression | lowercase}}
Ex: $scope.message = "hello from angular."
{{message | lowercase}}


uppercase filter in angular:

syntax: {{ string_expression | uppercase}}
To convert string to uppercase
Ex: $scope.message = "hello from angular."
{{message | lowercase}}

currency filtr in angular:

This filter is used to format the number to currency ( i.e, to display $/Rs symbol infront of number and specify number of decimals after floating point )

Ex:

$scope.amount = 1234.56

syntax:
{{ currency_expression | currency : symbol : fractionSize}}

Note: default symbol for currency is $, and default fractionSize is 2

Task1:
<h1> {{ amount | currency}} </h1>
o/p: $1234.56

Task2: 
<h1> {{ amount | currency:"USD$"}} </h1>

o/p: USD$1234.56

Task3: 

<h1> {{ amount | currency:"USD$":3}} </h1>

o/p: USD$1234.560

oredr by filter in angular:

This filter used to order elements in ascending / descending.

$scope.lists = [{name:'sai',company: 'CTS'},{name:'kiran',company: 'cognizant'},{name:'sai kiran',company: 'cognizant'},{name:'sai krishna',company: 'we'}]

Task1: ascending order

<ul>
<li ng-repeat="a in lists | filter:search:strict | orderBy : 'name'">[[a.name]]</li>
</ul>

Task2: descending order

by default order by ascending, to order  in descending use '-' symbol before attribute

<ul>
<li ng-repeat="a in lielementssts | filter:search:strict | orderBy : '-name'">[[a.name]]</li>
</ul>

filter in angular

filter:

Select a subset of items from an array.

ex:
$scope.lists = [{name:'sai',company: 'CTS'},{name:'kiran',company: 'cognizant'},{name:'sai kiran',company: 'cognizant'},{name:'sai krishna',company: 'we'}]

task 1:

<label>Search: <input ng-model="searchText"></label> (searches any field)
<ul>
<li ng-repeat="a in lists | filter:searchText"> {{a.name}}</li>
</ul>

task2:

<label>Search By Name: <input ng-model="name"></label>
<ul>
<li ng-repeat="a in lists | filter: {name: name}">{{a.name}}</li>
</ul>

task3:
<input ng-model="search.$"> (searches with any field(i.e, name/ company))
<input ng-model="search.name"> (searches with name field)
<input ng-model="search.company"> (searches with company field)

<ul>
<li ng-repeat="a in lists | filter: search ">{{a.name}}</li>
</ul>

task4: (case scensitive filtering)

<ul>
<li ng-repeat="a in lists | filter: search : true">{{a.name}}</li>
</ul>

Get Started with angularJS:

1, go to https://angularjs.org/
2, download angular.js file from above site and place it in our application lib folder
<script src="lib/angular.min.js"></script>
{or}
  directly copy CDN and use it with script tag
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
3, sample application to test
<html>
<head><title></title></head>
<body>
{{10+5}} //angular expression
</body>
</html>

when we open application in browser it wont interpret angular expression.

To make our webpage angularize we need to include ng-app directive

<html>
<head><title></title></head>
<body ng-app>
{{10+5}} //angular expression
</body>
</html>