KodeBLOG

Kode Blog - Inspiring And Empowering Developers.

Home About Us Courses Categories Blog Contact Us

AngularJS Hello World

Introduction

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/
images/
js/
    angular.min.js   
app/
    app.js
    controllers/
        homeController.js
        aboutController.js
    others/
index.html

HERE,

  • 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

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">
    <head>
        <title>AngularJS  Tutorial Series</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <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>
    </body>
</html>

HERE,

Step 2: Write code for app.js

Add the following code to app/app.js file

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

HERE,

Step 3: Write code for homeController.js

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

MyApp.controller('HelloController', hello);

function hello($scope)
{
    $scope.name = "Rodrick";
}

HERE,

Step 4: Write code for aboutController

MyApp.controller('AboutController', about);

function about($scope)
{
    $scope.name = "Kode Blog Tutorials";
}

HERE,

Load the following URL in your web browser

http://localhost/angular-js/

You will get the following output

AngularJS Applictaion

Summary

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