Angular JS Tutorial
Tags
wpf C# interview reflection mvvm mvvm light interface generics arraylist hashtable using design patterns visitor template flyweight strategy memento mediator command wcf instance management application architecture ajax angularjs forms validations nested forms filters controllers directives bindings expressions ng-app ng-model environment setup threading synchronization rhino mocks test doubles oops app android linq testing nunit testcase typescript javascript abstract nodejs mysql CRUD dotnetcore mvc ftp python chmod linux golang variables uuid validator ExpressJS postgresql datatypes

Directives - AngularJS

Javascript Frameworks AngularJS application angularjs directives

AngularJS Directives are indicators to AngularJS compiler to attach some behaviour to HTML DOM elements.

AngularJS comes with some built-in directives but you can create your own custom directive.

Some main AngularJS directives are:

  1. ng-app
  2. ng-bind
  3. ng-class
  4. ng-init
  5. ng-model
  6. ng-switch
  7. ng-repeat

ng-app Directive

The ng-app directive is used for defining the root element of the AngularJS Application.

We mainly define ng-app directive on the <body> or <html> element but we can use ng-app directive with any DOM element.


<body ng-app>
	...
</body>

ng-bind Directive

The ng-bind directive is attached with HTML DOM element and replace its text with the value of ng-bind expression.

Whenever ng-bind expressions variables value changes, it automatically reflect in the HTML DOM element text.

ng-bind is like one-way binding to DOM element.


<body ng-app ng-init="firstName='James';">
	<span ng-bind="firstName"></span>
	...
</body>

ng-class Directive

The ng-class directive is used for set CSS classes on DOM element dynamically.


<html>
	<head>
		<title>First AngularJS App</title>
		<style type="text/css">
		.boldCSS
		{
			font-weight: bold;
		}
		.italicCSS
		{
			font-style: italic;
		}
		</style>
	</head>
<body ng-app ng-init="isBold=true;isItalic=false;">
	<span ng-class="{boldCSS: isBold, italicCSS: isItalic}">This is text.</span>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</body>

boldCss and italicCSS will only be applied when isBold and isItalic is set to true.

In the above code, isBold is true and isItalic is false. So on span text only bold css will be applied.

ng-init Directive

The ng-init directive is used for evaluating an expression.

Main use of ng-init is for initializing the data.


<body ng-app ng-init="name='Michale'">
	{{ name }}
	...
</body>

In above code, I have initialized the name variable in the ng-init directive with 'michale' value.

ng-model Directive

The ng-model directive is used for binding the input controls like textbox, checkbox, select list, textarea to javascript variables.

ng-model denotes two-way binding.

Any changes in input controls is reflected in the javascript variables.


<body ng-app>
	<input type="textbox" ng-model="name" />
	{{ name }}
	...
</body>

ng-switch Directive

The ng-switch directive is used for conditional show hide DOM elements.


<body ng-app ng-init="Age=30">
	<div ng-switch="Age">
		<p ng-switch-when="20">Your age is 20.</p>
		<p ng-switch-when="30">Your age is 30.</p>
		<p ng-switch-when="40">Your age is 40.</p>
		<p ng-switch-default>Age {{ Age }}</p>
	</div>
	...
</body>

ng-switch expression value is check with ng-switch-when condition value if found true then content of ng-switch-when is displayed.

ng-switch-default is shown when no matching conditions found.

ng-repeat Directive

The ng-repeat is like the foreach loop in any programming language. It iterate over a array of javascript and display template for each item.


<body ng-app ng-init="arrObj=[{name: 'James'},{name: 'Vicky'},{name: 'Sandy'},{name: 'George'}]">
	<div ng-repeat="item in arrObj">
		<p>{{ $index }} {{ item.name }}</p>
	</div>
	...
</body>

angularjs-ng-repeat-directive

Previous
Next