AngularJS Hello World: Your First Example Program

By : James Hartman James Hartman
Hours Updated

⚡ Smart Summary

AngularJS Hello World programs need only a single HTML file, one script reference and two directives, ng-app and ng-controller, to bind a controller scope variable into the page through a double-brace expression.

  • 🔘 ng-app: The ng-app attribute marks the root element and bootstraps the named AngularJS module automatically.
  • ☑️ ng-controller: ng-controller attaches HelloWorldCtrl to the h1 element, making the controller scope available there.
  • ✅ Scope binding: Assigning $scope.message inside the controller feeds the {{message}} expression rendered in the view.
  • 🧪 Single file: One HTML file plus one script reference runs the example, with no build step required.
  • 🛠️ Troubleshooting: Literal braces on screen almost always mean the library never loaded or ng-app is missing.
  • 📊 Version note: AngularJS support ended January 2022, with 1.8.3 the final release; new work belongs in Angular.
Read More

AngularJS Hello World first example program using ng-app and ng-controller

The best way to see the power of an AngularJS Application is to create your first basic program “Hello World” app in AngularJS.

There are many integrated development environments you can use for AngularJS development, some of the popular ones are mentioned below. In our example, we are using Webstorm as our IDE.

  1. Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. Visual Studio

Hello world, AngularJS

Version note: AngularJS 1.x left Long Term Support on 31 December 2021, and the framework team confirms that AngularJS support officially ended in January 2022, with 1.8.3 the final release and no security patches after it. Every step and code block below is preserved exactly as written. New projects belong in modern Angular, where the same exercise starts with ng serve and a standalone component and still uses the same {{ }} interpolation syntax.

The example below shows the easiest way to create your first “Hello world” application in AngularJS.

The annotated screenshot below labels each part of that file, and its seven numbers match the Code Explanation list underneath. It was captured against an earlier 1.4.0 build, so its script line differs from the version pinned in the code.

Annotated AngularJS Hello World HTML file with seven numbered callouts for ng-app, ng-controller, the script reference and the scope variable

<!DOCTYPE html>  
<html ng-app="app">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

Code Explanation:

  1. The “ng-app” keyword is used to denote that this application should be considered as an AngularJS application. Any name can be given to this application.
  2. The controller is what is used to hold the business logic. In the h1 tag, we want to access the controller, which will have the logic to display “Hello World”, so we can say, in this tag we want to access the controller named “HelloWorldCtrl”.
  3. We are using a member variable called “message” which is nothing but a placeholder to display the “Hello World” message.
  4. The “script tag” is used to reference the angular.js script which has all the necessary functionality for AngularJS. Without this reference, if we try to use any AngularJS functions, they will not work.
  5. “Controller” is the place where we are actually creating our business logic, which is our controller. The specifics of each keyword will be explained in the subsequent chapters. What is important to note is that we are defining a controller method called ‘HelloWorldCtrl’ which is being referenced in Step 2.
  6. We are creating a “function” which will be called when our code calls this controller. The $scope object is a special object in AngularJS which is a global object used within AngularJS. The $scope object is used to manage the data between the controller and the view.
  7. We are creating a member variable called “message”, assigning it the value of “Hello World” and attaching the member variable to the scope object.

NOTE: The ng-controller directive is a keyword defined in AngularJS (Step 2) and is used to define controllers in your application. Here in our application, we have used the ng-controller keyword to define a controller named ‘HelloWorldCtrl’. The actual logic for the controller will be created in (Step 5).

If the code is executed successfully, the following Output will be shown when you run your code in the browser.

Output:

The message ‘Hello World’ will be displayed.

Browser window titled Guru99 rendering the heading Hello World from the AngularJS scope variable

How to Load AngularJS: CDN or Local File

The example above works because one line pulls the framework into the page before the browser reaches the end of the body. AngularJS ships as a single JavaScript file, so a first program needs no build step and no package manager. A plain HTML file opened in a browser is enough.

There are two ways to bring that file in.

  1. Reference a CDN copy. The example points at code.angularjs.org and pins version 1.6.9. That host still serves 1.x builds, the highest being 1.8.2, while Google Hosted Libraries no longer lists AngularJS.
  2. Download a local copy. Save the file beside the HTML page and point the script tag at it. A local copy keeps the example working offline, which matters when a proxy blocks the CDN.
<!-- Option 1: reference a CDN copy -->
<script src="https://code.angularjs.org/1.8.2/angular.min.js"></script>

<!-- Option 2: reference a downloaded copy in the same folder -->
<script src="angular.min.js"></script>

Use angular.js while learning and angular.min.js in production: the unminified build prints readable stack traces, whereas the minified build reports renamed variables.

Once the file is loaded, ng-app starts the framework. AngularJS looks for that attribute when the document finishes loading, treats the element carrying it as the compilation root, and bootstraps the module named in its value. Three consequences follow:

  • Only the first ng-app on a page is bootstrapped automatically. A second one is ignored unless angular.bootstrap is called manually.
  • The value must name a module registered with angular.module, otherwise the console reports [$injector:modulerr].
  • Placing ng-app on the html element, as the example does, brings the whole document under AngularJS; a narrower container works too.

RELATED ARTICLES

How {{ }} Expressions and ng-model Binding Work

The double braces around message in the h1 tag are not a placeholder filled once at load time. AngularJS compiles that text node into a watcher on the surrounding scope, so the rendered output tracks $scope.message for as long as the page lives.

The cycle runs in three steps.

  1. The controller writes a value onto $scope.
  2. A digest pass compares every watched expression with its previous result.
  3. Each expression whose value changed is re-rendered in place.

An interpolated expression is therefore one-way, from scope to view. Two-way binding needs ng-model, the directive designed for form controls. Add <input ng-model="message"> beside the heading, type into the box, and the heading changes on every keystroke, because ng-model writes the field value back onto the same scope property the expression watches.

Expressions are deliberately limited. They read scope properties, call scope methods and tolerate undefined values silently, yet they cannot declare variables, use control-flow statements or reach global objects such as window.

How to Fix a Blank Page or Unrendered {{ }}

A first AngularJS program fails in one of two visible ways: the page stays blank, or the literal text {{message}} appears where Hello World should be. Both mean the framework never took over the markup. Work through the checks below in order, with the browser console open.

  1. Confirm the library loaded. Open the Network panel and look for the angular.js request. A 404 or an unreachable CDN leaves the braces on screen untouched.
  2. Check the script path. A relative path resolves against the folder holding the HTML file, so a copy in a js subfolder needs js/angular.min.js.
  3. Verify ng-app. A missing or misspelled attribute means nothing bootstraps. The attribute is hyphenated as ng-app in markup, even though the directive is camel-cased in JavaScript.
  4. Read the console error. [$injector:modulerr] means the module named by ng-app was never registered. [ng:areq] usually means the controller name in the markup does not match the name passed to .controller().
  5. Look for a second ng-app. Only the first is bootstrapped, so a stray copy left on an inner element silently disables that part of the page.

Two further causes account for most of the remaining reports.

  • The file protocol. This single-file example runs fine when opened directly from disk, but any template fetched over XHR is blocked by browser origin rules. Serve the folder over HTTP once templates appear.
  • A brief flash of braces. When markup renders before the framework compiles it, the raw expression is visible for a moment. Add ng-cloak to the element, or swap the expression for ng-bind="message", which never displays its own markup.

If none of these apply, reduce the page to the example above and add your own code back one line at a time.

FAQs

Any of the four listed above works, and this example uses Webstorm. Because the program is a single static HTML file, a plain text editor is enough. An IDE only adds directive completion, live reload and integrated debugging.

$scope is the binding object shared between a controller and its view. Writing $scope.message inside HelloWorldCtrl makes that property visible to the expression placed on the h1 element.

Both files contain the same framework. angular.js is unminified, so errors point at readable source. angular.min.js is compressed for production and needs explicit dependency annotation, because minification renames the parameter names AngularJS otherwise inspects.

AngularJS is the 1.x framework shown here, driven by directives, $scope and plain JavaScript. Angular, meaning version 2 and later, is a separate TypeScript framework built on components and is the actively maintained line.

Mainly for maintaining existing 1.x applications, which remain widespread. The vocabulary of binding, directives and dependency injection transfers, yet support ended in January 2022, so new projects belong in modern Angular.

Yes. Register each one with .controller() on the same module and attach them to different elements using ng-controller. Each receives its own child scope, so identically named properties stay independent.

Modern assistants read a 1.x codebase and produce an inventory of directives, filters and services with suggested component and service equivalents. That inventory is useful for scoping the work, though every mapping still needs manual verification.

GitHub Copilot completes controller boilerplate, $scope assignments and ng-submit handlers from a short comment, but its training skews toward modern Angular, so check that suggestions really use 1.x syntax.

Summarize this post with: