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 add ng-app to 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 called myName with the value John Doe.
Note
Using ng-init is 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 value John Doe. These curly brackets can also be used for expressions, as in the example {{2014-1968}} outputs the result 46. This is very similar to how other templating engines such as Mustache or Smarty work.
Directives: The ng-app and the ng-init tags 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.

AngularJS Web Application Development Blueprints

By : Vinci J Rufus

AngularJS Web Application Development Blueprints

By: Vinci J Rufus

Overview of this book

Anatomy of a simple AngularJS app

Note

AngularJS Web Application Development Blueprints

By : Vinci J Rufus

AngularJS Web Application Development Blueprints

By: Vinci J Rufus

Overview of this book

Anatomy of a simple AngularJS app

Note

Create a Note

Delete Bookmark

Delete Note

Edit Note

Confirmation

Buy this book with your credits?