Contact Information


We're Available 24/ 7. Drop us an email.

AngularJS Hello World


In the previous tutorial AngularJS Installation and Configuration, we created and configured an AngularJS applications. This tutorial builds from the previous tutorials and explains the key components of an AngularJS application from a MVC perspective.

Topics to be covered

We will cover the following topics

  • AngularJS Application directories structure
  • AngularJS Application key components
    • AngularJS HTML
    • AngularJS Scripts

AngularJS Application directories structure

This is very subjective and as meant as a guideline. Feel free to adopt whatever structure best suits your needs.



  • css/ contains all CSS files
  • images/ contains all images
  • js/contains all common JavaScript files including angular itself etc.
  • app/ contains AngularJS application specific code
    • app.js contains AngularJS JavaScript code
    • /controllers contains code for all controllers
    • /others this directory can be used for other items i.e. filters, services etc.
  • index.html the default page that is loaded.

Throughout these tutorial series, we will work with the above application structure. Let’s now create the missing directories in the project that we created in the previous lesson.

  1. Create a new directory /app
  2. Create a new JavaScript file in /app directory app.js
  3. Create a sub directory /app/controllers
  4. Create a new JavaScript file in /controllers directory aboutController.js
  5. Create a new JavaScript file in /controllers directory homeController.js

AngularJS Application key components

We are looking at this from a best practices and MVC perspective point of view. The following are the key minimal components that your application must have

  • angular.min.js – AngularJS JavaScript file. This must be loaded before you execute any AngularJS related files.
  • angular-route.min.js – AngularJS routing file. This must be included after angular.min.js
  • ng-app="MyApp" – specifies the module name. This can be specified in html, body, div etc. element that you want to manipulate using AngularJS. I usually put it in the html tag giving him global scope over all elements within html.
  • ng-controller="HelloController" – specifies the controller name that will be executed.
  • {{variable_name}} – prints variable values in the web browser.
  • app.js – this is the main application file
  • homeController.js – atleast a single controller must be defined for your application. You can define as many as you want depending on your application requirements.

We will now update the application we developed in the previous tutorial to conform to the agreed upon practices in this tutorial. We will do the following

  1. update the HTML file
  2. write code for app.js
  3. write code for /app/controllers/homeController.js
  4. write code /app/controllers/aboutController.js

Step 1: Update index.html

Open /index.html file

Update the code to the following

<!DOCTYPE html>
<html ng-app="MyApp">
        <title>AngularJS  Tutorial Series</title>
        <meta charset=UTF-8>
        <meta name=viewport content="width=device-width">
        <div  ng-controller="HelloController">Hi {{name}}, welcome to AngularJS Tutorial Series</div>
        <div ng-controller="AboutController">Brought to you by {{name}}.</div>

        <!—Angular JS Scripts -->
        <script src=js/angular.min.js></script>
        <script src=js/angular-route.min.js></script>
        <!-- AngularJS Application Specific Scripts -->
        <script src=app/app.js></script>
        <script src=app/controllers/homeController.js></script>
        <script src=app/controllers/aboutController.js></script>


  • <html ng-app="MyApp"> specifies the AngularJS module that we will use.
  • <div ng-controller="HelloController">Hi {{name}}, welcome to AngularJS Tutorial Series</div> attaches HelloController to the div element. {{name}} prints the value of name variable that will be set in HelloController.
  • <div ng-controller="AboutController"> Brought to you by {{name}}.</div> attaches AboutController to the div element. {{name}} prints the value of name variable that will be set in AboutController
  • <!-Angular JS Scripts --> loads AngularJS script and AngularJS route script. We are not using routes in this tutorial yet but we will soon on the tutorial on AngularJS Route.
  • <!-AngularJS Application Specific Scripts --> loads application specific JavaScript files. app/app.js should be loaded before any application specific scripts

Step 2: Write code for app.js

Add the following code to app/app.js file

var MyApp = angular.module("MyApp", []);


  • var MyApp = angular.module("MyApp", []); defines a variable MyAPP. The Angular module object with a namespace of MyApp is assigned to our variable.

Step 3: Write code for homeController.js

Add the following code to app/controllers/homeController.js

MyApp.controller('HelloController', hello);

function hello($scope)
    $ = "Rodrick";


  • MyApp.controller('HelloController', hello); uses the MyApp object that we defined in /app/app.js. This code calls the controller method and passes in two parameters. The name of the controller to be created HelloController and the function name hello that will be executed when the controller is executed.
  • function hello($scope){$ = "Rodrick";} defines a function hello that accepts $scope object as a parameter. $scope is used to pass data between controllers and views. $name.scope = "Rodrick" assigns the value Rodrick to the name variable. This is the name that we are printing in the web browser.

Step 4: Write code for aboutController

MyApp.controller('AboutController', about);

function about($scope)
    $ = "Kode Blog Tutorials";


  • The above code is the same as the code for homeController. The only difference is the controller name and function name.

Load the following URL in your web browser


You will get the following output

AngularJS Applictaion


In this tutorial, we came up with some guidelines that simplicity developing AngularJS applications. We looked at the application structure directories and some of the key components of an AngularJS application.

What’s next?

The next tutorial in the series will look at tools that will help you debug your AngularJS code. If you found this tutorial useful, support us by using the social media buttons to like and share the tutorial. If you didn’t find it useful, please use the comments section below to let us know how we can do better next time. Each week, a new AngularJS tutorial is added to our collection. Subscribe to our newsletter, like our Facebook fan page or follow us on Twitter to get free updates when the collection is updated.

Tutorial History

Tutorial version 1: Date Published 2015-09-19

Author: Rodrick Kazembe

Rodrick is a developer who works on Desktop, Web and Mobile Applications. He is familiar with Python, Java, JavaScript, C++, C#, Kotlin, PHP, Python and the list goes on. Rodrick enjoys sharing knowledge especially when it comes to technology.

AngularJS Installation and Configuration

AngularJS Debug

Leave A Reply