Simple Angular Hello World Example

Today, We want to share with you Angular js First Application with demo.In this post we will show you Building “Hello World” in Angular Steps, hear for Introduction and Hello World example we will give you demo and example for implement.In this post, we will learn about Getting Started with Angular: Your First App with an example.

Angularjs Hello World Example

There are the Following The simple About Angularjs Hello World Demo Full Information With Example and source code.

As I will cover this Post with live Working example to develop Angular Or Angular 7 Hello World, so the Angularjs Tutorial – “Hello World” App files and Directory structures for this example is following below.

Also Read :  Angularjs 6 User Registration and Login Authentication

Hello World with AngularJS module and controller

index.html

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="utf 8">
    <title>pakainfo.com - AngularJS Your First Example Program </title>     
</head>  
<body ng-app="root">

<h1 ng-controller="HelloWorldCtrl">{{welcomemsg}}</h1>
<p>Angularjs :- The message 'Hello World' will be displayed. </p>

<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("root", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.welcomemsg="Hello World" 
    } )
</script> 
</body>  
</html>

AngularJS – My First Hello World Tutorial

Step 01)

HTML Part

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body>

</body>
</html>

step 2 : Angular javascript Part

script.js

var root = angular.module("root", []);
root.controller("HelloController", function($scope) {
  $scope.message = "Hello World, AngularJS";	
});

Step 3: Full Example Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS</title>
<script type="text/javascript" src="assets/js/angular.js"></script>
<script type="text/javascript" src="assets/js/script.js"></script>
</head>
<body ng-app="root">
	<div ng-controller="HelloController">
		<h2>{{message}}</h2>
	</div>
</body>
</html>

Web Programming Tutorials Example with Demo

Read :

Also Read :  Angular 6 Expressions Tutorial with Examples

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about AngularJS first web app Step By Step.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Leave a Reply

avatar
  Subscribe  
Notify of