AngularJS Components


AngularJS starts automatically when the web page has loaded.

AngularJS Directives

  • ng-app: This indicates that, this is Angular JS Application.

  • ng-model: It will binds the input variable values to ng-app name.

  • ng-bind: innerHTML of the <p> element to the.

  • ng-init: This is for to inialize the values which are specific to each ng-app.

  • ng-repeat: directive repeats an HTML element.

ng-app can be written as data-ng-app also, same applicable for remaining directives. Best approach is data-ng this will make your html page is valid.


Angular JS example with ng-directives
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>

	<div data-ng-app="my-first-app"  data-ng-init="firstName='Soha'" >
		<p>Name: <input type="text" data-ng-model="name"></p>
		<p data-ng-bind="name"></p>
	</div>

		<div ng-app="second-app" ng-init="names=[
		{name:'Jani',country:'Norway'},
		{name:'Hege',country:'Sweden'},
		{name:'Kai',country:'Denmark'}]">

		<ul>
		  <li ng-repeat="x in names">
			{{ x.name + ', ' + x.country }}
		  </li>
		</ul>
     </body>
</html>

AngularJS Expressions

Expressions can be written inside double braces :{{expression}}

Here expressions is variable. value will be pasted same posible where exactly expression is available.

Angular JS example with expression
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
	<body>

		<div data-ng-app="my-first-expr-app">
			<p>Name : <input type="text" ng-model="name"></p>
 			<h1>Hi {{name}}, This is your Hello World Exaple </h1>
		</div>



	</body>
</html>

AngularJs hello World

AngularJS Module

Module defines angular js application(ng-app). It will create variable for ng-app.

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

AngularJS Controller

Controller controls application(ng-app)

app.controller('myCtrl', function($scope) {
    $scope.firstName= "Soha";
    $scope.lastName= "SK";
});
Angular JS example with modules and controller
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
	<body>

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

			First Name: <input type="text" ng-model="firstName"><br>
			Last Name: <input type="text" ng-model="lastName"><br>
			<br>
			Full Name: {{firstName + " " + lastName}}

		</div>

		<script>
			var app = angular.module('myApp', []);
			app.controller('myCtrl', function($scope) {
				$scope.firstName= "Soha";
				$scope.lastName= "SK";
			});
		</script>

	</body>
</html>