AngularJS Introduction

Posted on November 11, 2019 By

AngularJS is a open-source JavaScript based framework used for develope dynamic single-page applications.

AngularJs is developed and maintained by Google.

AngularJS supports Model-View-Controller (MVC) architecture used for develope web application.

AngularJS also support write less code method which help you to do more stuff with less code writing.

Example:

<!DOCTYPE html>
<html>
	<head>
		<title>AngularJS Example</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
	</head>
	<body>

	<div ng-app="app">
		<h1 ng-controller="HelloController">{{message}}</h1>		
	</div>
	<script>  
	    var app = angular.module("app", []);
		app.controller("HelloController", function($scope) {
		  $scope.message = "Welcome to world of AngularJS !!!";	
		});
	</script>
	</body>
</html>

Output

AngularJS-Example

Description:

angular.min.js : Included JavaScript file for implement AngularJS.

ng-app : This tells the Angular which part of our document belongs to the angular application.

ng-app=”app” : “app” keyword is name of application, you can choose any of your choice.

ng-controller : It is a controller which used for handle business logic. Here we given name of controller “MessageController” which used for write dynamic message from script logic.

{{message}} : This is a varible to get and set dynamic value using script. You can use other name instead of “message” but make sure that use the same name as you declare for set and access value. Like we used here “$scope.message” for set value. Use your declared variable name instead of “message”.

var app : Here we declare variable named app and store angular module named with “app”. It is name which we declare suing “ng-app”.

app.controller : Here controller is called when script load and it will excute function declared inside it. Here $scope is a object which is object for AngularJS. In this we are creating a member variable named “message” and assigning it the value of “Welcome to world of AngularJS !!!” and attaching the member variable to the scope object.

To know detail about other tags of HTML document refer here.

Leave a Reply

Your email address will not be published. Required fields are marked *