Data Oriented Development with Angularjs

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 ngApp directive is used to autobootstrap an AngularJS application. This directive is a part of the ng core module. The ng module is loaded by default when an AngularJS application is started. The ngApp directive 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 ngApp and ngModel, whereas in the HTML document, we are using ng-app and ng-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-app can also be written as ng_app or ng: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.
The ngModel directive binds input, select, and textarea (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 the yourName variable is extracted and displayed in the enclosing DOM element.
So, in short, we created a yourName variable 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 the yourName variable in the h1 element. So, as soon as you start typing into the input textbox, you'll see the same text reflected in the h1 element. 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.

Data Oriented Development with Angularjs

Data Oriented Development with Angularjs

Overview of this book

Related Content you might be interested in

Current Title:

Data Oriented Development with Angularjs

AngularJS Hello World!