AngularJS Hello World!
Every programming language has a venerable Hello World code example that forms the starting point in the study of that language. So, how can AngularJS be left behind?
The following is AngularJS's Hello World example. This example shows data binding in action:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script> <title>Hello world from AngularJS</title> </head> <body> <div ng-app> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </div> </body> </html>
(hello-world.html)
Let's take a look at the preceding code (especially the highlighted parts of the code):
- Inside the script tag, we included a reference to
angular.min.js. - The
ngAppdirective is used to autobootstrap an AngularJS application. This directive is a part of thengcore module. Thengmodule is loaded by default when an AngularJS application is started. ThengAppdirective designates the root element of the application. Whenever Angular finds the ngApp directive, it loads the module associated with the directive. From this point on, Angular can start its magic. This directive is typically placed near the root element of the page, for example, on the<body>or<html>tags. Alternatively, it can be placed on the part of the HTML that we want AngularJS to control.- Directives: These are markers on a DOM element (such as an attribute, element name, comment, or CSS class). They tell AngularJS's HTML compiler to attach a specified behavior to that DOM element or even transform the DOM element and its children. You can read more about directives in the AngularJS directive guide at https://docs.angularjs.org/guide/directive. Also, notice that the names of the AngularJS directives we've used so far are
ngAppandngModel, whereas in the HTML document, we are usingng-appandng-model. By convention, directives are named using camelCase in JavaScript and snake case within your HTML. Snake case means all lowercase, using either:,-, or_to separate the words. So,ng-appcan also be written asng_apporng:app. - Bootstrapping: This is the Angular initialization process and can be done in one of two ways: automatic initialization (which is the recommended way) or manual initialization (in cases when you need to perform an operation before Angular compiles a page). The automatic initialization process, as explained above, starts when Angular encounters an ngApp directive. You can read more about the AngularJS bootstrap process in the AngularJS bootstrap guide available at https://docs.angularjs.org/guide/bootstrap.
- Directives: These are markers on a DOM element (such as an attribute, element name, comment, or CSS class). They tell AngularJS's HTML compiler to attach a specified behavior to that DOM element or even transform the DOM element and its children. You can read more about directives in the AngularJS directive guide at https://docs.angularjs.org/guide/directive. Also, notice that the names of the AngularJS directives we've used so far are
- The
ngModeldirective bindsinput,select, andtextarea(or custom form control) to a property on the scope.- Scope refers to the application model and acts as the glue between application controller and the view. You can read more about scopes in the AngularJS scope guide at https://docs.angularjs.org/guide/scope.
{{yourName}}renders the value of this variable in the DOM element. It means whatever value was stored in theyourNamevariable is extracted and displayed in the enclosing DOM element.- So, in short, we created a
yourNamevariable on the scope and bound it to the input element (which means, the data entered in the input box is stored in this variable). Then, we just showed the value of theyourNamevariable in theh1element. So, as soon as you start typing into the input textbox, you'll see the same text reflected in theh1element. This is one-way data binding in action. Isn't it cool!
You'll also notice that there are no IDs assigned to any of the HTML elements! This is possible because of the power of data binding—you'll hardly need to retrieve a DOM element based on its ID because data-bound properties on the scope will do the magic.
