AngularJS Tutorial

Define AngularJS

Download AngularJS

AngularJS Expression

AngularJS vs Javascript

AngularJS Directives

AngularJS Module

AngularJS Controller

Custom Directive

AngularJS Scope

AngularJS Validation

AngularJS Filter

AngularJS SelectBox

AngularJS Directive

AngularJS Services

AngularJS Directives

AngularJS Routing

Interview Questions

Angular Directive

AngularJS ng-bind-html Directive

The ng-bind-html directive is use to bind the data in HTML element. The ng-bind-html directive is a secure way of binding content to an HTML element.

When you are using AngularJS code to bind data in HTML application, you should check the HTML for dangerous code. By including the "angular-sanitize.js" module in your application you can validate data for any harmful code.

<div ng-app="myApp" ng-controller="myCtrl">
	<p ng-bind-html="message"> </p>

var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.message = "<h2>Hi! i am using AngularJS.</h2>";

ng-click Directive

ng-click directive will tells the AngularJS what to perfom when HTML element is clicked.

<div ng-app="myApp" ng-controller="myCtrl">
  <h1 ng-click="changeText()">{{text}}

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.text = "Welcome to AngularJS Controller";
  $scope.changeText = function() {
    $scope.text = "Oh! You changed my contents";

ng-bind-template Directive

ng-bind-template directive is used when you want to bind more than one expression to your HTML element.


<p>AngularJS is Developed By:<span ng-app="myApp" ng-bind-template="{{firstName}} {{lastName}}" ng-controller="myCtrl">

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "Misko";
    $scope.lastName = "Hevery";


ng-focus, ng-blur

The ng-focus directive tells AngularJS what to do when an HTML element gets focus.

The ng-blur directive tells AngularJS what to do when an HTML element loses focus.

Supported by <a>, <input>, <select>, <textarea>

Mouse Events

Mouse events occur when the cursor moves over an element, or when a mouse button is clicked on an element