Site icon NgDeveloper

AngularJS Hello world for Dummies

Mirthbees
AngularJS Hello world for Dummies featured image

AngularJS Hello world for Dummies:

AngularJS is an open source Model-View-Controller [MVC] Javascript framework initially created by Misko Hevery and Adam Abrons in 2009. Now google maintains this web application open source framework. AngularJS written using Javascript language. AngularJS extends HTML attributes by directives.

 

What is AngularJS?

It is a javascript framework mainly used to create single page applications(SPA’s) by extending new HTML attributes.

 

AngularJS Basics:

Directives

Expressions

Filters

Modules

Controllers

Advanced concepts:

Events

DOM

Forms

Input

Validations

Why AngularJS ?

AngularJS can be primarily used for single page web applications with MVC framework.

Directives:

Directives are type of attributes to extend the HTML. AngularJS is having around 60 attributes. Among that these are some familiar attributes,
1. ng-init or data-ng-init [it’s something like “on-load” helps to trigger when page loads]
2. ng-app or data-ng-app [application name to make angularjs to initialize]
3. ng-controller or data-ng-controller [controller/bean name to map the functions/variables of the backend and for business logics]
4. ng-repeat or data-ng-repeat [like for loop to repeat the li tags or td tags in the html pages]

We saw above that directives can be used as ng-app or data-ng-app. Before using it in our applications we should know the difference between the data-ng-app and ng-app in AngularJS.

Difference between ng-app and data-ng-app:

HTML5 Validators will throw a validation error if you use ng-app because ng-app can be understandable only by angularJS.

But the same will not happen if you use data-ng-app. Because data-* is the recommended to make page to pass the html/html5 validations.

 

understanding the AngularJS directives:

1. data-ng-init:
When you want to load any values by default, then you can call or populate it using data-ng-init.

<div data-ng-controller=”HelloController” data-ng-init=”loadValues()”>
{{defaultMsg}}
</div>

// data-ng-init calls loadValues function
$scope.loadValues = function(){
$scope.defaultMsg = ‘I love Javadomain.in!’
}

2. data-ng-app & data-ng-controller:
data-ng-app & data-ng-controller directives can be used in html, body and div tags etc., But you can have many controllers in the single page.

Syntax:

<body data-ng-app=”hello_world_app”>
<div data-ng-controller=”HelloController”>
{{ helloMsg }}
</div>
</body>

(or)

<body data-ng-app=”hello_world_app” data-ng-controller=”HelloController”>
{{ helloMsg }}
</body>

value will be assigned to helloMsg this way by AngularJS,

// hello_world_app given in the data-ng-app directive in body or div.
var helloApp = angular.module(‘hello_world_app’,[]);

// HelloController given in the data-ng-controller in body or div.
helloApp.controller(‘HelloController’, [‘$scope’, function($scope) {
$scope.helloMsg = ‘welcome to Javadomain.in! Happy AngularJS Learning!!’;
}]);

Now we understood what is AngularJS and the purpose of AngularJS. Now it’s time to see AngularJS Hello world.

AngularJS Hello World:

Download the zip file and run to see the output in your machine.

Requirement:

AngularJS Javascript file [Included in the zip]

Full HTML Source Code: [index.html]
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
				<meta name="viewport" content="width=device-width, initial-scale=1">
					<meta name="description" content="AngularJS Hello world Demo, hello world angular js">
						<meta name="keywords" content="AngularJS demo, first program in angularjs, angularjs hello world app">
							<meta name="author" content="Naveen kumar Gunasekaran">
								<title>AngularJS Hello world Demo | Javadomain.in</title>
								<!-- including angular min js  -->
								<script src="js/angular.min.js"></script>
								<!-- our custom angular js file -->
								<script src="js/angular-custom.js"></script>
							</head>

							<!-- data-ng-app can be given to div also -->
							<body data-ng-app="hello_world_app">

								<!-- HelloController for this div -->
								<div data-ng-controller="HelloController">
									<!-- value assigned to "helloMsg" in the angular-custom.js file
$scope.helloMsg = 'welcome to Javadomain.in! Happy AngularJS Learning!!' -->
{{ helloMsg }}
								</div>

								<!-- AuthorController for this div -->
								<div data-ng-controller="AuthorController">
{{author}}
								</div>
							</body>
						</html>
Full AngularJS Source code: [angular-custom.js]
// data-ng-app given in the body tag mapped module
var helloApp = angular.module('hello_world_app',[]);

// HelloController
helloApp.controller('HelloController', ['$scope', function($scope) {
$scope.helloMsg = 'welcome to Javadomain.in! Happy AngularJS Learning!!';
}]);

helloApp.controller('AuthorController', ['$scope', function($scope) {
$scope.author = 'Naveen kumar Gunasekaran';
}]);

Output:

Feel free to post your comments/thoughts/feedbacks/suggestions in the below comments section.

Exit mobile version