Monthly Archives: October 2018

AngularJS – Services

The service will helps to fetch data from the database when to share the data between controllers.
If we store the data inside a controller, once we change to another controller the data will be discarded.
AngularJS has 30 built in services.

Types of Services in AngularJS

  1. Built-in Services: The angularjs has inbuilt services. That’s is core services.
    The built in services like $http, $log, $location etc..
    The inbuilt services are always prefixed with $.
  2. Custom Services: These services are developed by developers to achieve certain business logic in the form of service.

The $http Service

The $http is the one of the inbult services in angularjs. It is commonly used services in angularjs application.

Example

Use the $http service to request data from the server:






 

Today's welcome message is:


{{myWelcome}}

From the above code we can clearly say that: The $http service requests a page on the server, and the response is set as the value of the “myWelcome” variable.

The $location Service

The $location service has methods which return information about the location of the current web page:

Example








The url of this page is:


{{myUrl}}

AngularJS – Views

Via multiple views on a single page the angularjs supports single page application. To do this AngularJS has provided ng-view and ng-template directives and $routeProvider services.

ng-view

ng-view tag simply creates a place holder where a corresponding view (html or ng-template view) can be placed based on the configuration.The ng-view is the directive that angular uses as a container to switch between views. Let’s start by making an empty ng-view tag in our app

Usage

ng-template

The ng-template directive is helps to create an html view using script tag. <ng-template> gives you a lot of results relating to the html5 <template> tag.

AngularJS ng-template Directive Syntax

var app = angular.module("AngularApp", ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider)
{
	$routeProvider.when('/test1', { templateUrl: 'test1.html' })
}
]);
app.controller('exampleController', function ($scope) {
	$scope.text = 'Hello';
});

AngularJS – Ajax

The $http service helps to call the ajax request in angularjs. The $http service in angular js helps to perform http request. It also allows you create any http request by just injecting it via controller constructor.
It also helps to fetch the data from remote server. It needs the data available at the server must be in JSON format or an javascript object. $http fetches the data from the server using browser.

In AngularJS you can send AJAX requests in several different ways. These are:

  • AJAX calls via the $http service.
  • JSONP calls via the $http service.
  • REST type calls.




Syntax of $http:

	modulename.controller('controllername',function($http) {
		$http({
			method: 'GET',
			url: 'enter url here'
		}).then(function successCallback(response) {
		}, function errorCallback(response) {
		});
	});

Method: GET and POST methods.





Syntax

	method: 'GET',

url: In here we define the url where we fetch the data. We get the data from this specified url.





Syntax

url: 'enter url here'

successCallback: This finction will get called when our server returns response.

Syntax

.then(function successCallback(response) {}




errorCallback: This function will get called when server returns error.

Syntax

 function errorCallback(response) {}

AngularJS – Includes

The HTML does not support to include the client side code from the other files. Consider the example, if you want to develope the application for numberic operations. If we define or write the functionality in a separate files; that separate files can re-used across multiple application where we want. For performing this application we just include the functionality file( already specified). This technique norally include statment. But the include statments are available in java and .net programming.

This tutorial looks at other ways files (files which contain external HTML code) can be included in the main HTML file.

  1. Client Side includes
  2. Server Side Includes
  3. How to include HTML file in AngularJS




Client Side includes

The Javascript is the common way to include the HTML code.
Which can be used to manipulate the content in an HTML page on the fly because JavaScript is a programming language.
The below steps shows how this can be accomplished.

Step1) Define a file called Subpage.html and add the following code to the file.


	This is an included file




Step 2) Create a file called index.html, which is your main application file and add the below code snippet.

  1. In the body tag, there is a div tag which has an id of Content. This is the place where the code from the external file ‘Subpage.html’ will be inserted.
  2. There is a reference to a jquery script. JQuery is a scripting language built on top of Javascript which makes DOM manipulation even easier.
  3. In the Javascript function, there is a statement ‘$(“#Content”).load(“Subpage.html”);’ which causes the code in the file Sub.html to be injected in the div tag which has the id of Content. 
    4.

    Server Side Includes

    Server Side Includes are also available for including a common piece of code throughout a site. This is normally done for including content in the below parts of an HTML document.

    1. Navigation menu
    2. Page Header
    3. Page Footer

    How to include HTML file in AngularJS

    The ng-include directives helps to include the functionality from other AngularJS files. In the main AngularJS application, the primary purpose of the “ng-include directive” is used to compile, fetch and include an external HTML fragment.

    Syntax




    <div ng-include = “’includefile.html'”></div>

    Example

    includefile.html


    

    
Id:

    

    Name: 

    

    
Details of Employee:
{{empid + ", " + empname}}

    employeedetails.html




AngularJS – Forms

In angularjs, form provides data-binding and validation of input controls.It provide form filling and form validation in angularjs. Input controls helps for user enter the data and a form is a collection of controls for the purpose of grouping related controls together.

Following are the input controls used in AngularJS forms:

  1. input elements
  2. select elements
  3. button elements
  4. textarea elements

Data-Binding

Input controls provides data-binding by using the ng-model directive. The ng-model directive is used to provide data binding.

Example

Let us take an example where ng-model directive binds the input controller to the rest of your application




  
  
  
  

  
  
  
    First Name:

You can also change the example in the following way:




  
  
  
  

  
  
  
    First Name:   
  
  
  
You entered: {{firstname}}

AngularJS – Checkbox

In checkbox, it has two values either true or false. The ng-model directive is used for a checkbox.




Example

  
  
  
  

  
  
  
    Check to show this:  
      
  
  
  
Checked

The ng-show attribute is set to true when the checkbox is checked.

AngularJS – Radio Buttons

Adding radio button into your angularjs application through ng-model directives.

Example




  
  
  
  

  
  Pick a Data:  
  Orange
  Apple  
  Mango 

  

  
  
  
  
     
Orange
  
  
  
  
  
     
Apple
  
  
  
  
  
     
Mango




The ng-switch directive hides and shows HTML sections depending on the value of the radio buttons.

AngularJS – Select Box

The ng-model directive is used for a selectbox.

Example




  
  
  
  

  
  Select a Data:  
    

  

  
  
  
     
Orange
  
  
  
  
  
     
Apple
  
  
  
  
  
     
Mango

The ng-switch directive hides and shows HTML sections depending on the value of the radio buttons.

AngularJS form example




  
  
     
      Angular JS Forms  
        
        
        
        
     
     
        
      
AngularJS Sample Application
  
      
  
           
         
  
            
  
               
  
                  Enter first name:  
                    
                       
                        First Name is required.  
                       
                    
               
  
                 
               
  
                  Enter last name:   
                    
                       
                        Last Name is required.  
                       
                    
               
  
                 
               
  
                  Email:   
                       
                        Email is required.  
                        Invalid email address.

AngularJS – Modules

AngularJS supports modular approach. Modules are used to separate logics say controllers, services, application etc and keep the code clean. It is define in separate js file. The controllers always belong to a module.

Creating a Module

The angular.module function helps to create a module in angularjs. 

...




The “myApplicaion” parameter refers to an HTML element in which the application will run.
Now you can add controllers, directives, filters, and more, to your AngularJS application.

Adding a Controller

Add a controller to your application, and refer to the controller with the ng-controller directive:

Example







{{ firstName + " " + lastName }}




The output of the above example like: Pritty Times

Adding a Directive

AnglarJS directives are used to add functionality to your application. You can also add your own directives for your applications.

The angularjs directives are described bellow:




sl no: Directive Description
1 ng-value It helps to specifies the value of an input element or a select element.
Syntax:
<input ng-value=”expression”&gt</input&gt
2 ng-bind It helps to bind the content of an html element to angularjs application data. It also helps to to replace the content of an HTML element with the value of a given variable, or expression.
Syntax:

<element ng-bind=”expression”></element>
3 ng-bind-html It helps to binds the inner html of an html element to application data, and also removes dangerous code from the html string.
Syntax:

<element ng-bind-html=”expression”></element>
4 ng-bind-template It helps to specifies that the text content should be replaced with a template.
Syntax:

<element ng-bind-template=”expression”></element>
5 ng-blur It helps to specifies a behavior on blur events.
Syntax:

<element ng-blur=”expression”></element>
6 ng-change It helps to specifies an expression to evaluate when content is being changed by the user.
Syntax:

<element ng-change=”expression”></element>
7 ng-checked It helps to specifies if an element is checked or not.
Syntax:

<input type=”checkbox|radio” ng-checked=”expression”></input>
8 ng-class It helps to specifies css classes on html elements.
Syntax:

<element ng-class=”expression”></element>
9 ng-class-even It is same as ng-class, but will only take effect on even rows.
Syntax:

<element ng-class-even=”expression”></element>
10 ng-class-odd It is same as ng-class, but will only take effect on odd rows.
Syntax:

<element ng-class-odd=”expression”></element>
11 ng-click It helps to specifies an expression to evaluate when an element is being clicked.
Syntax:

<element ng-click=”expression”></element>
12 ng-cloak It helps to prevents flickering when your application is being loaded.
Syntax:

<element ng-cloak></element>
13 ng-controller It helps to defines the controller object for an application.
Syntax:

<ng-controller=”expression”></element>
14 ng-copy It helps to specifies a behavior on copy events.
Syntax:

<element ng-copy=”expression”></element>
15 ng-csp It helps to changes the content security policy.
Syntax:

<element ng-csp=”no-unsafe-eval | no-inline-style”></element>
16 ng-cut It helps to specifies a behavior on cut events.
Syntax:

<element ng-cut=”expression”></element>
17 ng-dblclick It helps to specifies a behavior on double-click events.
Syntax:

< ng-dblclick=”expression”></element>
18 ng-disabled It helps to specifies if an element is disabled or not.
Syntax:

<input ng-disabled=”expression”></input>
19 ng-focus It helps to specifies a behavior on focus events.
Syntax:

<element ng-focus=”expression”></element>
20 ng-form It helps to specifies an html form to inherit controls from.
21 ng-hide It helps to hides or shows html elements.
Syntax:

<element ng-hide=”expression”></element>
22 ng-href It helps to specifies a URL for the element.
Syntax:

<a ng-href=”string”></a>
23 ng-if It helps to removes the html element if a condition is false.
Syntax:

<element ng-if=”expression”></element>
24 ng-include It helps to includes html in an application.
25 ng-init It helps to defines initial values for an application.
Syntax:

<element ng-init=”expression” ></element>
26 ng-jq It helps to specifies that the application must use a library, like jQuery.
27 ng-keydown It helps to specifies a behavior on keydown events.
Syntax:

<element ng-keydown=”expression” ></element>
28 ng-keypress It helps to specifies a behavior on keypress events.
Syntax:

<element ng-keypress=”expression” ></element>
29 ng-keyup It helps to specifies a behavior on keyup events.
Syntax:

<element ng-keyup=”expression” ></element>
30 ng-list It helps to converts text into a list (array).
Syntax:

<element ng-list=”separator”></element>
31 ng-model It helps to binds the value of html controls to application data.
32 ng-model-options It helps to specifies how updates in the model are done.
Syntax:

<element ng-model-options=”option”></element>
33 ng-mousedown It helps to specifies a behavior on mousedown events.
Syntax:

<element ng-mousedown=”expression” ></element>
34 ng-mouseenter It helps to specifies a behavior on mouseenter events.
Syntax:

<element ng-mouseenter=”expression” ></element>
35 ng-mouseleave It helps to specifies a behavior on mouseleave events.
Syntax:

<element ng-mouseleave=”expression” ></element>
36 ng-mousemove It helps to specifies a behavior on mousemove events.
Syntax:

<element ng-mousemove=”expression” ></element>
37 ng-mouseover It helps to specifies a behavior on mouseover events.
Syntax:

<element ng-mouseover=”expression” ></element>
38 ng-mouseup It helps to specifies a behavior on mouseup events.
Syntax:

<element ng-mouseup=”expression”></element>
39 ng-non-bindable It helps to specifies that no data binding can happen in this element, or it is children.
Syntax:

<element ng-non-bindable ></element>
40 ng-open It helps to specifies the open attribute of an element.
Syntax:

<details ng-open=”expression” >….</details>
41 ng-options It helps to specifies &glt;options< in a &glt;select< list.
Syntax:

<select ng-options=”array expression”></select>
42 ng-paste It helps to specifies a behavior on paste events.
Syntax:

<element ng-paste=”expression”></element>
43 ng-pluralize It helps to specifies a message to display according to en-us localization rules.
44 ng-readonly It helps to specifies the readonly attribute of an element.
Syntax:

<input ng-readonly=”expression” ></input>
45 ng-repeat It helps to defines a template for each data in a collection.
Syntax:

<element ng-repeat=”expression” ></element>
46 ng-required It helps to specifies the required attribute of an element.
Syntax:

<input ng-required=”expression” ></input>
47 ng-selected It helps to specifies the selected attribute of an element.
Syntax:

<option ng-selected=”expression”></option>
48 ng-show It helps to shows or hides html elements.
Syntax:

<element ng-show=”expression”></element>
49 ng-src It helps to specifies the src attribute for the <img> element.
Syntax:

<ng-src></img>
50 ng-srcset It helps to specifies the srcset attribute for the <img> element.
Syntax:

<img ng-srcset=”string” ></img>
51 ng-style It helps to specifies the style attribute for an element.
Syntax:

<element ng-style=”expression” ></element>
52 ng-submit It helps to specifies expressions to run on onsubmit events.
Syntax:

<form ng-submit=”expression” ></form>
53 ng-switch It helps to specifies a condition that will be used to show/hide child elements.
Syntax:

<element ng-switch=”expression”>
<element ng-switch-when=”value”></element>
<element ng-switch-when=”value”></element>
<element ng-switch-when=”value”></element>
54 ng-transclude It helps to specifies a point to insert transcluded elements.

AngularJS – HTML DOM

In AngularJS, DOM stands for Document Object Model. In AngularJS, all directives are used to bind application data to the attributes of HTML DOM elements. 4 types of directives are used to bind application data. They are:



Sr.No Name Description
1 ng-disabled Disables a given control.
2 ng-show Shows a given control.
3 ng-hide Hides a given control.
4 ng-click Represents AngularJS click event.

ng-disabled Directive

In angularjs the ng-disabled directories helps to disabled attributes of an HTML elements.
Add the ng-disabled attribute to a HTML buttton and pass it to a model.
In the below code will explain how to binds a model to a checkbox. 




Disable Button  
button ng-disabled = "enableDisableButton">Click Me!

Example









  

  
Button




From the above example; the ng-disabled directive binds the application data Switching to the HTML button’s disabled attribute.
The ng-model directive binds the value of the HTML checkbox element to the value of Switching.
If the value of Switching evaluates to true, the button will be disabled and the value of Switching evaluates to false, the button will we enabled.

ng-show Directive




The ng-show directives helps to show or hide the HTML attributes.
Their are two types of attribute like true and false the ng-show directives pass.
If pass true, element in ng-show directives element will be visible and pass false attribute in ng-show directives, element will be hide.
In the below code, it binds a model to a checkbox. 

	Show Button  
	button ng-show = "showHide1">Click Me!

Example










I am visible element.


I am not visible element.




ng-hide Directive

In AngularJS, the ng-hide directive shows or hides an HTML element.

Example









     
I am not visible.


I am visible.




ng-click directive

The ng-click directives helps to count the total click in HTML elements. It represents a AngularJS click event.

AngularJS Tables

In the HTML, the tables are the one of the common elements when working with web page. Tables in HTML are designed using the HTML tag. <table> tag – This is the main tag used for displaying the table. <tr> – This tag is used for segregating the rows within the table. <td> – This tag is used for displaying the actual table data. <th> – This is used for the table header data. The data displaying to table the ng-repeat helps to solve this problem. It helps to draw the table easily.

Example





   

      Name
      Marks
   

   
   

      {{ subject.name }}
      {{ subject.marks }}

In the angularjs table we can style the table structure using CSS Styling.

Example




   
   
      Angular JS Table
            
            
   
   
      
AngularJS Sample Application

      

         
         

            

               Enter first name:
               
            

            
            

               Enter last name: 
               
                  
               
            

            
            

               Name: 
               {{student.fullName()}}
            

            
            

               Subject:
					
               
                  .
                        

                     

                        NameMarks
                     

                     
                     

                        {{ subject.name }}
                        {{ subject.marks }}

AngularJS Filters

Filters can be added in AngularJS to format data. Filters are used to change modify the data. Following is the list of commonly used filters.

Sr.No. Name Description
1 uppercase converts a text to upper case text.
2 lowercase converts a text to lower case text.
3 currency formats text in a currency format.
4 filter filter the array to a subset of it based on provided criteria.
5 orderby orders the array based on provided criteria.




uppercase filter

Convert the string to upper case format. All the text or string convert or print as uppercase format or capital letter format.

Example







	
The name is {{ lfirstName | uppercase }}




The output as : The name is PRITTY

lowercase filter

Convert the string to lower case format. All the text or string convert or print as lowercase format or small letter format.

Example







	
The name is {{ lfirstName | lowercase }}




The output as : The name is pritty

currency filter

This filter formats a currency filter to a number. When no currency symbol is provided, default symbol for current locale is used.

{{ expression | currency : ‘currency_symbol’ : ‘fraction’}}

Example










Price: {{ price | currency }}

The output as: Price: $158.00

filter filter

The filter filter selects a subset of an array.

{{ expression | filter : filter_criteria }}

Example










    
  
  • 
    {{ x }}
  
    •




This example displays only the names containing the letter “i”.

The output as follows
Jani
Birgit
Kai

Orderby Filters

The orderBy filter sorts an array based on specified expression predicate.
{{ expression | orderBy : predicate_expression : reverse}}