New version Angular 9

AngularJS Tutorial - 1, Hello World!

The idea of this tutorial is giving the base to do the following with AngularJs,
and to build some common useful library to ease the development:

This is what will do in this very first step!

Screenshot

This will be the chapters:

Download

The source for this part is here: 01_helloworld.zip.

Prepare the stub

We prepare the base of our application including angular js

<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
		<meta content="utf-8" http-equiv="encoding">
		<!--Angular js binding-->
		<script type="text/javascript" src="lib/angular/angular.min.js"></script>
	</head>
	<body>
	
	</body>
</html>

Hello world

Declare the application

Let's start with a basic application. We will show "Hello [name]" if
the input text contains a text.

First we should setup an app inside the head. We create the 'helloModule'.
Note the function call, the list of dependencies MUST be present and CAN be
empty. The module name is anything we want. The dependencies list contains
the names of the module needed by the current module.

angular.module('moduleName',[list of dependencies]);

<head>
	...
	<script type="text/javascript">
		var app = angular.module('helloModule',[]);
	</script>
</head>
...

Fill the body

<body ng-app="helloModule">
<div>
	Say hello to: <input ng-model="helloTo" type="text" /></br>
	<span ng-if="helloTo.length>0">Hello to {{helloTo}}</span>
</div>
</body>

This works out of the box. Loading the page will show the Hello to 'name' when
some content is present inside the input text.
Changing the content of the input text will automagically show the span!

Adding a controller

We want to remove the function in ng-if to show a more pleasant "hasHelloValue()".
We should then build a "container" for this function. It will be the controller!

Controller declaration

A new controller is created inside the application: helloController.
Note the declaration:

	app.controller('controllerName',
		['dependency1',...,'dependencyn',function(dependency1,...,dependencyn){
			//function body
		}]);

The first list contains the 'official names' of the dependencies. If our controller
is used by another controller, we will insert here the string 'helloController'.
They must match the function parameters. This will be used for the minification of
the angular javascript files (see the note on minification )

We use the $scope variable here we will address it in a few lines

var app = angular.module('helloModule',[]);

app.controller('helloController',['$scope',function($scope){
	$scope.hasHelloValue = function(){
		return $scope.helloTo.length>0;
	}
}]};

And we connect it to the html.

<body ng-app="helloModule">
<div ng-controller="helloController">
	Say hello to: <input ng-model="helloTo" type="text" /></br>
	<span ng-if="hasHelloValue()">Hello to {{helloTo}}</span>
</div>
</body>

Scope

We used a special parameter, the '$scope' inside our controller declaration.
And we added the function to the scope!

This is the context of the controller. Note that

Notes

Minification and Angular

When a javascript file is minified (kind of compressed) the function names and parameters
are reduced to shorter strings, like longFunctionName(longParameterName) can be
transformed into f1(p1). The 'real' strings are instead mantained. To understand
the dependencies and parameters angular use the trick to declare the "string" names
of dependencies and parameters.

	app.controller('helloController',['$scope',function($scope){
		...
	}]);

The previous would be totally equivalent to:

	app.controller('helloController',function($scope){
		...
	});

But the declaration without the string parameters cannot be minified.