Home » Simple Angular Hello World Example

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.

Read Also:  Get python absolute value | Python abs() Function with examples

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.

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 :

Read Also:  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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  jQuery Delete Confirm in Laravel 5.7 Example
  2. Read Also:  Angular 6 CLI Installation Tutorial With Example
  3. Read Also:  Difference Between Managed and Unmanaged Code in C#.NET
  4. Read Also:  ng-blur Event using Angular Example
  5. Read Also:  Simple Hello World Example using Angular
  6. Read Also:  Angular 6 Http Request Methods Tutorial with Example
  7. Read Also:  How to Open URL in New Tab using JavaScript
  8. Read Also:  Laravel 6 Get City Country By IP Address
  9. Read Also:  Angular 6 Features Architecture Overview
  10. Read Also:  Angular 6 Folder Project Structure

Leave a Comment

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