UNIT-4

QN.EXPLAIN Built-in Directives ANGULAR JS

AngularJS Directives

AngularJS lets you extend HTML with new attributes called Directives.

AngularJS has a set of built-in directives which offers functionality to your applications.

AngularJS also lets you define your own directives.

AngularJS Directives

AngularJS directives are extended HTML attributes with the prefix ng-.

The ng-app directive initializes an AngularJS application.

The ng-init directive initializes application data.

The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

AngularJS `ng-app` Directive

The ng-app directive tells AngularJS that this is the root element of the AngularJS application.

All AngularJS applications must have a root element.

You can only have one ng-app directive in your HTML document. If more than one ng-app directive appears, the first appearance will be used.

Syntax

<element ng-app="modulename">
...
content inside the ng-app root element can contain AngularJS code
...
</element>

<!DOCTYPE html>

<html>

<body>

<p>My first expression: {{ 5 + 5 }}</p>

</div>

</body>

</html>

AngularJS `ng-init` Directive

The ng-init directive evaluates the given expression(s).

The ng-init directive can add some unnecessary logic into the scope, and you are recommended to do your evaluations in a controller instead, see the ng-controller directive.

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

<div ng-app="" ng-init="myText='Hello World!'">

<h1>{{myText}}</h1>

<p>The ng-init directive has created an AngularJS variable, which you can use in the application.</p>

</div>

</body>

</html>

AngularJS ng-model Directive

With the `ng-model` directive you can bind the value of an input field to a variable created in AngularJS.

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

Name: <input ng-model="name">

</div>

<script>

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

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

$scope.name = "John Doe";

});

</script>

<p>Use the ng-model directive to bind the value of the input field to a property made in the controller.</p>

</body>

</html>

Qn Explain ng-bind with an example.

The ng-bind directive tells AngularJS to replace the content of an HTML element with the value of a given variable, or expression.

If the value of the given variable, or expression, changes, the content of the specified HTML element will be changed as well.

Syntax

<element ng-bind="expression"></element>

<!DOCTYPE html>

<html>

<body>

</div>

</body>

</html>

Qn. EXPLAIN `ng-cloak IN ANGULAR JS.`

The ng-cloak directive prevents the document from showing unfinished AngularJS code while AngularJS is being loaded.

AngularJS applications can make HTML documents flicker when the application is being loaded, showing the AngularJS code for a second, before all code are executed. Use the ng-cloak directive to prevent this.

Syntax

<element ng-cloak></element>

<!DOCTYPE html>

<html>

<body>

<p><b>Note:</b> This example would probably not flicker even without the ng-cloak directive, but it shows how to include the directive on an HTML element.</p>

</div>

</body>

</html>

QN. EXPLAIN NG-INCLUDE IN ANGULAR JS.

AngularJS Includes

With AngularJS, you can include HTML content using the ng-include directive:

Include AngularJS Code

The HTML files you include with the ng-include directive, can also contain AngularJS code:

<!DOCTYPE html>

<html>

</body>

</html>

myTable.htm:

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

QN. EXPLAIN NG-SHOW AND NG-HIDE IN ANGILAR JS.

The ng-show directive shows the specified HTML element if the expression evaluates to true, otherwise the HTML element is hidden.

Syntax

<element ng-show="expression"></element>

<!DOCTYPE html>

<html>

Show HTML: <input type="checkbox" ng-model="myVar">

<h1>Welcome</h1>

<p>Welcome to my home.</p>

</div>

</body>

</html>

The ng-hide directive hides the HTML element if the expression evaluates to true.

ng-hide is also a predefined CSS class in AngularJS, and sets the element's display to none.

Syntax

<element ng-hide="expression"></element>

<!DOCTYPE html>

<html>

Hide HTML: <input type="checkbox" ng-model="myVar">

<h1>Welcome</h1>

<p>Welcome to my home.</p>

</div>

</body>

</html>

QN. EXPLAIN AngularJS `ng-repeat` Directive.

The ng-repeat directive repeats a set of HTML, a given number of times.

The set of HTML will be repeated once per item in a collection.

The collection must be an array or an object.

Syntax

<element ng-repeat="expression"></element>

<!DOCTYPE html>

<html>

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

app.controller("myCtrl", function($scope) {

$scope.records = [

"Alfreds Futterkiste",

"Berglunds snabbköp",

"Centro comercial Moctezuma",

"Ernst Handel",

]

});

</script>

</body>

</html>

QN. EXPLAIN AngularJS Event HANDLING

Generally while developing applications we use different type of html DOM events like mouse clicks, key press, change events, etc likewise angularjs is having its own event directives for DOM interactions.

AngularJS Event Directives

In angularjs we have different type of DOM event listener directives are available and we can attach those events to html elements. Following are the different type of event listeners in angularjs.

EX:

<!DOCTYPE html>

<html>

<body>

<button ng-click="count = count + 1">Click Me!</button>

<p>{{ count }}</p>

</div>

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

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

$scope.count = 0;

});

</script>

</body>

</html>

QN. EXPLAIN Using the API Documentation.

AngularJS API docs page.

The documentation is organized into modules which contain various components of an AngularJS application. These components are directives, services, filters, providers, templates, global APIs, and testing mocks.

ng (core module)

This module is provided by default and contains the core components of AngularJS.

Directives	This is the core collection of directives you would use in your template code to build an AngularJS application. Some examples include: ngClick, ngInclude, ngRepeat, etc…
Services / Factories	This is the core collection of services which are used within the DI of your application. Some examples include: $compile, $http, $location, etc…
Filters	The core filters available in the ng module are used to transform template data before it is rendered within directives and expressions. Some examples include: filter, date, currency, lowercase, uppercase, etc...
Global APIs	The core global API functions are attached to the angular object. These core functions are useful for low level JavaScript operations within your application. Some examples include: angular.copy(), angular.equals(), angular.element(), etc...

AngularJS Global API

The AngularJS Global API is a set of global JavaScript functions for performing common tasks like:

Comparing objects
Iterating objects
Converting data

The Global API functions are accessed using the angular object.

Below is a list of some common API functions:

API	Description
angular.lowercase()	Converts a string to lowercase
angular.uppercase()	Converts a string to uppercase
angular.isString()	Returns true if the reference is a string
angular.isNumber()	Returns true if the reference is a number

QN. EXPLAIN CUSTOM DIRECTIVE IN ANGULAR JS.

Generally, directives in angularjs are used to extend the functionality of HTML controls by adding special behavior to HTML dom elements.

In angularjs we have built-in directives available that are ng-model, ng-bind, ng-init, etc. like these directives we can create our own custom directives in angularjs and these directives functionality will be activated in our angularjs applications using compile method wherever we called these directive elements.

Rules to Create Custom Directive in AngularJS

We need to follow some of the rules to create custom directives in angularjs

Generally it's better to follow CamelCase to create directive name but as we know HTML is case-insensitive so it's better to use lower case to create directive.
You can give any name format to custom directive like studentmarks or student-marks, Always try use dash delimited format like e.g. student-mark.

AngularJS Custom Directive Syntax

In angularjs, we can create custom directives by using .directive function. Following is the syntax of creating custom directives using directive function in angularjs.

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

app.directive('tutDirective', function () {

return {

};

});

</script>

AngularJS Custom Directive Example

Following is the example of creating a custom directive using .directive function in angularjs application.

Live Preview

<head>

<title>

AngularJs Adding Directives to Modules Example

</title>

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

app.directive('tutDirective', function () {

return {

};

});

</script>

</head>

<body>

</body>

</html>

QN. EXPLAIN RESTRICT OPTION IN ANGULAR JS.

You can restrict your directives to only be invoked by some of the methods.

The legal restrict values are:

E for Element name
A for Attribute
C for Class
M for Comment
A : Specifies that Directive will be used as an attribute, like <div item-widget></div>, as was done in last example. This is also the default behavior if restrict is not declared. Preferred if just modifying the behavior of existing elements.
E : Specifies that Directive will be used as an Element. Like <item-widget></item-widget>. Preferred if creating new content.
C : Specifies that Directive can be used as class name in existing HTML elements. Like <div class=”item-widget”></div>
M : Specifies that Directive can be used as HTML comments. Like <!– Using directive: item-widget–>

· By default the value is EA, meaning that both Element names and attribute names can invoke the directive.

<html>

<head>

</head>

<w3-test-directive></w3-test-directive>

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

app.directive("w3TestDirective", function() {

return {

restrict : "A",

template : "<h1>Made by a directive!</h1>"

};

});

</script>

<p><strong>Note:</strong> By setting the <strong>restrict</strong> property to "A", only the HTML element with the "w3-test-directive" attribute has invoked the directive.</p>

</body>

</html>

QN. EXPLAIN TEMPLATE OPTION IN ANGULAR JS.

· Let's say you have a chunk of your template that represents a customer's information.

· This template is repeated many times in your code. When you change it in one place, you have to change it in several others.

· This is a good opportunity to use a directive to simplify your template.

Let's create a directive that simply replaces its contents with a static template:

script.jsindex.html

angular.module('docsSimpleDirective', [])

.controller('Controller', ['$scope', function($scope) {

$scope.customer = {

address: '1600 Amphitheatre'

};

}])

.directive('myCustomer', function() {

return {

};

});

Index.html

<div ng-controller="Controller">

  <div my-customer></div>

</div>

Unless your template is very small, it's typically better to break it apart into its own HTML file and load it with the templateUrl option.

script.jsindex.htmlmy-customer.html

angular.module('docsTemplateUrlDirective', [])

.controller('Controller', ['$scope', function($scope) {

$scope.customer = {

address: '1600 Amphitheatre'

};

}])

.directive('myCustomer', function() {

return {

templateUrl: 'my-customer.html'

};

});

Index.html

<div ng-controller="Controller">

  <div my-customer></div>

</div>

my-customer.html

Name: {{customer.name}} Address: {{customer.address}}

QN. EXPLAIN link function in angular js.

· link function is basically used to manipulate the DOM( Document Object Model ) element using custom directive.

· link option in custom directive registers DOM listener and also update the DOM.

link function is used as an option in the custom directive as given below.

· scope: – It is an Angular scope object.

· element: – It is the jqLite-wrapped element that is matched by this custom directive.

· attrs: – It is a hash object having key-value pairs of normalized attribute names with their corresponding attribute values.

· controller: – This is the directive’s required controller instance(s). If the directive has its own controller, then the controller’s name can be used as an argument.

Unit-5

Qn. Explain Angularjs forms.

Forms in AngularJS provides data-binding and validation of input controls.

Input Controls

Input controls are the HTML input elements:

input elements
select elements
button elements
textarea elements

Data-Binding

Input controls provides data-binding by using the ng-model directive.

The application does now have a property named firstname.

The ng-model directive binds the input controller to the rest of your application.

The property firstname, can be referred to in a controller:

Checkbox

A checkbox has the value true or false. Apply the ng-model directive to a checkbox, and use its value in your application.

<!DOCTYPE html>

<html>

<body>

<form>

Check to show a header:

</form>

<h1 ng-show="myVar">My Header</h1>

</div>

<p>The header's ng-show attribute is set to true when the checkbox is checked.</p>

</body>

</html>

Radiobuttons

Bind radio buttons to your application with the ng-model directive.

Radio buttons with the same ng-model can have different values, but only the selected one will be used.

Example

Display some text, based on the value of the selected radio button:

<!DOCTYPE html>

<html>

<form>

Pick a topic:

<input type="radio" ng-model="myVar" value="dogs">Dogs

<input type="radio" ng-model="myVar" value="tuts">Tutorials

<input type="radio" ng-model="myVar" value="cars">Cars

</form>

<p>Welcome to a world of dogs.</p>

</div>

<h1>Tutorials</h1>

<p>Learn from examples.</p>

</div>

<p>Read about cars.</p>

</div>

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

</body>

</html>

Selectbox

Bind select boxes to your application with the ng-model directive.

The property defined in the ng-model attribute will have the value of the selected option in the selectbox.

<!DOCTYPE html>

<html>

<form>

Select a topic:

<option value="dogs">Dogs

<option value="tuts">Tutorials

<option value="cars">Cars

</select>

</form>

<p>Welcome to a world of dogs.</p>

</div>

<h1>Tutorials</h1>

<p>Learn from examples.</p>

</div>

<p>Read about cars.</p>

</div>

<p>The ng-switch directive hides and shows HTML sections depending on the value of the dropdown list.</p>

</body>

</html>

Create angular js form

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs Data Binding to Controls in Form

</title>

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

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

$scope.fname = "Welcome to ";

$scope.lname = "Tutlane.com";

$scope.getvalues = function () {

$scope.name = $scope.fname + " " + $scope.lname;

}

});

</script>

</head>

<body>

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

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

</form>

</div>

</body>

</html>

Qn. Explain form validation in angular js.

AngularJS can validate input data.

Form Validation

AngularJS offers client-side form validation.

AngularJS monitors the state of the form and input fields (input, textarea, select), and lets you notify the user about the current state.

AngularJS also holds information about whether they have been touched, or modified, or not.

Required

Use the HTML5 attribute required to specify that the input field must be filled out:

E-mail

Use the HTML5 type email to specify that the value must be an e-mail:

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs Form Input Fields Validation Example

</title>

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

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

$scope.sendForm = function () {

$scope.msg='Form Submited Successfully';

};

$scope.getClass = function (color) {

return color.toString();

}

});

</script>

<style>

.valid.false {

background: red;

}

.valid.true {

background: green;

}

.error {

color: red;

}

</style>

</head>

<h3>Form validation demo app in AngularJs</h3>

<span class="error" ng-show="personForm.name.$error.required"> Required! </span>

<label for="adress">Adress</label>

<span class="error" ng-show="personForm.address.$error.required"> Required! </span>

<label for="contact">Contact No</label>

<span class="error" ng-show="personForm.mobile.$error.required">Required number!</span>

<span class="error" ng-show="personForm.mobile.$error.mobile">Invalid mobile!</span>

<label for="email">Email</label>

<span class="error" ng-show="personForm.email.$error.required">Required!</span>

<span class="error" ng-show="personForm.email.$error.email">Invalid Email!</span>

<label for="terms">I Agree to the terms.</label>

<span class="error" ng-show="personForm.terms.$error.required">You must agree to the terms</span>

<button type="submit">Submit Form</button>

</form>

</body>

</html>

AngularJS Services

What is a Service?

In AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application.

Qn. Explain $window Service.

A reference to the browser's window object. While window is globally available in JavaScript, it causes testability problems, because it is a global variable. In AngularJS we always refer to it through the $window service, so it may be overridden, removed or mocked for testing.

Expressions, like the one defined for the ngClick directive in the example below, are evaluated with respect to the current scope. Therefore, there is no risk of inadvertently coding in a dependency on a global value in such an expression.

Index.html

angular.module('windowExample', [])

.controller('ExampleController', ['$scope', '$window', function($scope, $window) {

$scope.greeting = 'Hello, World!';

$scope.doGreeting = function(greeting) {

$window.alert(greeting);

};

}]);

</script>

<button ng-click="doGreeting(greeting)">ALERT</button>

</div>

Protractor.js

it('should display the greeting in the input box', function() {

element(by.model('greeting')).sendKeys('Hello, E2E Tests');

// If we click the button it will block the test runner

// element(':button').click();

});

Qn. Explain $location Service.

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

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>The url of this page is:</p>

<h3>{{myUrl}}</h3>

</div>

<p>This example uses the built-in $location service to get the absolute url of the page.</p>

<script>

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

app.controller('myCtrl', function($scope, $location) {

$scope.myUrl = $location.absUrl();

});

</script>

</body>

</html>

Qn. Explain $document Service.

The AngularJS $document is wrapper for the browser's window.document object.

when I want to remove an element matching a selector I do this :

$document.remove('.someClassSelector');

Index.html

<p>$document title: <b ng-bind="title"></b></p>

<p>window.document title: <b ng-bind="windowTitle"></b></p>

</div>

Script.js

angular.module('documentExample', [])

.controller('ExampleController', ['$scope', '$document', function($scope, $document) {

$scope.title = $document[0].title;

$scope.windowTitle = angular.element(window.document)[0].title;

}]);

$document title: Example - example-document

window.document title: Example - example-document

Qn. Explain Creating Service.

To create your own service, connect your service to the module:

Create a service named hexafy:

app.service('hexafy', function() {
  this.myFunc = function (x) {
    return x.toString(16);
  }
});
<!DOCTYPE html>

<html>

<body>

<p>The hexadecimal value of 255 is:</p>

</div>

<p>A custom service with a method that converts a given number into a hexadecimal number.</p>

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

app.service('hexafy', function() {

this.myFunc = function (x) {

return x.toString(16);

}

});

app.controller('myCtrl', function($scope, hexafy) {

$scope.hex = hexafy.myFunc(255);

});

</script>

</body>

</html>

Qn. Explain Handling Returned Data.

The AngularJS $http service makes a request to the server, and returns a response.

<!DOCTYPE html>

<html>

<body>

<p>Today's welcome message is:</p>

<h1>{{myWelcome}}</h1>

</div>

<p>The $http service requests a page on the server, and the response is set as the value of the "myWelcome" variable.</p>

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

app.controller('myCtrl', function($scope, $http) {

$http({

method : "GET",

url : "welcome.htm"

}).then(function mySuccess(response) {

$scope.myWelcome = response.data;

}, function myError(response) {

$scope.myWelcome = response.statusText;

});

</script>

</body>

</html>

<html>

<body>

</div>

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

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

$scope.x1 = "JOHN";

$scope.x2 = angular.lowercase($scope.x1);

});

</script>

</body>

</html>

<html>

<body>

</div>

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

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

$scope.x1 = "JOHN";

$scope.x2 = angular.lowercase($scope.x1);

});

</script>

</body>

</html>

ANGULAR JS

AngularJS Directives

AngularJS ng-app Directive

Syntax

AngularJS ng-init Directive

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

<div ng-app="" ng-init="myText='Hello World!'">

<h1>{{myText}}</h1>

<p>The ng-init directive has created an AngularJS variable, which you can use in the application.</p>

</div>

</body>

</html>

AngularJS ng-model Directive

With the ng-model directive you can bind the value of an input field to a variable created in AngularJS.

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

Name: <input ng-model="name">

</div>

<script>

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

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

$scope.name = "John Doe";

});

</script>

<p>Use the ng-model directive to bind the value of the input field to a property made in the controller.</p>

</body>

</html>

Qn Explain ng-bind with an example.

Syntax

Qn. EXPLAIN ng-cloak IN ANGULAR JS.

Syntax

AngularJS Includes

Include AngularJS Code

myTable.htm:

Syntax

Syntax

QN. EXPLAIN AngularJS ng-repeat Directive.

Syntax

QN. EXPLAIN AngularJS Event HANDLING

AngularJS Event Directives

AngularJS Global API

Rules to Create Custom Directive in AngularJS

AngularJS Custom Directive Syntax

AngularJS Custom Directive Example

QN. EXPLAIN link function in angular js.

Input Controls

Data-Binding

Checkbox

Radiobuttons

Example

Selectbox

Form Validation

Required

E-mail

AngularJS Services

What is a Service?

Comments