Chapter 1
<body ng-app ng-init="name = 'World'">
<h1>Hello, {{name}}!</h1>
</body>
</html>First of all, we need to include the AngularJS library to make our sample run
correctly in a web browser. It is very easy as AngularJS, in its simplest form, is
packaged as a single JavaScript file.
AngularJS library is a relatively small one: a minified and gzipped
version has a size of around 30 KB. A minified version without gzip
compression has a size of around 80 KB. It doesn't require any third-
party dependencies.
For the short examples in this book we are going to use an un-
minified, developer-friendly version hosted on Google's content
delivery network (CDN). Source code for all versions of AngularJS
can be also downloaded from http://code.angularjs.org.Including the AngularJS library is not enough to have a running example. We need
to bootstrap our mini application. The easiest way of doing so is by using the custom
ng-app HTML attribute.
Closer inspection of the
tag reveals another non-standard HTML attribute:ng-init. We can use ng-init to initialize model before a template gets rendered.
The last bit to cover is the {{name}} expression which simply renders model value.
Even this very first, simple example brings to light some important characteristics
of the AngularJS templating system, which are as follows:
- Custom HTML tags and attributes are used to add dynamic behavior to an
otherwise static HTML document - Double curly braces ({{expression}}) are used as a delimiter for
expressions outputting model values
In the AngularJS, all the special HTML tags and attributes that the framework can
understand and interpret are referred to as directives.