Getting started with AngularJS

March 2017

Getting started with AngularJS

AngularJS is a JavaScript framework for the creation of dynamic web pages. It can be used as an alternative or complement to other framework, including jQuery.

Hello World!

A basic use of AngularJS:
<!doctype html>
<html ng-app="firstApp">
    <meta charset="utf-8">
    <script src=""></script>
    <script src="firstApp.js"></script>
<body ng-controller="firstCtrl">

var firstApp = angular.module('firstApp', []);
firstApp.controller('firstCtrl', function ($scope) {
    $scope.title = 'Hello World!';

Results :

Some explanations about the code:

On the
<script src="firstApp.js"></script>
instruction, we wull add the AngularJs script, which in turn will define the
angular.module('firstApp', []);
and the
. linked with the webpage with
<html ng-app="firstApp">
<body ng-controller="firstCtrl">

All directives are starting with
are specific to AngularJS. It also include the braces {{}}, allowing the display of a variable (declared withing the scope of the controller) in a html page
In our example
therefore displays the value of
, which is "Hello World!".

The variables

AngularJS can dynamically change the variables within the scope of the controller and display them the web page. AngularJS will automatically update the display when the values ??change.

<body ng-controller="firstCtrl">
    <input type="text" ng-model="text">

Here, we have created text fileds related to the
and which is then displayed with
Each time the values in the text field is change, the below paragraph will change too:

Note that: it is not necessary to modify the javascript file to declare the
variable, it will considered as "undefined" until the first value is entered in the text field.


AngularJS lends itself to an intensive use of data in JSON format. E.g, Manage a list of languages:

$scope.languages = [
    {"id":"FR", "name":"Français", "flag":""},
    {"id":"EN", "name":"English", "flag":""},
    {"id":"ES", "name":"Español", "flag":""},
    {"id":"DE", "name":"Deutsch", "flag":""},
    {"id":"IT", "name":"Italiano", "flag":""}
$scope.spoken = $scope.languages[0];

<body ng-controller="firstCtrl">    
        <li ng-repeat="lang in languages">
            <img ng-src="{{lang.flag}}" width=20></img> {{}}
    <select ng-model="spoken" ng-options="lang as for lang in languages">
    <img ng-src="{{spoken.flag}}" height=50></img>

Which gives:

In this example, you don't need to modify the html page to add or remove a language. You only have to update


You will find an extensive documentation on the official website:
AngularJS is not limited only to its core API, in fact it is an extensible language allowing users to develop and share their own modules.
There are several libraries already available online:
AngularUI has several modules allowing a complete rewrite of Bootstrap (initially based on jQuery).
To add a dependency to a module, the latter must be passed as parameter for the initialization table.
For example, the Bootstrap module:
var firstApp = angular.module('firstApp', ['ui.bootstrap']);

We can then change the web page to use the features of the new module. Example :use Bootstrap to display the flags of each language:
<!doctype html>
<html ng-app="firstApp">
    <meta charset="utf-8">
    <link rel="stylesheet" href="">    
    <script src=""></script>
    <script src=""></script>
    <script src="firstApp.js"></script>
<body ng-controller="firstCtrl">
    <div style="width:500px">
        <carousel interval="1500">
            <slide ng-repeat="lang in languages">
                <img ng-src="{{lang.flag}}" style="margin:auto; max-height:200px"></img>

The expected result:


Published by deri58.
This document, titled "Getting started with AngularJS," is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (