Introduction

How about a very simple example to begin? Have a look at it and lets go trough the lines afterward!

Example

<!DOCTYPE html>
<html ng-app="">
<body>

    <p>Nothing here {{'yet’ + '!'}}</p>

    <script src"//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 

</body>
</html>

Play with example »

ng-app directive

AngularJS extends the existing HTML-markup with the so called ng-directives, the first you see here is the ng-app directive, which states, that a certain html-element is the owner of an AngularJS-application. This application will then be auto-bootstrapped. Per HTML-page you can have exactly one ng-app which will be auto-bootstrapped. If you want to have multiple AngularJS-applications on one page, you need to manually bootstrap them with angular.bootstrap.

AngularJS Expressions

Within the paragraph-element you can see a typical AngularJS script-expression, which concatenates two strings. Expressions are always in the following format: {{ expression }}. Instead of strings you could use variables in expressions like {{ ‘Hello ‘ + fullname }}.

AngularJS scriptlibrary

The script-element loads the library necessary for AngularJS to work. Please note, that the script is at the end of the body. This allows the browsers to render before the library is loaded. If it was in the head, it would block rendering until the libary is loaded.