Anatomy of a simple AngularJS app
Perform the following steps:
- To start, let's first download a version of AngularJS from http:www.angularjs.org.
- Click on the Download button and select the following options from the pop-up window:
- Branch: Select Stable
- Build: Select Minified
- Download the JS file and place it in your project's folder.
Let us start by writing a simple AngularJS app. Create an index.html file with the following code:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Basic</title>
</head>
<body ng-app ng-init=" myName ='John Doe' ">
{{myName}} is {{ 2014-1968}} years old.
<script src=" angular.min.js " type="text/javascript "> </script>
</body>
</html>This is a regular HTML page with the HTML5 doctype and the AngularJS JavaScript file being called in. Now, let us look at specific syntaxes of AngularJS and what they mean. The syntaxes are as follows:
ng-app: This defines the element within which AngularJS will bootstrap itself. In most cases, we would add it to the<html>or<body>tag. It is also possible you would be building a regular application in Java, PHP, or .NET and only a section of it would be running an AngularJS app, in such cases you would addng-appto the<div>tag wrapping the app component.ng-init: This is used to define the initialization tasks. In this example, we are creating a model calledmyNamewith the valueJohn Doe.Note
Using
ng-initis not recommended for production apps. As we will see later in this chapter, the ideal way to initialize the variable would be in the controller instead of directly writing it in the view.{{ }}: The double curly brackets are used to output the data stored in models. In this case,{{myName}}outputs the valueJohn Doe. These curly brackets can also be used for expressions, as in the example{{2014-1968}}outputs the result46. This is very similar to how other templating engines such as Mustache or Smarty work.- Directives: The
ng-appand theng-inittags that you see in the preceding sample code are called Directives. They are an integral part of any AngularJS app and it is through these directives that AngularJS is able to modify the DOM element of an application. AngularJS comes with a whole set of predefined directives many of which we will use as we go through this book. The good thing about AngularJS is that you can also create your own custom directives that can meet your specific requirements.
