Angular JS (version 1.6)— Hello world

This tutorial will guide you through the creation of the “Hello World” app using Angular JS version 1.6.

Here is some useful concepts used in this tutorial:

IIFE (Imediate Invoked Function Expression)

This is a javascript feature used to encapsulate the code, avoiding access to the variables and functions outside of the scope of the document.

Example of how use an iife:

Angular Modules

A module defines the scope of the application, it is the container for the different parts of the application (controllers, services, filters, etc.)

An Angular module can be defined as follows:

The first parameter is the name of the module and the second is an array of other angular modules that myApp depends upon.

Angular Controllers

The controllers are responsible for setup the model that will be used by the view (html page). Below, we defined that the model has one property called message with value “ Hello world!”.

Html Page (View)

Now as we have our app and controller setup, we can build the view that will display the message “Hello world”.

To do so, we need to use two angular directives:

ng-app: This directive defines the scope of the angular application (module defined in app.js). Usually, it is used in the html tag as an attribute.

ng-controller: This directive defines the scope of the angular controller (defined in main-controller.js). Usually, it is used in the body tag as an attribute or in div tags.

There is two ways to access the properties of the model:

Using the syntax {{ }} or the directive ng-bind.