Getting started with AngularJS

September 2016


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:
index.html
<!doctype html>
<html ng-app="firstApp">
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="firstApp.js"></script>
</head>
<body ng-controller="firstCtrl">
    <h1>{{title}}</h1>
</body>
</html>

firstApp.js
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
controller('firstCtrl'
. linked with the webpage with
<html ng-app="firstApp">
and
<body ng-controller="firstCtrl">
controller.

All directives are starting with
ng-
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
{{title}}
therefore displays the value of
$scope.title
, 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.

Example:
<body ng-controller="firstCtrl">
    <input type="text" ng-model="text">
    <pre>{{text}}</pre>
</body>


Here, we have created text fileds related to the
ng-model="text"
and which is then displayed with
{{text}}
.
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
$scope.text
variable, it will considered as "undefined" until the first value is entered in the text field.

JSON


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":"http://flagpedia.net/data/flags/normal/fr.png"},
    {"id":"EN", "name":"English", "flag":"http://flagpedia.net/data/flags/normal/gb.png"},
    {"id":"ES", "name":"Español", "flag":"http://flagpedia.net/data/flags/normal/es.png"},
    {"id":"DE", "name":"Deutsch", "flag":"http://flagpedia.net/data/flags/normal/de.png"},
    {"id":"IT", "name":"Italiano", "flag":"http://flagpedia.net/data/flags/normal/it.png"}
    ];
    
$scope.spoken = $scope.languages[0];

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

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
$scope.languages
.

Libraries


You will find an extensive documentation on the official website: https://docs.angularjs.org/api
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: http://angular-ui.github.io/
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">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
    <script src="firstApp.js"></script>
</head>
<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>
                {{lang.name}}
            </slide>
        </carousel>
    </div>
</body>
</html>

The expected result:

Related :

This document entitled « Getting started with AngularJS » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.